/* Teev console.
   Shares its token set with the admin console (teev-benchmark-admin): same
   surfaces, same type, same status palette. The consoles differ only in accent
   — lime here, cyan there — so it is always obvious which one you are in. */

:root {
  color-scheme: dark;
  --bg: #080b0d;
  --bg-raised: #0d1114;
  --panel: #11171a;
  --panel-2: #151c20;
  --panel-3: #1a2327;
  --border: #263135;
  --border-soft: #1d272b;
  --text: #eef4f1;
  --muted: #899792;
  --muted-2: #5f6e69;

  --accent: #c8f765;
  --accent-strong: #aeea37;
  --accent-ink: #18200b;
  --cyan: #65d9d1;
  --repo-language: #9aa8a2;

  /* Status palette, validated against this panel surface with the dataviz
     validator: CVD ΔE 10.0 (protan, worst adjacent), normal-vision ΔE 18.9,
     chroma floor and 3:1 contrast all pass.
     Two earlier attempts failed and are recorded so they are not reintroduced:
       #f2a65a/#ff746c  — normal-vision ΔE 12.3, deutan 6.7. Warning and
                          critical were not reliably distinguishable.
       #c8f765 for pass — collides with amber at ΔE 12.7, because it is the
                          lime brand accent. Pass therefore uses its own green
                          rather than borrowing --accent.
     Never the only signal: every status ships with a glyph, and the legend
     names all four states. */
  --pass: #4fc98a;
  --warn: #f0c419;
  --crit: #ff5c7a;

  /* Filled marks need mid-lightness on a dark surface (OKLCH L 0.48–0.67).
     The lime accent sits at L 0.915 and reads as a glow rather than a bar, so
     the standings fill uses this instead. */
  --mark: #33a86f;

  /* Every remaining var(--red) is a failure state (scan failed, validation
     failed, error toast), so it aliases the validated critical colour. It is
     deliberately NOT restored to the original #ff746c: the note above records
     that hex as failing CVD separation at ΔE 6.7 deutan. The variable survived
     the console rebuild while its definition did not, leaving four rules
     painting failures in inherited body text. */
  --red: var(--crit);

  /* Same story for the restored rules' warning colour: "calibration pending"
     and an unavailable runner both mean warn, so it aliases the validated
     token rather than reintroducing the original's raw amber. */
  --orange: var(--warn);

  /* Every select in the console draws its arrow from this. Losing the
     definition stripped `appearance: none` dropdowns back to no indicator at
     all — a flat box with no affordance, which is much of why the UI reads as
     unfinished. The stroke matches --muted. */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23899792' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Manrope", Inter, system-ui, sans-serif;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
}

/* Runner availability is global: Free and Paid plans use the same customer
   compute, while entitlement checks decide which jobs it may execute. */
.header-runner-status {
  width: 190px; min-width: 190px; min-height: 40px; padding: 6px 11px;
  display: flex; align-items: center; gap: 9px;
  color: var(--text); background: rgba(255,255,255,.018);
  border: 1px solid var(--border-soft); border-radius: 10px; cursor: pointer;
  text-align: left; font: inherit; transition: border-color .16s ease, background .16s ease;
}
.header-runner-status:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.035); }
.header-runner-status:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.header-runner-copy { display: grid; min-width: 0; }
.header-runner-status strong { font-size: 10.5px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-runner-glyph { width: 18px; height: 18px; flex: 0 0 auto; display: grid; place-items: center; }
/* Four states, four colours: enrolled-and-down has to look different from
   never-set-up, and an install actually in flight from both. */
.header-runner-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #58615d; box-shadow: 0 0 0 4px rgba(88,97,93,.1);
  transition: background .18s ease, box-shadow .18s ease;
}
.header-runner-status[data-runner-state="online"] .header-runner-dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(201,255,99,.09); }
.header-runner-status[data-runner-state="offline"] .header-runner-dot { background: var(--crit); box-shadow: 0 0 0 4px rgba(255,92,122,.12); }
/* Pulses rather than sitting solid: the runtime build behind this can run for
   several minutes with nothing else to show it is still moving. */
.header-runner-status[data-runner-state="connecting"] .header-runner-dot {
  background: var(--cyan); box-shadow: 0 0 0 4px rgba(101,217,209,.12);
  animation: connection-pulse 1.4s ease-in-out infinite;
}

*, *::before, *::after { box-sizing: border-box; }

/* Any class that sets `display` outbids the user-agent's `[hidden]` rule on
   specificity, which silently breaks every element this app toggles. Declared
   once, here, so adding a `display` to a panel can never un-hide it. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
a { color: inherit; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ chrome */

.brand { display: flex; align-items: center; gap: 11px; }

.brand-mark {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; background: var(--accent); color: var(--accent-ink);
}
.brand-mark svg { width: 19px; height: 19px; fill: currentColor; }

.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong { font-size: 15px; letter-spacing: -0.02em; }
.brand-text span {
  font-family: var(--mono); font-size: 10.5px; color: var(--muted-2);
  letter-spacing: 0.1em; text-transform: uppercase;
}

.runner-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel);
  font-size: 12.5px; color: var(--muted);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); }
.dot.on { background: var(--accent); box-shadow: 0 0 0 3px rgba(200, 247, 101, 0.14); }
.dot.off { background: var(--muted-2); }

/* ------------------------------------------------------------------ layout */

.layout {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  align-items: start;
  min-height: calc(100vh - 60px);
}

/* -------------------------------------------------------------------- rail */

.rail {
  border-right: 1px solid var(--border-soft);
  padding: 20px 14px;
  position: sticky; top: 60px;
  max-height: calc(100vh - 60px); overflow-y: auto;
}

.count { font-family: var(--mono); font-size: 12px; color: var(--muted-2); }

.run-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

/* Repositories, relayed from the tenant's own agent. */
.repos-head { padding-top: 24px; align-items: center; }
.repo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.repo-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 6px 8px; border-radius: 6px; font-size: 13px;
}
.repo-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repo-meta { font-family: var(--mono); font-size: 11px; color: var(--muted-2); flex: none; }
.repo-note { color: var(--muted-2); font-size: 12px; }
.repo-name.selected { font-weight: 600; }
.scan-button { flex: none; }

.candidate-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.candidate-list li { display: grid; gap: 1px; padding: 6px 8px; border-radius: 6px; font-size: 13px; }
.candidate-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-status { padding: 0 8px 8px; color: var(--muted-2); font-size: 12px; font-family: var(--mono); }

.run-item {
  width: 100%; display: grid; gap: 6px; text-align: left;
  padding: 11px 12px; border-radius: 10px;
  border: 1px solid transparent; background: transparent;
  color: inherit; font: inherit; cursor: pointer;
}
.run-item:hover { background: var(--panel); }
.run-item.selected { background: var(--panel-2); border-color: var(--border); }
.run-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.run-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.run-benchmark {
  font-weight: 600; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.run-item-bottom {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11.5px; color: var(--muted-2);
}

.status {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; padding: 2px 7px; border-radius: 5px;
  border: 1px solid var(--border); color: var(--muted); flex-shrink: 0;
}
.status.completed { color: var(--accent); border-color: rgba(200, 247, 101, 0.32); }
.status.running, .status.claimed { color: var(--cyan); border-color: rgba(101, 217, 209, 0.32); }
.status.failed, .status.abandoned { color: var(--crit); border-color: rgba(255, 92, 122, 0.32); }

.rail-empty { padding: 12px 8px; color: var(--muted-2); font-size: 13px; }

/* ------------------------------------------------------------------ detail */

.detail { padding: 34px 40px 80px; max-width: 1180px; }

/* The verdict — the one sentence this product exists to say. Everything else
   on the page is evidence for it, so it gets the largest type and the only
   accent-coloured text.
   `.verdict` is shared with the packaging record modal; the run page has its
   own `.run-summary` wrapper and must not restyle it out from under that. */
.verdict { padding-bottom: 26px; border-bottom: 1px solid var(--border-soft); }

.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted-2); margin: 0 0 12px;
}

/* 20ch broke gateway-prefixed model names across two lines with a hyphen in
   the middle of the identifier. Model names are the long part of most
   headlines, so the measure is set to fit one. */
#verdictHeadline {
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.14; letter-spacing: -0.035em; max-width: 27ch;
}
#verdictHeadline em { font-style: normal; color: var(--accent); }

.verdict-sub { color: var(--muted); margin: 12px 0 0; font-size: 15px; }

/* ----------------------------------------------------------- run summary */

/* Execution follows the packaging record's title → named sections rhythm. */
.run { display: grid; gap: 22px; align-content: start; }
.run-summary { padding: 0; margin: 0; border: 0; }
.run-summary-toolbar, .run-summary-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.run-summary-toolbar { margin-bottom: 11px; }
.run-summary-toolbar .panel-label { margin: 0; }
.run-summary-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.run-summary-actions:empty { margin-top: 0; }

/* Stacked, not side by side. A two-column split left a ragged gap under the
   leaderboard on any run with fewer tools than the vitals has rows, and it
   squeezed the model names — which are the longest strings on the page — into
   the narrower half. Full width fixes both, and the reading order is the order
   of importance: who won, then what the run cost. */
.panel-label {
  font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted-2); margin: 0 0 11px; font-weight: 600;
}

/* --------------------------------------------------------------- standings */

.leaderboard { min-width: 0; }

.standing-rows {
  display: grid; gap: 1px; background: var(--border-soft);
  border: 1px solid var(--border-soft); border-radius: 11px; overflow: hidden;
}
.standing-empty { margin: 0; padding: 18px; color: var(--muted); background: var(--panel); }

/* Model / Harness / Effort are the columns Run Configuration set, kept in the
   same order and with the same identity tile so the row that chose a tool and
   the row that reports on it read as the same row. The four to their right are
   what the run produced. */
.standing-head, .standing {
  display: grid;
  grid-template-columns:
    22px 26px minmax(150px, 1.25fr) minmax(78px, .6fr) minmax(87px, .62fr)
    minmax(180px, 1.45fr) 62px 62px 76px 62px 58px;
  gap: 10px; align-items: center;
  padding: 12px 15px; background: var(--panel);
}
.standing-head {
  padding-top: 10px; padding-bottom: 10px;
  background: var(--panel-2); color: var(--muted-2);
  font: 700 10px var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.standing-head span { text-align: center; }
.standing-head span:nth-child(3) { text-align: left; }
/* Rank is the one place a numeral is honest here — the list genuinely is an
   ordering, and the same numeral tags the tool again down in the lanes.
   The top three take medal colours; fourth onwards stays in the recessive ink,
   because a podium that extends to every row is not a podium.

   Driven by a data attribute rather than :nth-child, which broke silently when
   the column header became the container's first child: `.standing:first-child`
   stopped matching anything and first place quietly lost its colour.

   Validated against --panel: WCAG text contrast 8.9 / 10.2 / 5.0 (all AA at
   this size) and every pair clears the ΔE 15 normal-vision floor — 16.1 for
   gold↔bronze, the two that crowd. Bronze is deliberately darker than a
   literal bronze: lighter versions sat at ΔE 11.5 against gold, which no one
   can reliably tell apart. Colour is reinforcement only; the numeral and the
   row order carry the rank. */
.standing-rank {
  font-family: var(--mono); font-size: 11px; color: var(--muted-2);
  font-variant-numeric: tabular-nums; font-weight: 700;
}
.standing-rank[data-medal="1"] { color: #d9b143; }
.standing-rank[data-medal="2"] { color: #b9c4cb; }
.standing-rank[data-medal="3"] { color: #b8783f; }

/* Same model identity treatment as Results: family mark beside the model,
   maker and effort together beneath it, then route and harness as columns. */
.standing-model-mark { width: 26px; height: 26px; }
.standing-name { display: grid; gap: 3px; min-width: 0; }
.standing-name strong { overflow: hidden; color: var(--text); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.standing-name small { overflow: hidden; color: var(--muted-2); font: 600 9.5px var(--mono); text-overflow: ellipsis; white-space: nowrap; }

.standing-cell {
  min-width: 0; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.standing-num {
  font-family: var(--mono); font-size: 12px; color: var(--text);
  text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Cache reads are the largest number on the row and the least interesting —
   they are context re-read, not work done — so they sit in the recessive ink
   and never out-shout what the agent actually produced. */
.standing-num.muted { color: var(--muted-2); }

.tag {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted-2);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; flex-shrink: 0;
}

.standing-bar { display: grid; gap: 6px; min-width: 0; }
.outcome-track {
  display: flex; width: 100%; height: 8px; overflow: hidden;
  border-radius: 4px; background: var(--panel-3);
}
.outcome-segment { display: block; height: 100%; min-width: 2px; }
.outcome-segment[data-tone="pass"] { background: var(--mark); }
.outcome-segment[data-tone="fail"] { background: var(--crit); }
.outcome-segment[data-tone="timeout"] { background: var(--warn); }
.outcome-segment[data-tone="error"] { background: #d55181; }
.bar-track {
  flex: 1; height: 8px; border-radius: 4px;
  background: var(--panel-3); overflow: hidden;
}
/* 4px rounded data-end anchored to the baseline; the track carries the rest. */
.bar-fill {
  height: 100%; border-radius: 0 4px 4px 0;
  background: var(--mark); min-width: 2px;
  transition: width 240ms ease;
}
/* The 2px minimum keeps a small non-zero score visible, but it also drew a
   sliver for a tool that passed nothing — a benchmark must not paint zero as
   something. Zero gets no mark; the written 0/2 beside it carries the value. */
.bar-fill[data-empty="true"] { min-width: 0; }
.standing-value {
  display: flex; flex-wrap: wrap; gap: 2px 5px;
  font-family: var(--mono); font-size: 10px; line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.outcome-label[data-tone="pass"] { color: var(--pass); }
.outcome-label[data-tone="fail"] { color: var(--crit); }
.outcome-label[data-tone="timeout"] { color: var(--warn); }
.outcome-label[data-tone="error"] { color: #d55181; }
.outcome-separator { color: var(--muted-2); }

.standing-meta {
  display: flex; gap: 14px; font-family: var(--mono); font-size: 11.5px;
  color: var(--muted-2); min-width: 118px; justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}

/* Per-job configuration and spend, under the job it belongs to. */
.lane-detail-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 0; margin: 0 0 12px; padding: 0;
  border: 1px solid var(--border-soft); border-radius: 9px;
  background: var(--panel); overflow: hidden;
}
.lane-detail-stats > div { padding: 9px 12px; border-right: 1px solid var(--border-soft); min-width: 0; }
.lane-detail-stats dt {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 3px; white-space: nowrap;
}
.lane-detail-stats dd {
  margin: 0; font-family: var(--mono); font-size: 12px; color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------------------------ vitals */

/* `.facts` stays as the packaging modal's grid of tiles. The run page reads
   its numbers as a label/value ledger instead: five rows scan faster than
   five boxes, and the block sits beside the leaderboard rather than under it. */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 1px; margin: 30px 0 0; padding: 0;
  background: var(--border-soft); border: 1px solid var(--border-soft); border-radius: 10px;
  overflow: hidden;
}
/* Values land on one line across the row. A label is one word or three, so at
   these column widths some wrap and some do not — leaving each value to sit
   wherever its own label finished, and a ledger of eight numbers stepping up
   and down. The value is pushed to the foot of its cell instead, and every
   cell in a row is the same height, so the numbers read straight across. */
.fact {
  display: flex; flex-direction: column; justify-content: space-between; gap: 5px;
  background: var(--panel); padding: 13px 15px;
}
.fact dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-2);
}
.fact dd { margin: 0; font-size: 15px; font-weight: 600; }

/* A single strip of label-over-value pairs. Secondary to the leaderboard by
   size and colour, so it supports the verdict instead of competing with it. */
/* Separators are borders on the items, not a 1px grid gap over a coloured
   container. The gap trick paints every empty track in the last row, so a strip
   that wrapped to four-then-two rendered two phantom tiles. */
.vitals {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  margin: 0; padding: 0; gap: 0;
  background: var(--panel);
  border: 1px solid var(--border-soft); border-radius: 11px; overflow: hidden;
}
.vital {
  padding: 11px 15px; min-width: 0;
  border-right: 1px solid var(--border-soft);
}
.vital dt {
  font-size: 11px; color: var(--muted-2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px;
}
.vital dd {
  margin: 0; font-family: var(--mono); font-size: 13px; font-weight: 500;
  color: var(--text); font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- task by task */

.tasks-section { margin-top: 0; }
.artifacts-section { margin-top: 40px; }
.section-head { margin-bottom: 14px; }
.task-view-toggle {
  display: inline-flex; padding: 2px; gap: 2px; flex-shrink: 0;
  border: 1px solid var(--border-soft); border-radius: 9px; background: var(--panel);
}
.task-view-toggle button {
  padding: 5px 13px; border: 0; border-radius: 7px; background: transparent;
  color: var(--muted); font: inherit; font-size: 12px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.task-view-toggle button:hover { color: var(--text); }
.task-view-toggle button.active { background: var(--panel-3); color: var(--text); }
.task-view-toggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.task-list-note {
  margin: 0 0 12px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .04em; color: var(--muted-2);
}
/* Sized for the summary slot it now occupies rather than the strip it used to
   be under Task by Task: it is the only thing standing between the reader and
   the question "what is this run doing", so it is read, not glanced at. */
.run-live-stage {
  display: grid; gap: 13px;
  padding: 15px 17px; border: 1px solid rgba(101,217,209,.18); border-radius: 10px;
  background: rgba(101,217,209,.055);
}
.run-live-stage[hidden] { display: none; }
/* The same band the packaging record draws: one 4px track across the full
   width with the percentage held at the right edge, stage and detail beneath.
   The bare numeral this used to print gave no sense of how far along the run
   was — the figure needs something to be a fraction of. */
.run-live-stage-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.run-live-stage-line .public-packaging-progress { width: 100%; margin: 0; }
/* Start-aligned: the stage line wraps, and a spinner floating beside the middle
   of a three-line sentence reads as unattached to it. */
.run-live-stage-copy { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 11px; }
.run-live-stage-copy > .chip { margin-top: 1px; }
/* Runner stages name the job they are waiting on, which is a long identifier.
   Truncating it hid the one detail that says which job — so it wraps, and the
   band grows by a line instead. */
.run-live-stage strong { color: var(--text); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.run-live-stage-percent {
  min-width: 38px; color: var(--cyan); font: 700 13px var(--mono);
  text-align: right; font-variant-numeric: tabular-nums;
}

.task-lanes {
  display: grid; gap: 24px;
}

.task-block { display: grid; gap: 9px; min-width: 0; }
.task-group {
  border: 1px solid var(--border-soft); border-radius: 11px;
  background: var(--panel); overflow: hidden;
}
.task-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 2px; background: transparent;
}
/* One line: the id, where it came from, and what kind of task it is. The
   labelled Repository/Complexity/Category list this replaced spent three
   uppercase words saying what three self-evident values already said, and
   pushed the group head onto a second line to do it. */
.task-group-heading-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.task-group-id { min-width: 0; overflow: hidden; color: var(--text); font: 600 13px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
/* The way back to the benchmark, at the height of the pills beside it (10.5px
   at line-height 1.5, plus 2px padding and a hairline = 22px) so the line
   holds one rhythm. Round, though: the pills carry values and this performs an
   action, and shape is what separates the two at a glance. Neutral at rest so
   it never reads as a third classification — the cyan arrives on hover, where
   it means "this goes somewhere" rather than "this is rated". */
.task-group-link {
  flex-shrink: 0; width: 22px; height: 22px; display: grid; place-items: center;
  padding: 0; border: 1px solid var(--border); border-radius: 50%;
  background: var(--panel-3); color: var(--muted); cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
/* 13px in a 22px circle, the same generous proportion the activity rail gives
   its icons — a mark this small has to be drawn boldly to read as an arrow at
   all, and the circle is there to be filled, not to frame a speck. */
.task-group-link svg {
  display: block; width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.task-group-link:hover { color: var(--cyan); border-color: rgba(101,217,209,.4); background: rgba(101,217,209,.12); }
.task-group-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Where the task came from, not what kind it is — an identifier reads as text
   beside the id it belongs to, and leaves the pills to the classification. */
.task-group-repo { color: var(--muted-2); font: 500 11px var(--mono); white-space: nowrap; }

/* Classification, not status. These carry the task's own properties, so they
   are deliberately quieter than the pass/fail chips beside them and never
   borrow the status palette — a "High" complexity task is not a failing one. */
.task-pill {
  flex-shrink: 0; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel-3);
  font-size: 10.5px; line-height: 1.5; color: var(--muted);
  white-space: nowrap;
}
/* Complexity is ordered, so it reads as a ramp of one hue rather than three
   unrelated colours. Low is the quietest and high the strongest; unrated keeps
   the neutral chrome because it is an absence, not a fourth level. */
.task-pill.complexity { border-color: rgba(101,217,209,.22); color: var(--cyan); }
.task-pill.complexity[data-level="low"] { background: rgba(101,217,209,.07); }
.task-pill.complexity[data-level="medium"] { background: rgba(101,217,209,.14); }
.task-pill.complexity[data-level="high"] {
  background: rgba(101,217,209,.24); border-color: rgba(101,217,209,.4); color: #9fe9e3;
}
.task-pill.complexity[data-level="unrated"] {
  background: var(--panel-3); border-color: var(--border); color: var(--muted-2);
}
.task-pill.category { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 640px) {
  .task-pill.category { display: none; }
}
/* Column for column with the Results table and the Summary leaderboard above,
   minus the cached-tokens column those two carry: same order, same track
   sizes, same header treatment. Outcome takes the width Results gives
   Resolved plus room for the sentence under the verdict, which a percentage
   bar does not need. */
.lane-head, .lane {
  grid-template-columns:
    22px 26px minmax(150px, 1.25fr) minmax(78px, .6fr) minmax(87px, .62fr)
    minmax(200px, 1.45fr) 76px 76px 62px 58px;
}
.lane-head {
  display: grid; gap: 10px; align-items: center;
  padding: 10px 15px; border-bottom: 1px solid var(--border-soft); background: var(--panel-2);
  color: var(--muted-2); font: 700 10px var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
/* Nowrap as Results does: "Tokens in" broken across two lines makes the band
   taller than the rows it labels. */
.lane-head span { text-align: center; white-space: nowrap; }
.lane-head span:nth-child(3) { text-align: left; }

/* One lane per tool. Outcome is binary and prominent; operational measurements
   are independent labelled values so they cannot be mistaken for a score.
   A lane is read, not pressed: no pointer, no hover lift, nothing that offers
   a detail there is no longer anything behind. */
.lane {
  display: grid;
  gap: 10px; align-items: center; width: 100%;
  padding: 10px 15px; border: 0; background: transparent; text-align: left;
  color: inherit; font: inherit;
  border-top: 1px solid var(--border-soft);
}
.lane:first-of-type { border-top: 0; }

.lane-rank {
  font-family: var(--mono); font-size: 11px; color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.lane-tool {
  display: grid; gap: 3px; min-width: 0;
}
.lane-tool strong { overflow: hidden; font-size: 12.5px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.lane-tool small { overflow: hidden; color: var(--muted-2); font: 600 9.5px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.lane-model-mark { width: 26px; height: 26px; }
.lane-route, .lane-harness { min-width: 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
/* Harness reads as mark-then-name, the same pair the Compare row is configured
   with. The ellipsis moves onto the name: the tile is a fixed 16px and must
   never be the thing that gets clipped when the column tightens. */
.lane-harness, .standing-harness { display: flex; align-items: center; gap: 7px; }
.harness-cell-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lane-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--muted);
}
.lane-status-copy {
  display: flex; flex-direction: column; justify-content: center;
  gap: 3px; min-width: 0; height: 45px;
}
.lane-status-copy strong {
  overflow: hidden; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap;
}
.lane-status-copy small {
  display: block; overflow: hidden;
  color: var(--muted-2); font-size: 10.5px; line-height: 1.35;
}
.lane-status-copy small > span {
  display: -webkit-box; overflow: hidden;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.lane-status[data-status="passed"] strong { color: var(--pass); }
.lane-status[data-status="failed"] strong { color: var(--crit); }
.lane-status[data-status="error"] strong { color: var(--warn); }
.lane-status[data-status="running"] strong { color: var(--cyan); }
.lane-status[data-status="pending"] strong { color: var(--muted-2); }
/* The same measured-value cell the leaderboard and Results use: the column
   heading names the figure, so the value carries no label of its own. */
.lane-num {
  font-family: var(--mono); font-size: 12px; color: var(--text);
  text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap;
}

.lane-empty {
  display: grid;
  grid-template-columns:
    22px 26px minmax(150px, 1.25fr) minmax(78px, .6fr) minmax(87px, .62fr)
    minmax(200px, 1.45fr) 76px 76px 62px 58px;
  gap: 10px; align-items: center;
  padding: 10px 15px; border-top: 1px solid var(--border-soft);
  color: var(--muted-2); font-size: 12.5px;
}
/* Outcome is the sixth column now that Served via sits between the model and
   the harness; the unrun note runs from there to the end of the row. */
.lane-empty > :last-child { grid-column: 6 / -1; }
.lane-head + .lane-empty { border-top: 0; }

/* Evidence for a job opens directly under that job. The old page scrolled to a
   panel three sections away, which severed the cell from its cause. */
.lane-detail {
  padding: 15px; background: var(--bg-raised);
  border-top: 1px solid var(--border-soft);
  animation: lane-detail-in 180ms ease;
}
@keyframes lane-detail-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.lane-detail-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 11px;
}
.lane-detail-title {
  display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600;
}
.lane-detail-meta {
  margin: 4px 0 0; font-family: var(--mono); font-size: 11px; color: var(--muted-2);
}
.lane-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lane-detail-message {
  margin: 0; padding: 11px 13px; overflow-wrap: anywhere;
  border: 1px solid var(--border-soft); border-radius: 8px; background: rgba(0,0,0,.24);
  color: var(--text); font-family: var(--mono); font-size: 11.5px;
  line-height: 1.55; white-space: pre-wrap;
}
.lane-detail-note { margin: 10px 0 0; color: var(--muted-2); font-size: 11.5px; }

/* Provenance and integrity caveats. Amber rather than red: none of these
   invalidate the result, they qualify it — a stripped test edit still leaves a
   genuine pass, and an estimated cost is still the best figure available. */
.lane-detail-caveats {
  list-style: none; margin: 0 0 11px; padding: 10px 13px;
  border: 1px solid rgba(240, 196, 25, 0.24); border-radius: 8px;
  background: rgba(240, 196, 25, 0.05);
  font-size: 11.5px; line-height: 1.55; color: var(--muted);
}
.lane-detail-caveats li { position: relative; padding-left: 16px; }
.lane-detail-caveats li + li { margin-top: 5px; }
.lane-detail-caveats li::before {
  content: "!"; position: absolute; left: 0; top: 0;
  color: var(--warn); font-family: var(--mono); font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .bar-fill { transition: none; }
  .lane-detail { animation: none; }
}

/* Keep the Summary recognisably tabular at narrower widths, as Results does;
   it scrolls within the section instead of changing into a different card UI. */
@media (max-width: 1040px) {
  .leaderboard { overflow-x: auto; }
  .leaderboard .standing-rows { min-width: 1040px; }
}

/* Same idea for the lanes in the band between the full ten-column table and
   the point where the row folds: it scrolls inside its own frame rather than
   clipping columns off the right edge, which is what `overflow: hidden` did. */
@media (max-width: 1150px) and (min-width: 901px) {
  .task-group { overflow-x: auto; overflow-y: hidden; }
}

/* Below this the ten columns stop fitting the detail column, so the row folds
   into three bands — identity and route, then the verdict, then the four
   measurements — and each measurement carries the heading it lost when the
   header row went away. */
@media (max-width: 900px) {
  .task-group-head { align-items: flex-start; flex-direction: column; gap: 9px; }
  .lane-head { display: none; }
  .lane { grid-template-columns: 20px 26px minmax(120px, 1fr) repeat(4, minmax(54px, auto)); row-gap: 10px; }
  .lane-route { grid-column: 4 / 6; grid-row: 1; text-align: right; }
  .lane-harness { grid-column: 6 / -1; grid-row: 1; text-align: right; justify-content: flex-end; }
  .lane-status { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .lane-num { grid-row: 3; text-align: right; }
  .lane-num::before {
    content: attr(data-label); display: block;
    font: 700 9px var(--mono); line-height: 1; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted-2);
  }
  .lane-num:nth-last-child(4) { grid-column: 4; }
  .lane-num:nth-last-child(3) { grid-column: 5; }
  .lane-num:nth-last-child(2) { grid-column: 6; }
  .lane-num:nth-last-child(1) { grid-column: 7; }
  .lane-empty { grid-template-columns: 20px 26px minmax(0, 1fr) minmax(70px, auto) auto; }
  .lane-empty > .lane-route { grid-column: 4; grid-row: 1; }
  .lane-empty > .lane-harness { grid-column: 5; grid-row: 1; }
  .lane-empty > :last-child { grid-column: 1 / -1; grid-row: 2; }
}

/* ------------------------------------------------------------------ matrix */

/* Shared with analytics and the packaging record — the small uppercase section
   label is the console's default heading. */
.section-head h2 {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 6px;
}
/* The run page's two remaining sections are real destinations rather than
   labels on a stack of panels, so they carry title-weight type. The benchmark
   record's task list is the same kind of thing — it is what the record is
   for — while "what this benchmark covers" really is a label on a stack. */
.artifacts-section .section-head h2, .bench-section-head h2 {
  font-size: 17px; letter-spacing: -0.02em; text-transform: none;
  color: var(--text); margin-bottom: 5px;
}
.section-note { margin: 0; color: var(--muted-2); font-size: 12.5px; }

/* Wide tables scroll inside their own container; the page never scrolls
   sideways. */
.matrix-scroll {
  overflow-x: auto;
  border: 1px solid var(--border-soft); border-radius: 10px; background: var(--panel);
}

.matrix { border-collapse: collapse; width: 100%; font-size: 13px; }

.matrix th, .matrix td {
  border-bottom: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
  padding: 0; text-align: center;
}
.matrix thead th {
  padding: 11px 14px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--muted);
  background: var(--panel-2); white-space: nowrap;
}
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: none; }
.matrix th:last-child, .matrix td:last-child { border-right: none; }

.task-col {
  text-align: left !important; padding: 11px 14px !important;
  font-family: var(--sans); font-size: 11.5px; font-weight: 400;
  color: var(--muted); white-space: nowrap;
  max-width: 300px; overflow: hidden; text-overflow: ellipsis;
  position: sticky; left: 0; background: var(--panel-2); z-index: 1;
}
.matrix tbody .task-col { background: var(--panel); }

.cell {
  width: 100%; display: grid; gap: 3px; justify-items: center;
  padding: 10px 14px; border: 0; background: transparent;
  color: inherit; font: inherit; cursor: pointer;
}
.cell:hover { background: var(--panel-2); }
.cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* The grid never showed which cell was open, so the detail below it looked
   unattached to anything. */
.cell.selected { background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--accent); }

.grid-detail {
  margin-top: 10px; padding: 15px;
  border: 1px solid var(--border-soft); border-radius: 11px; background: var(--bg-raised);
}
.cell-meta { font-family: var(--sans); font-size: 10.5px; color: var(--muted-2); }

/* Status is never colour alone: each chip carries a glyph beside its label.
   Fix both flex axes so long live-stage descriptions cannot squash the mark
   into a narrow rectangle. */
.chip {
  display: inline-grid; place-items: center;
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 6px;
  font-size: 12px; font-weight: 700; line-height: 1;
}
.chip svg { display: block; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chip.pass { background: rgba(79, 201, 138, 0.16); color: var(--pass); }
.chip.fail { background: rgba(255, 92, 122, 0.15); color: var(--crit); }
.chip.error { background: rgba(240, 196, 25, 0.15); color: var(--warn); }
.chip.waiting { background: rgba(114, 174, 240, 0.15); color: #72aef0; }
.chip.none { background: transparent; color: var(--muted-2); }
.chip.running { background: rgba(101,217,209,.12); color: var(--cyan); }

.legend {
  display: flex; flex-wrap: wrap; gap: 18px;
  list-style: none; margin: 18px 0 0; padding: 0;
  font-size: 12px; color: var(--muted);
}
.legend li { display: flex; align-items: center; gap: 7px; }

/* ---------------------------------------------------------------- evidence */

.diagnostics-section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
}

.run-diagnostics {
  padding: 16px; margin-bottom: 12px;
  border: 1px solid rgba(240, 196, 25, 0.28); border-radius: 10px;
  background: linear-gradient(135deg, rgba(240, 196, 25, 0.07), rgba(240, 196, 25, 0.025));
}
.run-diagnostics.error { border-color: rgba(255, 92, 122, 0.3); background: rgba(255, 92, 122, 0.06); }
.run-diagnostics-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.run-diagnostics-label {
  display: block; margin-bottom: 5px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2);
}
.run-diagnostics h3 { margin: 0; font-size: 15px; }
.run-diagnostics-meta { margin: 5px 0 0; color: var(--muted-2); font-size: 12px; }
.run-diagnostics-message {
  margin: 14px 0 0; padding: 11px 13px; overflow-wrap: anywhere;
  border: 1px solid var(--border-soft); border-radius: 8px; background: rgba(0, 0, 0, 0.18);
  color: var(--text); font-family: var(--mono); font-size: 12px; line-height: 1.55; white-space: pre-wrap;
}
.run-diagnostics-actions { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
.run-diagnostics-note { margin: 11px 0 0; color: var(--muted-2); font-size: 12px; }

.artifact-state {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 15px; margin-bottom: 10px;
  border: 1px solid rgba(240, 196, 25, 0.28); border-radius: 9px;
  background: rgba(240, 196, 25, 0.06);
  font-size: 13px; color: var(--text);
}

.artifact-list {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden;
}
.artifact {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 15px; background: var(--panel);
  border-bottom: 1px solid var(--border-soft);
}
.artifact:last-child { border-bottom: none; }
.artifact.expired .artifact-name { color: var(--muted-2); }

.artifact-name {
  font-family: var(--mono); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.artifact-name { color: var(--cyan); text-decoration: none; }
a.artifact-name:hover { text-decoration: underline; }

.artifact-note { font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); flex-shrink: 0; }
.artifact-empty { padding: 15px; background: var(--panel); color: var(--muted); font-size: 13px; }
.artifact-empty code { font-family: var(--mono); font-size: 12px; color: var(--cyan); }

.run-error {
  margin-top: 26px; padding: 13px 16px;
  border: 1px solid rgba(255, 92, 122, 0.3); border-radius: 9px;
  background: rgba(255, 92, 122, 0.07); color: var(--text); font-size: 13px;
}

@media (max-width: 680px) {
  .diagnostics-section-head, .run-diagnostics-head { align-items: stretch; flex-direction: column; }
}

/* ----------------------------------------------------------------- buttons */

.button {
  font: inherit; font-weight: 600; font-size: 13px;
  padding: 8px 15px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  transition: background 140ms ease, border-color 140ms ease;
}
.button:hover:not(:disabled) { background: var(--panel-3); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.button:disabled { opacity: 0.55; cursor: default; }

.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.button.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.button.ghost { background: transparent; }
.button.small { padding: 6px 12px; font-size: 12.5px; }
.button.full { width: 100%; padding: 11px; }

/* ----------------------------------------------------------------- sign in */

.signed-out {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 24px;
  overflow-y: auto;
  background:
    radial-gradient(720px 520px at 16% 12%, rgba(200,247,101,.07), transparent 60%),
    radial-gradient(640px 520px at 86% 84%, rgba(101,217,209,.05), transparent 62%),
    radial-gradient(1100px 620px at 50% -10%, #10181b 0%, var(--bg) 62%);
}

/* Signup earns the split layout other views don't: there is a second thing
   to say ("here is what you get") that a centered card has no room for. */
.signed-out:has(#signupForm:not([hidden])) {
  grid-template-columns: 1fr 1fr;
  place-items: stretch;
  padding: 0;
}
.signed-out:has(#signupForm:not([hidden])) .auth-shell {
  padding: 48px 24px;
}
@media (max-width: 900px) {
  .signed-out:has(#signupForm:not([hidden])) {
    grid-template-columns: 1fr;
    padding: 24px;
  }
  .signed-out:has(#signupForm:not([hidden])) .auth-shell { padding: 0; }
}

.auth-shell {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 412px;
  margin: auto;
}

.auth-card {
  position: relative;
  width: 100%;
  --auth-card-top: 30px;
  padding: var(--auth-card-top) 40px 44px; border-radius: 20px;
  border: 1px solid var(--border-soft); background: rgba(16,21,18,.94);
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow);
}

/* The one flourish this screen gets: a quiet glow seated behind the wordmark,
   the same lime the rest of the console uses to mark the thing in charge. */
.auth-brand-mark {
  position: absolute; top: 0; left: 50%; width: 220px; height: 130px;
  transform: translate(-50%, -58%);
  background: radial-gradient(closest-side, rgba(200,247,101,.16), transparent 72%);
  pointer-events: none;
}
.auth-brand { position: relative; display: flex; align-items: center; gap: 11px; margin-bottom: 28px; }
.auth-brand.auth-brand-centered { justify-content: center; }
.auth-brand .brand-logo { display: block; width: auto; height: 46px; }
.auth-brand .brand-context { color: var(--muted-2); font: 500 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.auth-card h1 { font-size: 24px; letter-spacing: -.02em; margin-bottom: 6px; }
.auth-caption { color: var(--muted); margin: 0 0 24px; font-size: 13px; line-height: 1.6; }
.auth-caption:empty { display: none; }
/* Views with no caption — sign in, sign up — had the title sitting 6px above
   the first field and 30 below the card's edge, so it read as bottom-aligned
   in that space rather than sitting in the middle of it. Matching the card's
   top padding centres it in the gap it actually occupies. */
.auth-card:has(.auth-caption:empty) h1 { margin-bottom: var(--auth-card-top); }

.auth-form { display: grid; gap: 20px; }
.auth-card .button.primary.full { padding: 13px; }
.auth-form label { display: grid; gap: 6px; }
.auth-form label span {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-2);
}

/* Email, name and password fields get a leading glyph in the same register
   the repository search box already uses — an icon in a bordered row, not an
   icon floated over a plain input. */
.auth-field {
  display: flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 0 13px; border-radius: 10px;
  border: 1px solid var(--border); background: rgba(7,10,9,.75);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-field:focus-within { border-color: transparent; box-shadow: 0 0 0 2px var(--accent); }
.auth-field-icon { width: 16px; flex: none; fill: none; stroke: var(--muted-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-field:focus-within .auth-field-icon { stroke: var(--accent); }
.auth-field input {
  flex: 1; min-width: 0; height: 100%;
  font: inherit; font-size: 14px;
  padding: 0; border: 0; outline: 0; background: transparent; color: var(--text);
}
.auth-field-toggle {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted-2); cursor: pointer;
}
.auth-field-toggle:hover { color: var(--text); }
.auth-field-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.auth-field-toggle svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.auth-field-toggle .icon-hide { display: none; }
.auth-field-toggle[aria-pressed="true"] .icon-show { display: none; }
.auth-field-toggle[aria-pressed="true"] .icon-hide { display: block; }

/* A six-digit code or an eight-digit account reference gains nothing from a
   lock or envelope next to it, so those stay the plain field this console
   uses everywhere else. Excludes the checkbox below: it is also a direct
   `label > input`, and this box model isn't meant for it. */
.auth-form > label > input:not([type="checkbox"]) {
  font: inherit; font-size: 14px;
  min-height: 45px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-raised); color: var(--text);
}
.auth-form > label > input:not([type="checkbox"]):focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.auth-code { letter-spacing: .3em; text-align: center; font-family: var(--mono); }

.auth-error {
  margin: 0; padding: 10px 12px; border-radius: 8px;
  background: rgba(255, 92, 122, 0.1); border: 1px solid rgba(255, 92, 122, 0.3);
  color: var(--text); font-size: 13px;
}
.auth-form label.auth-check {
  display: flex; align-items: center; gap: 9px; margin-top: -4px; cursor: pointer;
}
.auth-form .auth-check input { width: 15px; height: 15px; padding: 0; accent-color: var(--accent); cursor: pointer; }
.auth-form .auth-check span {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: 0;
  text-transform: none; color: var(--muted);
}
.auth-link {
  padding: 0; border: 0; color: var(--cyan); background: transparent;
  font: 600 12px var(--sans); cursor: pointer; text-align: left;
}
.auth-link:hover { color: var(--text); }
.auth-back { justify-self: center; text-align: center; }
.auth-back-top { justify-self: start; margin-bottom: 2px; }
.auth-forgot { justify-self: start; margin-top: -12px; }

/* Sits below the card, not inside it — a footnote to the modal rather than
   one more row within it. Only the row matching the active view shows. */
.auth-switch {
  display: none;
  margin: 20px 0 0; text-align: center;
  color: var(--muted); font-size: 12.5px;
}
.auth-switch .auth-link { display: inline; font-size: inherit; }
.auth-shell:has(#loginForm:not([hidden])) .auth-switch[data-switch="login"] { display: block; }
.auth-shell:has(#signupForm:not([hidden])) .auth-switch[data-switch="signup"] { display: block; }
.auth-shell:has(#forgotForm:not([hidden])) .auth-switch[data-switch="forgot"] { display: block; }
.auth-hint { margin-top: -6px; color: var(--muted-2); font-size: 11.5px; line-height: 1.45; }

/* Same footnote treatment as .auth-switch, shown only for signup, and
   deliberately not merged with it — one is a legal notice, the other a
   navigation link, and they read as two separate lines because of it. */
.auth-terms {
  display: none;
  margin: 20px 0 0; text-align: center;
  color: var(--muted-2); font-size: 11.5px; line-height: 1.5;
}
.auth-terms a { color: var(--cyan); text-decoration: none; }
.auth-terms a:hover { text-decoration: underline; }
.auth-shell:has(#signupForm:not([hidden])) .auth-terms[data-switch="signup"] { display: block; }

/* Hidden everywhere but signup — see the .signed-out:has() rule above that
   opens the second grid column for it. */
.auth-graphic {
  display: none;
  position: relative;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 40px; padding: 56px; overflow: hidden;
  border-left: 1px solid var(--border-soft);
  background:
    radial-gradient(560px 420px at 72% 22%, rgba(200,247,101,.14), transparent 60%),
    radial-gradient(520px 460px at 26% 88%, rgba(101,217,209,.08), transparent 62%),
    linear-gradient(165deg, #0d1310 0%, #070a09 70%);
}
.signed-out:has(#signupForm:not([hidden])) .auth-graphic { display: flex; }
@media (max-width: 900px) {
  .signed-out:has(#signupForm:not([hidden])) .auth-graphic { display: none; }
}

/* Deliberately the real leaderboard, scaled up rather than an invented
   visual — same rank medals, model identity tile, harness and pass/fail
   outcome bars as the results page, so this is a preview, not a mockup.
   The story: this opens on a top 4, then a new run lands and Claude takes
   first — everyone else is bumped down a place and fourth drops off the
   board, the way a fresh result actually would. Rank numbers stay put
   (01–04 are slots, not medals painted on a model) and only the identity
   underneath each one changes, staggered slightly per row so it reads as
   a cascade rather than one flat cut. It then holds, unwinds back to the
   opening board, and repeats — a leaderboard that keeps taking new runs,
   not a single one-off announcement. */
.auth-graphic-card {
  width: min(640px, 100%); display: grid; gap: 16px;
  padding: 30px; border-radius: 20px;
  border: 1px solid var(--border-soft); background: rgba(16,21,18,.92);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  animation: auth-graphic-in .6s cubic-bezier(.16,1,.3,1) both,
             auth-graphic-glow 4.5s ease-in-out 1.2s infinite;
}
.auth-graphic-kicker {
  font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2);
}
.auth-graphic-rows {
  display: grid; gap: 1px; background: var(--border-soft);
  border: 1px solid var(--border-soft); border-radius: 14px; overflow: hidden;
}
.auth-graphic-row {
  --slot-delay: 0s;
  display: grid; grid-template-columns: 28px minmax(0, 1fr);
  align-items: center; gap: 14px; padding: 18px 20px; background: var(--panel);
}
.auth-graphic-rank {
  font: 700 16px var(--mono); color: var(--muted-2); font-variant-numeric: tabular-nums;
}
.auth-graphic-rank[data-medal="1"] { color: #d9b143; }
.auth-graphic-rank[data-medal="2"] { color: #b9c4cb; }
.auth-graphic-rank[data-medal="3"] { color: #b8783f; }
/* Two entries stacked in one slot: the outgoing model holds it in normal
   flow (which is what gives the slot its height), the incoming one sits
   over it and only becomes visible partway through the shared timeline.
   Alternating direction on an infinite loop is what turns the one-way
   handover into a back-and-forth — the same crossfade plays in reverse to
   unwind the board, then forward again, with no seam to author by hand. */
.auth-graphic-slot { position: relative; min-height: 36px; }
.auth-graphic-entry {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(90px, 130px) minmax(0, 140px);
  align-items: center; gap: 14px;
}
.auth-graphic-entry-out {
  animation: auth-graphic-entry-out-life 5s cubic-bezier(.16,1,.3,1) var(--slot-delay) infinite alternate both;
}
.auth-graphic-entry-in {
  position: absolute; inset: 0;
  animation: auth-graphic-entry-in-life 5s cubic-bezier(.16,1,.3,1) var(--slot-delay) infinite alternate both;
}
.auth-graphic-mark { width: 34px; height: 34px; border-radius: 9px; flex: none; object-fit: contain; }
.auth-graphic-name { display: grid; gap: 3px; min-width: 0; }
.auth-graphic-name strong { overflow: hidden; color: var(--text); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.auth-graphic-name small { overflow: hidden; color: var(--muted-2); font: 600 11.5px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
/* The harness is whose hands actually touched the code, kept beside the
   model rather than folded into its subtitle — the same identity split
   Run Configuration and the real standings both keep. */
.auth-graphic-harness { display: flex; align-items: center; gap: 7px; min-width: 0; }
/* Same light chip the real harness cell puts behind its mark — several of
   these logos are dark ink with no background of their own, invisible
   directly on a dark panel. */
.auth-graphic-harness img {
  width: 16px; height: 16px; padding: 2px; flex: none;
  border-radius: 5px; object-fit: contain; background: #eef2ef;
}
.auth-graphic-harness small { overflow: hidden; color: var(--muted); font: 600 11.5px var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.auth-graphic-outcome { display: grid; gap: 8px; min-width: 0; }
.auth-graphic-track { display: flex; width: 100%; height: 10px; border-radius: 5px; overflow: hidden; background: var(--panel-3); }
.auth-graphic-track span {
  --w: 0;
  display: block; height: 100%; min-width: 2px; width: 0;
  animation: auth-graphic-fill 1s cubic-bezier(.16,1,.3,1) both;
}
.auth-graphic-entry-out .auth-graphic-track span { animation-delay: calc(var(--slot-delay) + .55s); }
.auth-graphic-entry-in .auth-graphic-track span { animation-delay: calc(var(--slot-delay) + 4.4s); }
.auth-graphic-track span[data-tone="pass"] { background: var(--mark); }
.auth-graphic-track span[data-tone="fail"] { background: var(--crit); }
.auth-graphic-value { display: flex; gap: 6px; font: 600 12.5px var(--mono); font-variant-numeric: tabular-nums; }
.auth-graphic-value small[data-tone="pass"] { color: var(--pass); }
.auth-graphic-value small[data-tone="fail"] { color: var(--crit); }
.auth-graphic-sep { color: var(--muted-2); }

/* Both share the board's own measure, so the copy and the thing it describes
   are one column rather than three widths stacked. Balancing keeps the centred
   lines even instead of stranding a last word, whatever the copy becomes. */
.auth-graphic-title {
  position: relative; width: min(640px, 100%);
  margin: 0; text-align: center; text-wrap: balance;
  font-size: 36px; line-height: 1.22; letter-spacing: -.015em; color: var(--text);
  opacity: 0; animation: auth-graphic-in .6s cubic-bezier(.16,1,.3,1) .9s both;
}
.auth-graphic-caption {
  position: relative; width: min(640px, 100%);
  margin: -26px 0 0; text-align: center; text-wrap: balance;
  color: var(--muted); font-size: 15.5px; line-height: 1.6;
  opacity: 0; animation: auth-graphic-in .6s cubic-bezier(.16,1,.3,1) 1.03s both;
}

@keyframes auth-graphic-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes auth-graphic-fill { to { width: var(--w); } }
@keyframes auth-graphic-glow {
  0%, 100% { box-shadow: var(--shadow); }
  50% { box-shadow: var(--shadow), 0 0 44px rgba(200,247,101,.14); }
}
/* One 5s timeline per slot: arrive (0–10%), hold so the opening board is
   readable (10–70%), then the handover (70–85%) before settling into the
   new state for good. Out and in share the same three checkpoints so they
   cross exactly, and the slot's own --slot-delay stays in both, which is
   what makes the handover cascade left-to-rank instead of firing at once. */
@keyframes auth-graphic-entry-out-life {
  0% { opacity: 0; transform: translateX(-10px); }
  10%, 70% { opacity: 1; transform: translateX(0); }
  85%, 100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes auth-graphic-entry-in-life {
  0%, 70% { opacity: 0; transform: translateY(8px); }
  85%, 100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-graphic-card, .auth-graphic-title, .auth-graphic-caption {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .auth-graphic-entry-out { animation: none !important; opacity: 0 !important; }
  .auth-graphic-entry-in { animation: none !important; opacity: 1 !important; transform: none !important; }
  .auth-graphic-track span { animation: none !important; width: var(--w) !important; }
}

.account-reference {
  display: grid; gap: 6px; padding: 16px;
  border: 1px solid rgba(200,247,101,.3); border-radius: 10px;
  background: rgba(200,247,101,.06); text-align: center;
}
.account-reference span { color: var(--muted); font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.account-reference strong { color: var(--accent); font: 600 30px var(--mono); letter-spacing: .12em; }
.account-reference small { color: var(--muted-2); font-size: 11px; }
.dev-verification-note {
  padding: 10px 12px; border: 1px solid rgba(101,217,209,.28); border-radius: 8px;
  color: var(--muted); background: rgba(101,217,209,.06); font-size: 12px; text-align: center;
}
.dev-verification-note strong { margin-left: 5px; color: var(--cyan); font: 600 15px var(--mono); letter-spacing: .1em; }

/* Switching between sign in, signup and the confirm/reset/invite steps gets
   the same fade-rise the toasts use below, so the card speaks the same
   motion language as the rest of the console instead of just snapping. */
.auth-form:not([hidden]) { animation: rise 220ms ease-out both; }
.auth-form .button.primary.full { position: relative; }
.auth-form .button.primary.full:disabled::after {
  content: ""; width: 14px; height: 14px; flex: none;
  border: 2px solid var(--accent-ink); border-right-color: transparent;
  border-radius: 50%; animation: spin .6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .auth-form:not([hidden]) { animation: none; }
  .auth-form .button.primary.full:disabled::after { animation: none; }
}

/* ------------------------------------------------------------------ toasts */

.toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: grid; gap: 8px; max-width: 340px;
}
.toast {
  padding: 11px 15px; border-radius: 9px; font-size: 13px;
  border: 1px solid var(--border); background: var(--panel-3);
  box-shadow: var(--shadow);
  animation: rise 160ms ease-out;
}
.toast.warn { border-color: rgba(240, 196, 25, 0.36); }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* These three were referenced throughout the stylesheet but their definitions
   went with the console rebuild. An animation naming an undefined keyframe is
   not an error — it simply does nothing — so the account panel appeared without
   settling, toasts without arriving, and the scan spinner never turned. */
@keyframes account-panel-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .rail {
    position: static; max-height: none;
    border-right: none; border-bottom: 1px solid var(--border-soft);
  }
  .run-list { grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); overflow-x: auto; }
  .detail { padding: 26px 20px 60px; }
  .standing { grid-template-columns: 1fr; gap: 10px; }
  .standing-meta { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.candidate-pick { display: flex; align-items: baseline; gap: 6px; cursor: pointer; }
.candidate-pick input { flex: none; }
.package-button { margin: 8px 8px 0; width: calc(100% - 16px); }

/* ---------------------------------------------------------------- factory */
/* The benchmark-building flow, restored from the pre-split console and rewired
   through the command channel. */

/* The stepper markup was restored from the pre-split console, but these rules
   were not: what stood here was the minimal rebuild's version, which styled a
   `.step-dot` element that appears nowhere in index.html and set the labels
   inline and uppercase. The result was "CONNECTGITHUB + MODEL" — two <strong>s
   with no box, no numbered circle, and nothing to show which step was current.
   These are the original's rules, which match the markup that is actually here. */
.content-wrap { width: 100%; margin: 0 auto; padding: 50px 44px 32px; }
.product-view { display: block; }
.stepper { display: flex; align-items: center; padding: 18px 20px; margin-bottom: 18px; border: 1px solid var(--border-soft); border-radius: 12px; background: rgba(13,18,20,.68); }
.step { display: flex; align-items: center; gap: 10px; min-width: max-content; opacity: .42; }
.step > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #3a4542; border-radius: 50%; font: 500 10px var(--mono); }
.step strong, .step small { display: block; }
.step strong { font-size: 11px; }
.step small { margin-top: 2px; color: var(--muted-2); font-size: 8px; }
.step.active, .step.complete, .step.done { opacity: 1; }
.step.active > span { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }
.step.complete > span, .step.done > span { color: var(--accent); border-color: rgba(200,247,101,.45); background: rgba(200,247,101,.07); }
.step-line { flex: 1; height: 1px; min-width: 25px; margin: 0 17px; background: #26302d; }

.panel {
  border: 1px solid var(--border-soft); border-radius: 12px;
  background: var(--panel); padding: 18px 20px;
}
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.panel-head h2 { font-size: 15px; }
.panel-note { color: var(--muted-2); font-size: 12.5px; margin: 6px 0 12px; }
.panel-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; flex-wrap: wrap;
}

.search {
  width: 100%; margin-bottom: 10px; padding: 8px 11px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-raised); color: var(--text); font: inherit; font-size: 13px;
}
.search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.repo-row {
  position: relative; min-width: 0; min-height: 128px; width: 100%; display: flex; flex-direction: column;
  gap: 0; padding: 16px; overflow: hidden; border: 1px solid #25302d; border-radius: 13px;
  background: linear-gradient(155deg, #12191b, #0d1214); color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.repo-row::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent); }
.repo-row:hover { transform: translateY(-2px); border-color: #43534d; background: linear-gradient(155deg, #172023, #101618); box-shadow: 0 14px 32px rgba(0,0,0,.2); }
.repo-row.selected { border-color: rgba(200,247,101,.68); background: radial-gradient(circle at 100% 0,rgba(200,247,101,.12),transparent 46%),linear-gradient(145deg,#172018,#101717); box-shadow: 0 0 0 1px rgba(200,247,101,.08),0 16px 38px rgba(0,0,0,.22); }
.repo-identity { min-width: 0; margin-bottom: 15px; }
.repo-owner { display: block; overflow: hidden; color: #718079; font: 500 9px/1.3 var(--mono); letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.repo-title { display: flex; align-items: center; gap: 7px; min-width: 0; margin-top: 4px; overflow-wrap: anywhere; color: #edf3ef; font-weight: 700; font-size: 15px; line-height: 1.3; }
.repo-title .lock { padding: 2px 5px; border: 1px solid rgba(240,164,93,.3); border-radius: 4px; color: var(--orange); font: 600 7px var(--mono); letter-spacing: .07em; }
.repo-title .badge-new { padding: 2px 5px; border-radius: 4px; background: rgba(200,247,101,.16); color: var(--accent); font: 700 7px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
/* Marks a model that costs nothing to run, not a tier — there are none. Cyan
   rather than the New badge's lime: --cyan carries no other meaning here and
   reads cool against the workspace's lime, which is the contrast this needs. */
.repo-title .badge-free { padding: 2px 5px; border-radius: 4px; background: rgba(116,221,209,.16); color: var(--cyan); font: 700 7px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.repo-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: auto; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.055); border-bottom: 1px solid rgba(255,255,255,.055); }
.repo-stats > span { min-width: 0; padding: 0 8px; border-left: 1px solid rgba(255,255,255,.055); }
.repo-stats > span:first-child { padding-left: 0; border-left: 0; }
.repo-stats small, .repo-stats strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repo-stats small { margin-bottom: 4px; color: #64716c; font: 500 8px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.repo-stats strong { color: #bac5c0; font: 500 10px var(--mono); }
.repo-language { display: flex !important; align-items: center; gap: 5px; }
.repo-language i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--repo-language); }

.criteria { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.criteria label, .benchmark-name {
  display: grid; gap: 4px; font-size: 12px; color: var(--muted);
}
.criteria input, .benchmark-name input {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg-raised); color: var(--text); font: inherit; font-size: 13px;
}
.criteria-flags {
  display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 14px;
  font-size: 12.5px; color: var(--muted);
}
.criteria-flags label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

@media (max-width: 900px) {
  .criteria { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}


/* ---------------------------------------------- restored: build flow */
/* Lifted verbatim from a7fa11e~1, the console before the split rebuild.
   Same design tokens, so it drops in unchanged. */
.panel-icon, .modal-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; }
.panel-icon svg, .modal-mark svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 22px; border-bottom: 1px solid var(--border-soft); }
/* .panel already carries its own 18px 20px padding; without this, a
   panel-header first child gets padded twice at the top only (the divider
   sits at the header's own bottom edge, so the bottom side never doubles). */
.panel > .panel-header:first-child, .panel > .surface-heading:first-child { margin-top: -18px; }
.panel-header > div:first-child, .rules-heading > div:first-child { display: flex; align-items: center; gap: 12px; }
.section-number { position: relative; top: 3px; color: var(--accent); font: 500 9px var(--mono); line-height: 1; }
.panel-header h2 { margin: 0; font-size: 14px; letter-spacing: -.02em; }
.panel-header p { margin: 4px 0 0; color: var(--muted-2); font-size: 9px; }
.repo-search-wrap { height: 36px; display: flex; align-items: center; gap: 8px; padding-left: 10px; border: 1px solid #2b3734; border-radius: 8px; background: #0c1113; }
.repo-search-wrap svg { width: 14px; fill: none; stroke: var(--muted-2); stroke-width: 2; }
.repo-search-wrap input { width: 240px; border: 0; outline: 0; color: #dce4e1; background: transparent; font: 10px var(--mono); }
.repo-search-wrap button { align-self: stretch; min-width: 48px; padding: 0 11px; border: 0; border-left: 1px solid #2b3734; color: var(--accent); background: #12191b; font: 700 9px var(--mono); cursor: pointer; }
.repo-search-wrap button:disabled { color: #56615e; cursor: not-allowed; }
/* Which route(s) a model must be reachable through — a multi-select, since
   narrowing to "OpenAI or OpenRouter" is a normal thing to want, not just
   one route at a time. Options and counts come from the runner's own
   catalog, same idea as the repo search bar next to it. */
.model-route-filter { position: relative; }
.model-route-filter > button { height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid #2b3734; border-radius: 8px; background: #0c1113; color: var(--text); font: 700 9px var(--sans); cursor: pointer; }
.model-route-filter > button:hover { border-color: #43534d; }
.model-route-filter > button.active { border-color: rgba(201,255,99,.35); color: var(--accent); background: rgba(201,255,99,.03); }
.model-route-filter > button b { min-width: 16px; height: 16px; display: grid; place-items: center; border-radius: 999px; color: var(--accent-ink); background: var(--accent); font: 700 8px var(--mono); }
.model-route-filter > button i { color: var(--muted-2); font-style: normal; }
.model-route-filter-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 220px; padding: 6px; border: 1px solid #32403b; border-radius: 12px; background: linear-gradient(150deg,#151d20,#0e1315); box-shadow: var(--shadow); animation: account-panel-in .14s ease-out; }
.model-route-filter-row { width: 100%; display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 0 8px; border-radius: 7px; cursor: pointer; }
.model-route-filter-row:hover { background: #131a1c; }
.model-route-filter-row input { width: 13px; height: 13px; accent-color: var(--accent); }
.model-route-filter-row span { flex: 1; overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.model-route-filter-row b { color: var(--muted-2); font: 700 8px var(--mono); }
/* Only routes that are also a single provider's own name (openai, anthropic,
   google) get a mark — that's the only case where one logo is correct. */
.model-route-filter-row .model-route-filter-icon { width: 16px; height: 16px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 5px; background: #eef2ef; }
.model-route-filter-row .model-route-filter-icon.on-dark { background: #0b0b0b; }
.model-route-filter-row .model-route-filter-icon img { width: 100%; height: 100%; object-fit: contain; }
.model-route-filter-empty { padding: 12px 8px; color: var(--muted-2); font-size: 10px; text-align: center; }
/* A route the runner could not reach: shown so the provider does not silently
   vanish, but dimmed and unclickable since there is nothing to filter to. */
.model-route-filter-row.is-unreachable { cursor: not-allowed; opacity: 0.55; }
.model-route-filter-row.is-unreachable:hover { background: none; }
.model-route-filter-row.is-unreachable input { cursor: not-allowed; }
.model-route-filter-row.is-unreachable em { color: var(--muted-2); font: 700 8px var(--mono); font-style: normal; text-transform: uppercase; }

/* Same box, head-row and hairline-divided rows as Run Configuration's target
   summary table — a model list is the same kind of "many rows, a few facts
   each" table, so it gets the table Compare already has rather than a new
   one invented for this list alone. */
.model-table { margin: 10px 0 0; border: 1px solid rgba(255,255,255,.075); border-radius: 12px; background: rgba(6,10,8,.35); overflow: hidden; }
/* Model keeps the same 1fr share it had when it was one of five equal
   columns; the other five (Maker, Provider, Input, Output, Added) now split
   the remaining width evenly at 0.8fr each — 5 * 0.8fr against Model's 1fr
   reproduces that same fifth, so adding the Provider column didn't shrink
   the name column to make room for it. */
.model-table-head, .model-table-row { display: grid; grid-template-columns: 30px minmax(0,1fr) repeat(5, minmax(0,.8fr)); gap: 12px; align-items: center; padding: 9px 14px; }
/* Same split Run Configuration's own table uses: the head names a column
   from its centre, the row states the column's value from its left edge —
   centring every value under a left-anchored head just reads as misaligned,
   not as agreement. */
.model-table-head { position: sticky; top: 0; z-index: 1; color: var(--muted); font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; text-align: center; background: var(--bg-raised); border-bottom: 1px solid rgba(255,255,255,.075); }
.model-table-rows { display: grid; }
.model-table-row { width: 100%; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.model-table-row + .model-table-row { border-top: 1px solid rgba(255,255,255,.045); }
.model-table-row:hover { background: rgba(255,255,255,.022); }
/* The row itself is the only affordance now that there is no Select cell to
   click, so being selected has to read at a glance without one: the fill
   plus a left accent bar, not just a faint tint someone could miss. */
.model-table-row.selected { background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.model-table-mark { width: 26px; height: 26px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; color: #1b201d; background: #eef2ef; font: 800 8px var(--mono); }
.model-table-mark img { width: 100%; height: 100%; object-fit: contain; }
.model-table-mark svg { width: 17px; height: 17px; }
.model-table-identity { min-width: 0; display: flex; align-items: center; gap: 6px; }
.model-table-identity strong { overflow: hidden; font-size: 11.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.model-table-identity .badge-new { flex: none; padding: 2px 5px; border-radius: 4px; background: rgba(200,247,101,.16); color: var(--accent); font: 700 7px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.model-table-identity .badge-free { flex: none; padding: 2px 5px; border-radius: 4px; background: rgba(116,221,209,.16); color: var(--cyan); font: 700 7px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
/* Same 11.5px every column reads at — Model is set apart by weight alone
   (font-weight:700 on its <strong>), not by also being the one large column
   in a row of small ones. */
.model-table-maker, .model-table-provider { overflow: hidden; color: var(--muted-2); font: 11.5px var(--sans); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.model-table-price, .model-table-date { text-align: left; color: var(--muted-2); font: 11.5px var(--mono); white-space: nowrap; }
.model-table-price.is-free { font-weight: 700; }
/* A table row is dense — 40+ models at 622px (the card grid's old height)
   made Configure Models the tallest thing on the page by a wide margin.
   340px holds roughly nine rows before it scrolls, closer in scale to
   Choose Benchmark and Run Configuration on either side of it. */
.model-table.scrollable { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.model-table.scrollable:focus-visible { outline: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: -1px; }
@media (max-width: 900px) {
  .model-table-head, .model-table-row { grid-template-columns: 26px minmax(0,1fr) 74px 74px; }
  .model-table-head span:nth-child(3), .model-table-head span:nth-child(4), .model-table-head span:nth-child(7),
  .model-table-row .model-table-maker, .model-table-row .model-table-provider, .model-table-row .model-table-date { display: none; }
}

.repo-panel .panel-header { min-height: 72px; }
.repo-panel .repo-panel-heading,
.bench-panel .repo-panel-heading { display: flex; align-items: center; gap: 12px; }
.repo-panel .section-number,
.bench-panel .section-number { top: 0; display: grid; place-items: center; width: 26px; height: 26px; flex: none; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 7%, transparent); font-size: 10px; }
.repo-panel-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; }
.repo-visibility-switch { height: 36px; display: flex; padding: 3px; border: 1px solid #2b3734; border-radius: 8px; background: #0c1113; }
.repo-visibility-switch button { min-width: 66px; padding: 0 12px; border: 0; border-radius: 5px; color: var(--muted-2); background: transparent; font: 700 9px var(--mono); cursor: pointer; }
.repo-visibility-switch button:hover { color: var(--text); }
.repo-visibility-switch button.active { color: #10150f; background: var(--accent); }
.repo-visibility-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.repo-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px; }
.repo-list.scrollable { height: 424px; align-content: start; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.repo-list.scrollable:has(> .empty-state:only-child) { align-content: center; }
.repo-list.scrollable:focus-visible { outline: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: -1px; }
.repo-list.scrollable::-webkit-scrollbar { width: 8px; }
.repo-list.scrollable::-webkit-scrollbar-track { background: rgba(255,255,255,.018); }
.repo-list.scrollable::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--accent) 32%, #26302b); background-clip: padding-box; }
.repo-list > .empty-state { grid-column: 1 / -1; }
/* Choose Benchmark caps at two rows instead of the repo grid's three —
   fewer benchmarks than repos tend to be in flight at once. */
#executionBenchmarkGrid.scrollable { max-height: 410px; }
.repo-empty-state { position: relative; overflow: hidden; min-height: 280px !important; margin: 0; border: 0; border-radius: 12px; background: rgba(8,13,11,.28); }
.repo-empty-state::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse closest-side at 50% 45%,
    color-mix(in srgb, var(--accent) 9%, transparent),
    color-mix(in srgb, var(--accent) 3%, transparent) 45%,
    transparent 100%);
}
.repo-empty-state > * { position: relative; }
.repo-empty-state .repo-empty-github { width: 50px; height: 50px; border-style: solid; background: #0b1110; }
.repo-empty-github svg { width: 22px; fill: currentColor; }
/* Two classes, not one: a later ".empty-state strong" rule elsewhere in this
   file (same 0-0-1-1 specificity as a single-class selector here) was winning
   the tie on source order alone and silently keeping this at the small size. */
.empty-state.repo-empty-state strong { margin-top: 16px; font-size: 16px; letter-spacing: -.01em; color: var(--text); }
.empty-state.repo-empty-state span { max-width: 560px; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.6; white-space: nowrap; }
@media (max-width: 640px) { .empty-state.repo-empty-state span { max-width: 420px; white-space: normal; } }
.repo-empty-action { margin-top: 20px; }
/* Quieter than the card's own action on purpose: connecting GitHub is still
   the answer for someone who came here for their own repositories, and this
   is the way out for someone who did not. */
.repo-empty-public {
  margin-top: 14px; padding: 0; border: 0; background: none;
  color: var(--accent); font: 11px var(--sans); letter-spacing: 0; cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  transition: color .16s ease, border-color .16s ease;
}
.repo-empty-public:hover { border-bottom-color: var(--accent); }
.repo-empty-public:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.empty-state { min-height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--muted-2); }
.empty-state.small { min-height: 325px; }
.empty-state strong { margin-top: 11px; color: #9aa6a2; font-size: 11px; }
.empty-state span { margin-top: 4px; font-size: 9px; }
.empty-orbit { width: 42px; height: 42px; display: grid; place-items: center; border: 1px dashed #34413d; border-radius: 50%; color: var(--accent); font-size: 17px; }
/* A gate that names a specific page — Benchmarks, Compare, Results, Jobs —
   wears that page's own nav icon here instead of a generic glyph, drawn the
   same way the rail draws it (stroke, not fill) so it reads as the same mark. */
.empty-orbit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rules-panel { overflow: hidden; }
.rules-panel:not([hidden]) { animation: factory-step-in .24s ease-out; }
@keyframes factory-step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rules-panel .panel-header { min-height: 82px; }
.rules-panel .screening-panel-heading { display: flex; align-items: center; gap: 12px; }
.rules-panel .section-number { top: 0; display: grid; place-items: center; width: 26px; height: 26px; flex: none; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 7%, transparent); font-size: 10px; }
.screening-panel-heading p { margin: 3px 0 0; color: var(--muted-2); font-size: 10px; font-weight: 500; }
.screening-method-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border-soft)); border-radius: 999px; color: var(--muted); background: color-mix(in srgb, var(--accent) 3%, transparent); font: 500 8px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.screening-method-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px color-mix(in srgb, var(--accent) 55%, transparent); }
.screening-config { display: grid; gap: 18px; padding: 20px; }
.screening-section-copy { display: grid; gap: 3px; min-width: 0; }
.screening-section-copy > span { color: var(--accent); font: 600 8px var(--mono); letter-spacing: .11em; }
.screening-section-copy > strong { color: #e7edea; font-size: 12px; }
.screening-section-copy > small { color: var(--muted-2); font-size: 9px; line-height: 1.45; }
.screening-profile-section { display: grid; gap: 12px; }
.screening-preset-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.screening-preset { position: relative; min-height: 64px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 12px 14px; overflow: hidden; text-align: left; border: 1px solid #29342f; border-radius: 12px; color: inherit; background: linear-gradient(145deg,rgba(18,25,22,.9),rgba(11,16,14,.9)); cursor: pointer; transition: transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease; }
.screening-preset::after { content: ""; position: absolute; width: 100px; height: 100px; top: -72px; right: -58px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 8%, transparent); opacity: 0; transition: opacity .16s; }
.screening-preset:hover { transform: translateY(-1px); border-color: #46564f; }
.screening-preset.active { border-color: color-mix(in srgb, var(--accent) 55%, #29342f); background: radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent) 10%,transparent),transparent 50%),linear-gradient(145deg,color-mix(in srgb,var(--accent) 5%,#121916),#0c1210); box-shadow: 0 0 0 1px color-mix(in srgb,var(--accent) 6%,transparent),0 14px 34px rgba(0,0,0,.14); }
.screening-preset.active::after { opacity: 1; }
.screening-preset > span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-2); font: 600 7px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.screening-preset > span i { width: 6px; height: 6px; border: 1px solid #52605a; border-radius: 50%; }
.screening-preset.active > span { color: var(--accent); }
.screening-preset.active > span i { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 7px color-mix(in srgb,var(--accent) 55%,transparent); }
.screening-preset > strong { margin-top: 6px; color: #dfe7e3; font-size: 14px; }
.screening-advanced-toggle { width: 100%; display: grid; grid-template-columns: 34px minmax(0,1fr) 18px; gap: 11px; align-items: center; padding: 11px 13px; text-align: left; border: 1px solid #29352f; border-radius: 11px; color: inherit; background: rgba(9,14,12,.42); cursor: pointer; transition: border-color .16s,background .16s; }
.screening-advanced-toggle:hover,.screening-advanced-toggle[aria-expanded="true"] { border-color: color-mix(in srgb,var(--accent) 36%,#29352f); background: color-mix(in srgb,var(--accent) 3%,rgba(9,14,12,.42)); }
.screening-tune-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--accent) 20%,#29352f); border-radius: 9px; color: var(--accent); background: color-mix(in srgb,var(--accent) 5%,transparent); }
.screening-tune-icon svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.screening-advanced-toggle > span:nth-child(2) { display: grid; gap: 2px; }
.screening-advanced-toggle strong { color: #dce5e0; font-size: 11px; }
.screening-advanced-toggle small { color: var(--muted-2); font: 8px var(--mono); }
.screening-toggle-chevron { width: 7px; height: 7px; justify-self: center; border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .18s; }
.screening-advanced-toggle[aria-expanded="true"] .screening-toggle-chevron { transform: rotate(225deg) translate(-1px,-1px); }
/* Expanded, the toggle is the header of one box: its bottom flattens and the
   fields panel continues the same border and rounds off the bottom corners. */
.screening-advanced-toggle[aria-expanded="true"] { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.candidate-advanced-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 16px 18px 11px; border-top: 1px solid var(--border-soft); background: rgba(8,13,11,.42); }
.candidate-advanced-heading > div { display: grid; gap: 3px; }
.candidate-advanced-heading span { color: var(--accent); font: 600 7px var(--mono); letter-spacing: .1em; }
.candidate-advanced-heading strong { color: #dce4e0; font-size: 11px; }
.candidate-advanced-heading small { color: var(--muted-2); font: 8px var(--mono); }
.candidate-advanced-heading.parameter-heading { border-top: 0; padding-top: 18px; }
.rules-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--border-soft); }
.toggle-row { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 12px; background: #111719; cursor: pointer; }
.toggle-row > span { min-width: 0; }
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row strong { font-size: 10px; }
.toggle-row small { margin-top: 4px; color: var(--muted-2); font-size: 8px; }
.toggle-row input { position: absolute; opacity: 0; }
.toggle-row i { width: 31px; height: 17px; position: relative; flex: 0 0 auto; border: 1px solid #3a4642; border-radius: 999px; background: #1b2426; transition: .18s; }
.toggle-row i::after { content: ""; width: 11px; height: 11px; position: absolute; left: 2px; top: 2px; border-radius: 50%; background: #6b7773; transition: .18s; }
.toggle-row input:checked + i { border-color: rgba(200,247,101,.6); background: rgba(200,247,101,.16); }
.toggle-row input:checked + i::after { left: 16px; background: var(--accent); }
.parameter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 18px; }
.candidate-advanced { border: 1px solid color-mix(in srgb,var(--accent) 36%,#29352f); border-top: 1px solid var(--border-soft); border-radius: 0 0 11px 11px; overflow: hidden; }
.candidate-advanced-parameters { border-top: 0; background: rgba(9,14,16,.3); }
.parameter-grid label > span, .parameter-label { display: block; margin: 0 0 7px 2px; color: var(--muted-2); font-size: 11px; }
.parameter-grid input, .modal-field input, .modal-field select { width: 100%; height: 36px; padding: 0 10px; outline: none; border: 1px solid #2b3734; border-radius: 7px; color: #d8e0dd; background: #0b1012; font: 10px var(--mono); }
.parameter-grid label.wide { grid-column: span 2; }
.parameter-daterange { display: flex; gap: 6px; }
.parameter-daterange input { min-width: 0; padding: 0 6px; }
.parameter-grid input:focus, .modal-field input:focus, .modal-field select:focus { border-color: #607b5b; box-shadow: 0 0 0 3px rgba(200,247,101,.055); }
.input-suffix { display: flex; align-items: center; border: 1px solid #2b3734; border-radius: 7px; overflow: hidden; background: #0b1012; }
.input-suffix input { border: 0; border-radius: 0; }
.input-suffix b { padding-right: 9px; color: var(--muted-2); font: 7px var(--mono); }
.scan-footer { min-height: 88px; display: flex; flex-direction: column; align-items: stretch; gap: 13px; padding: 16px 20px; border-top: 0; background: transparent; }
.scan-feedback-row { min-width: 0; width: 100%; }
@media (max-width: 760px) {
  .screening-method-badge { display: none; }
  .screening-preset-grid { grid-template-columns: 1fr; }
  .screening-preset { min-height: 64px; }
  .candidate-advanced-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
}
.scan-actions { width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.scan-preview {
  min-width: 0; border: 1px solid color-mix(in srgb,var(--accent) 12%,var(--border-soft)); border-radius: 11px;
  background: rgba(6,11,10,.7); box-shadow: 0 16px 38px rgba(0,0,0,.16); overflow: hidden;
}
.scan-preview-summary { padding: 15px 16px; }
.scan-preview-summary h3 { margin: 0; color: #eef2ef; font: 700 15px var(--sans); letter-spacing: -.02em; line-height: 1.3; }
.scan-preview-failure-body { border-top: 1px solid var(--border-soft); }
.scan-preview-failure-list { display: flex; flex-direction: column; gap: 4px; padding: 8px; background: #101615; }
.scan-preview-failure-list article {
  --failure-share: 0%;
  position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto;
  align-items: center; gap: 13px; padding: 10px 14px; overflow: hidden; border-radius: 8px;
  background: #0c1110; isolation: isolate; transition: background .15s ease;
}
.scan-preview-failure-list article:hover { background: #111e1a; }
.scan-preview-failure-list article::before {
  content: ""; position: absolute; inset: 0; z-index: -1; width: var(--failure-share);
  background: linear-gradient(90deg,color-mix(in srgb,var(--crit) 15%,transparent),color-mix(in srgb,var(--crit) 4%,transparent));
  transition: width .5s cubic-bezier(.16,1,.3,1);
}
.scan-preview-failure-list article span { overflow: hidden; color: #e2e8e5; font: 700 13px var(--sans); letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.scan-preview-failure-list article strong { color: color-mix(in srgb,var(--crit) 80%,white); font: 700 15px var(--mono); text-align: right; }
.scan-preview-failure-body > p { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 15px; color: var(--muted-2); font: 7px var(--mono); }
.scan-preview-failure-body > p span { width: 15px; height: 15px; display: grid; place-items: center; flex: none; border: 1px solid #34413d; border-radius: 50%; color: #899792; font: 700 8px var(--mono); }
.scan-button { min-width: 206px; color: var(--accent-ink); background: var(--accent); }
.scan-preview-button { min-width: 190px; }
.scan-actions .scan-action-button { min-height: 43px; gap: 10px; border-radius: 11px; letter-spacing: -.01em; transition: transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease,color .14s ease; }
.scan-action-icon { width: 19px; height: 19px; position: relative; display: grid; place-items: center; flex: none; border-radius: 6px; background: transparent; }
.scan-action-icon svg { width: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scan-action-spinner,.scan-action-check { display: none; }
.scan-action-spinner { width: 11px; height: 11px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; background: transparent; animation: spin .75s linear infinite; }
.scan-actions .scan-action-button.loading:disabled { opacity: 1; cursor: default; }
.scan-action-button.loading .scan-action-default { display: none; }
.scan-action-button.loading .scan-action-icon { background: transparent; }
.scan-action-button.loading .scan-action-spinner { display: block; }
.scan-action-button.action-complete .scan-action-default { display: none; }
.scan-action-button.action-complete .scan-action-check { display: block; }
.scan-actions .scan-action-button:disabled:not(.loading):not(.action-complete) { opacity: 1; border-color: #28332f; color: #68756f; background: #121916; box-shadow: none; cursor: default; }
.scan-actions .scan-action-button.action-complete:disabled { opacity: 1; border-color: #34423c; color: #8f9c96; background: #18201d; box-shadow: inset 0 1px rgba(255,255,255,.025); cursor: default; }
.scan-actions .scan-action-button.action-complete .scan-action-icon { color: #a9b6b0; background: transparent; }
.scan-actions .scan-preview-button:not(.action-complete) .scan-action-icon { background: transparent; }
.scan-actions .button.secondary:hover:not(:disabled) { border-color: color-mix(in srgb,var(--accent) 42%,#35433b); color: color-mix(in srgb,var(--accent) 78%,white); background: color-mix(in srgb,var(--accent) 8%,#17201b); box-shadow: 0 8px 22px rgba(0,0,0,.16); }
.scan-actions .scan-button:hover:not(:disabled) { color: var(--accent-ink); background: var(--accent-strong); box-shadow: 0 10px 28px color-mix(in srgb,var(--accent) 18%,transparent); }
.scan-actions .button:active:not(:disabled) { transform: translateY(0) scale(.985); }
.scan-actions .button.secondary:active:not(:disabled) { border-color: color-mix(in srgb,var(--accent) 62%,#35433b); background: color-mix(in srgb,var(--accent) 14%,#111814); }
.scan-actions .scan-button:active:not(:disabled) { background: color-mix(in srgb,var(--accent-strong) 84%,black); }
.scan-actions .button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.scan-progress { display: grid; grid-template-columns: minmax(190px,auto) minmax(160px,1fr) 38px; gap: 14px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--border-soft); background: rgba(101,217,209,.035); }
.scan-progress[hidden] { display: none; }
.scan-progress-copy strong, .scan-progress-copy span { display: block; }
.scan-progress-copy strong { font-size: 9px; }
.scan-progress-copy span { margin-top: 3px; color: var(--muted-2); font: 8px var(--mono); }
.scan-progress-meter { height: 6px; overflow: hidden; border-radius: 99px; background: #25302e; }
.scan-progress-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--cyan),var(--accent)); transition: width .35s ease; }
.scan-progress.indeterminate .scan-progress-meter i { width: 42% !important; animation: scan-live 1.15s ease-in-out infinite; }
.scan-progress > b { color: var(--cyan); font: 500 9px var(--mono); text-align: right; }
.scan-progress.complete .scan-progress-copy strong, .scan-progress.complete > b { color: var(--accent); }
.scan-progress.failed .scan-progress-copy strong, .scan-progress.failed > b { color: var(--red); }
@keyframes scan-live { 0% { transform: translateX(-115%); } 100% { transform: translateX(340%); } }
.run-fields { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(220px,.65fr) auto; gap: 10px; padding: 18px 20px; }
.run-fields label > span, .snapshot-select > span { display: block; margin: 0 0 7px 2px; color: var(--muted-2); font-size: 8px; }
.run-fields label > strong, .run-benchmark-field label > strong { display: block; margin: 0 0 7px 2px; color: var(--text); font-size: 8px; }
.run-fields input, .run-fields select, .snapshot-select select, .run-benchmark-field select { width: 100%; height: 38px; padding: 0 10px; outline: none; border: 1px solid #2b3734; border-radius: 7px; color: #d8e0dd; background: #0b1012; font: 9px var(--mono); }
.run-fields input:focus, .run-fields select:focus, .snapshot-select select:focus { border-color: #607b5b; box-shadow: 0 0 0 3px rgba(200,247,101,.055); }
.run-fields-toggle-wrap { display: flex; flex-direction: column; }
.run-fields-toggle-spacer { display: block; margin: 0 0 7px 2px; font-size: 8px; visibility: hidden; }
.run-fields-toggle-wrap .icon-button { width: 38px; height: 38px; }
.run-fields-toggle-wrap .icon-button.active { border-color: rgba(200,247,101,.38); background: rgba(200,247,101,.045); }
.rules-environment-fields .rules-repo-field { width: 100%; }
.advanced-run-fields { grid-template-columns: repeat(3,minmax(0,1fr)); margin: -7px 20px 17px; padding: 11px; border: 1px solid var(--border-soft); border-radius: 8px; background: rgba(9,14,16,.48); }
.modal-field select, .benchmark-builder select, .candidate-workbench-editor select, .run-fields select, .snapshot-select select, .target-field select { appearance: none; -webkit-appearance: none; padding-right: 24px; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 9px center; background-size: 9px 9px; }
.icon-button { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #35423e; border-radius: 7px; color: var(--accent); background: #12191b; cursor: pointer; font-size: 13px; }
.icon-button:hover { border-color: var(--accent); }


/* ------------------------------------------- restored: console shell */
/* Sidebar, view switching and panels, lifted from a7fa11e~1. */
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 224px minmax(0, 1fr); transition: grid-template-columns .2s ease; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--accent-ink); background: var(--accent); box-shadow: 0 0 34px rgba(200,247,101,.13); }
.brand-mark svg { width: 23px; fill: currentColor; }
.brand-name { font-weight: 800; letter-spacing: -0.035em; font-size: 18px; }
.brand-caption { margin-top: 2px; color: var(--muted-2); font: 500 9px/1 var(--mono); letter-spacing: .18em; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 12px; }
/* Activity rows are children of the runner card, not siblings of it: the work
   belongs to that compute, and reading them any other way invites the question
   "whose runner is this running on". */
.runner-activity { display: grid; gap: 4px; padding: 4px; border-top: 1px solid var(--border-soft); background: rgba(0,0,0,.2); }
.runner-activity-item { position: relative; border-radius: 8px; transition: background .16s ease; }
.runner-activity-item:hover { background: rgba(255,255,255,.035); }
.runner-activity-open {
  width: 100%; display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 9px; align-items: center;
  padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text);
  text-align: left; font: inherit; cursor: pointer;
}
.runner-activity-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.runner-activity-icon { position: relative; width: 22px; height: 22px; display: grid; place-items: center; color: var(--cyan); }
.runner-activity-icon svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Motion lives on the row, not on the runner above it: the rail should say
   which job is turning, not just that something somewhere is. */
.runner-activity-item[data-status="running"] .runner-activity-icon::before {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 1.5px solid transparent; border-top-color: currentColor; border-right-color: rgba(101,217,209,.25);
  animation: packaging-activity-spin 1.1s linear infinite;
}
/* One line only. What the job is doing right now is on the badge and the
   hover title; the rail just names it. */
.runner-activity-copy { min-width: 0; display: grid; }
.runner-activity-copy strong { font-size: 10px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runner-activity-badge {
  min-width: 30px; height: 18px; padding: 4px 6px; border-radius: 999px; color: var(--cyan);
  background: rgba(101,217,209,.08); font: 700 7.5px var(--mono); text-align: center;
  display: inline-flex; align-items: center; justify-content: center; transition: opacity .14s ease;
}
.runner-activity-badge svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.runner-activity-item[data-status="complete"] .runner-activity-icon,
.runner-activity-item[data-status="complete"] .runner-activity-badge { color: var(--accent); }
.runner-activity-item[data-status="complete"] .runner-activity-badge { background: rgba(200,247,101,.09); }
.runner-activity-item[data-status="failed"] .runner-activity-icon,
.runner-activity-item[data-status="failed"] .runner-activity-badge,
.runner-activity-item[data-status="cancelled"] .runner-activity-icon,
.runner-activity-item[data-status="cancelled"] .runner-activity-badge { color: var(--crit); }
.runner-activity-item[data-status="failed"] .runner-activity-badge,
.runner-activity-item[data-status="cancelled"] .runner-activity-badge { background: rgba(255,92,122,.09); }
/* Dismiss takes over the badge's slot on hover rather than crowding into the
   corner on top of it: a finished job is worth seeing, but only the customer
   decides when it stops being news, and by then the title has already said
   what the badge was repeating. */
.runner-activity-dismiss {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 18px; height: 18px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.06); color: var(--muted-2);
  font: 700 11px/1 var(--mono); cursor: pointer;
  /* Invisible is not absent: at opacity 0 this still sits on top of the right
     end of the row and still answers clicks, so a click aimed at the entry
     landed on Dismiss instead — the row vanished rather than opening, which
     reads as a link that goes nowhere. It only takes clicks once it is
     actually on screen. */
  opacity: 0; pointer-events: none;
  transition: opacity .14s ease, color .14s ease, background .14s ease;
}
.runner-activity-item:has(.runner-activity-dismiss):hover .runner-activity-badge { opacity: 0; }
.runner-activity-item:hover .runner-activity-dismiss,
.runner-activity-dismiss:focus-visible { opacity: 1; pointer-events: auto; }
.runner-activity-dismiss:hover { color: #fff; background: rgba(255,255,255,.12); }
/* Same slot and reveal-on-hover as dismiss, but red — this one stops a job
   still running on the runner rather than clearing a finished one. */
.runner-activity-cancel { font-size: 8px; background: rgba(255,92,122,.12); color: #ff879e; }
.runner-activity-cancel:hover { color: #fff; background: rgba(255,92,122,.42); }
.button.danger { border-color: rgba(255,92,122,.3); color: #ff879e; background: rgba(255,92,122,.055); }
.button.danger:hover { border-color: rgba(255,92,122,.52); background: rgba(255,92,122,.1); }
.button.danger:disabled { opacity: .6; cursor: default; }
.public-packaging-actions .button.danger { margin-right: auto; }
.verdict .button.danger { margin-top: 16px; }
.support-modal { width: min(560px, 100%); }
.support-form { display: grid; gap: 15px; margin-top: 22px; }
.support-form .modal-field { display: grid; gap: 7px; margin: 0; }
.support-form .modal-field textarea { min-height: 130px; }
/* Only the button lives here now, so it sits at the end rather than opposite
   a destination note that no longer exists. */
.support-form-footer { display: flex; align-items: center; justify-content: flex-end; padding-top: 3px; }
.support-form-footer .button { flex: none; }
.support-form-footer .button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .support-form-footer .button { justify-content: center; width: 100%; }
}
.support-secondary { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.support-secondary strong { display: block; margin-bottom: 5px; font-size: 12px; }
.support-secondary p { margin: 0 0 10px; color: var(--muted-2); font: 10px/1.55 var(--mono); }
.support-secondary-link { color: var(--accent); font: 700 10px var(--mono); text-decoration: none; }
.support-secondary-link:hover { text-decoration: underline; }
@keyframes packaging-activity-spin { to { transform: rotate(360deg); } }
.sidebar-footer { margin-top: auto; display: grid; gap: 14px; }
.security-stamp { display: flex; gap: 10px; align-items: center; padding: 13px; border: 1px solid var(--border-soft); border-radius: 10px; background: #0e1416; }
.security-stamp svg { width: 21px; flex: 0 0 auto; fill: none; stroke: var(--cyan); stroke-width: 1.7; stroke-linejoin: round; }
.security-stamp strong, .security-stamp span { display: block; }
.security-stamp strong { font-size: 11px; font-weight: 700; }
.security-stamp span { margin-top: 2px; color: var(--muted-2); font-size: 9px; }
.version-row { display: flex; justify-content: space-between; padding: 0 5px; color: #45504d; font: 9px var(--mono); }
.main-content { grid-column: 2; min-width: 0; }
.connection-pill { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid var(--border-soft); border-radius: 999px; color: var(--muted); background: #0d1214; font-size: 10px; font-weight: 600; }
.connection-pill.connected .status-dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(200,247,101,.12); }
.connection-pill.connected { color: #cfd8d4; }
.avatar-button { width: 34px; height: 34px; border: 1px solid #34413d; border-radius: 50%; background: #1b2528; color: #c6cfcc; font-size: 10px; font-weight: 800; cursor: pointer; transition: border-color .15s ease; }
.avatar-button:hover, .avatar-button[aria-expanded="true"] { border-color: var(--accent); color: var(--text); }
.account-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; width: 248px; padding: 8px; border: 1px solid #32403b; border-radius: 14px; background: linear-gradient(150deg,#151d20,#0e1315); box-shadow: var(--shadow); animation: account-panel-in .14s ease-out; }
.account-panel-identity { display: flex; align-items: center; gap: 11px; padding: 10px 9px 12px; }
.account-panel-identity-info { min-width: 0; }
.account-panel-identity strong, .account-panel-identity span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-panel-identity strong { font-size: 12px; letter-spacing: -.02em; }
.account-panel-identity span { margin-top: 2px; color: var(--muted-2); font-size: 9px; }
/* A number someone reads back over a support call, so it gets the mono face
   and enough tracking that 0/8 and 1/7 stay apart. */
.account-panel-number { font: 500 9.5px var(--mono); letter-spacing: .08em; -webkit-user-select: all; user-select: all; }
.account-panel-workspace { margin-top: 5px; font: 500 8px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.account-panel-role { display: flex; align-items: center; gap: 7px; margin: 0 9px 10px; color: var(--muted); font: 500 9px var(--mono); letter-spacing: .06em; }
.account-panel-role span:first-child { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(200,247,101,.12); }
.account-panel-divider { height: 1px; margin: 4px 5px; background: var(--border-soft); }
.account-panel-item { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 9px; border: 0; border-radius: 8px; background: transparent; color: #cbd4d1; font-size: 12px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; transition: .15s ease; }
.account-panel-item svg { width: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.account-panel-item:hover { background: #131a1c; color: var(--text); }
.account-panel-item.danger { color: #e08c85; }
.account-panel-item.danger:hover { background: rgba(239,119,105,.08); color: #ff9089; }
.panel { border: 1px solid var(--border-soft); border-radius: 13px; background: linear-gradient(145deg, rgba(19,26,29,.94), rgba(13,18,20,.94)); box-shadow: inset 0 1px rgba(255,255,255,.018); }
.connection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 16px 22px 18px; }
.connection-card { position: relative; min-height: auto; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 13px 18px; overflow: hidden; border: 1px solid #25302d; border-radius: 11px; background: rgba(15,21,23,.55); }
.connection-card::after { content: ""; position: absolute; width: 140px; height: 140px; top: -85px; right: -50px; border-radius: 50%; background: rgba(200,247,101,.035); filter: blur(2px); }
.connection-card-clickable { cursor: pointer; transition: transform .15s ease, border-color .15s, background .15s; }
.connection-card-clickable:hover { transform: translateY(-1px); border-color: #52615c; background: rgba(20,28,30,.7); }
.connection-card-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.panel-icon, .modal-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; }
.panel-icon svg, .modal-mark svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.card-kicker { color: var(--muted-2); font: 500 8px var(--mono); letter-spacing: .14em; }
.connection-copy h2 { margin: 0; font-size: 13px; letter-spacing: -.025em; }
.connection-copy p { max-width: 345px; margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 15px; border: 1px solid transparent; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 10px; cursor: pointer; transition: transform .15s ease, border-color .15s, background .15s; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.button.primary { color: var(--accent-ink); background: var(--accent); }
.button.primary:hover { background: var(--accent-strong); }
.button.secondary { border-color: #3a4844; color: #d4dcda; background: #1a2326; }
.button.secondary:hover { border-color: #52615c; background: #202a2d; }
.button.ghost { min-height: 31px; color: var(--muted); background: transparent; }
.button.ghost:hover { color: var(--text); }
.button.full { width: 100%; min-height: 44px; }
.connection-card.connected { border-color: rgba(200,247,101,.22); }
.connection-card.connected .card-status { color: #aebbb6; }
.connection-card.connected .card-status > span { background: var(--accent); box-shadow: 0 0 9px rgba(200,247,101,.6); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 22px; border-bottom: 1px solid var(--border-soft); }
.panel-header > div:first-child, .rules-heading > div:first-child { display: flex; align-items: center; gap: 12px; }
.panel-header h2 { margin: 0; font-size: 14px; letter-spacing: -.02em; }
.panel-header p { margin: 4px 0 0; color: var(--muted-2); font-size: 9px; }
.repo-search-wrap button { align-self: stretch; min-width: 48px; padding: 0 11px; border: 0; border-left: 1px solid #2b3734; color: var(--accent); background: #12191b; font: 700 9px var(--mono); cursor: pointer; }
.empty-state { min-height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--muted-2); }
.empty-state.small { min-height: 325px; }
.empty-state strong { margin-top: 11px; color: #9aa6a2; font-size: 11px; }
.empty-state span { margin-top: 4px; font-size: 9px; }
/* The full-page variant is what a brand-new account sees first — Benchmarks,
   Results and Jobs are all blank until a repository has been screened, so
   this is the one moment every first-time login is guaranteed to hit. It
   borrows the repo panel's dashed-ring-on-radial-gradient signature rather
   than inventing a second empty-state language, and says what to do next
   instead of just naming what's missing. */
.empty-state.page {
  min-height: 360px; margin: 4px; padding: 56px 24px;
  border: 1px dashed var(--border-soft); border-radius: 14px;
  background: radial-gradient(circle at 50% 8%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 50%), rgba(8,13,11,.28);
}
.empty-state.page .empty-orbit { width: 52px; height: 52px; border-color: #3a4a45; font-size: 21px; }
.empty-state.page .empty-orbit svg { width: 24px; height: 24px; }
.empty-state.page strong { margin-top: 16px; font-size: 16px; letter-spacing: -.01em; color: var(--text); }
.empty-state.page span { max-width: 420px; margin-top: 7px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.empty-state.page .button { margin-top: 20px; }

/* The gate is the whole page rather than a placeholder inside one, so it
   centres in the space the view would have filled and drops the dashed card:
   a placeholder outline stretched across an empty viewport reads as a panel
   that failed to load. The radial glow stays — it is the only thing on the
   page, and it should look deliberate. */
.runner-gate { position: relative; display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 180px); }
/* On the glow's own layer, sized as a fraction of the whole content area, so
   the falloff finishes well inside every edge. Painting it on the message box
   instead clipped it to that box: the gradient reached the border still lit
   and drew the four straight edges of a container nothing else here has. */
.runner-gate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 30% 38% at 50% 50%,
    color-mix(in srgb, var(--accent) 9%, transparent),
    color-mix(in srgb, var(--accent) 3%, transparent) 45%,
    transparent 100%);
}
.runner-gate .empty-state.page { position: relative; width: 100%; max-width: 460px; min-height: 0; padding: 0; border: 0; background: none; }
.text-button { border: 0; background: transparent; color: var(--muted); font-size: 9px; cursor: pointer; }
.text-button:hover { color: var(--accent); }
.parameter-grid input, .modal-field input, .modal-field select { width: 100%; height: 36px; padding: 0 10px; outline: none; border: 1px solid #2b3734; border-radius: 7px; color: #d8e0dd; background: #0b1012; font: 10px var(--mono); }
.parameter-grid input:focus, .modal-field input:focus, .modal-field select:focus { border-color: #607b5b; box-shadow: 0 0 0 3px rgba(200,247,101,.055); }
.results-controls { display: grid; padding: 0 22px 4px; }
.screening-flow { width: 100%; }
.screening-flow-svg { display: block; width: 100%; height: auto; overflow: visible; }
.workbench-panel-header { min-height: 82px; }
.workbench-panel-heading { display: flex; align-items: center; gap: 12px; }
.workbench-panel-heading .section-number { top: 0; display: grid; place-items: center; width: 26px; height: 26px; flex: none; border: 1px solid color-mix(in srgb,var(--accent) 28%,transparent); border-radius: 8px; background: color-mix(in srgb,var(--accent) 7%,transparent); font-size: 10px; }
.workbench-panel-heading p { margin: 3px 0 0; color: var(--muted-2); font-size: 10px; font-weight: 500; }
.button.compact { min-height: 32px; padding: 0 11px; font-size: 8px; }
#buildBenchmark { min-height: 32px; padding: 0 16px; font-size: 12px; }
.discovery-panel { overflow: hidden; border-radius: 13px; }
/* The base rule for these rows was dropped while the two breakpoint overrides
   below it survived, so the list rendered unstyled at every width. */
.discovery-list { display: grid; gap: 8px; padding: 10px; }
.discovery-row { display: grid; grid-template-columns: 24px minmax(210px,1fr) auto; gap: 12px; align-items: center; min-height: 58px; padding: 9px 12px; border: 1px solid rgba(45,56,53,.55); border-radius: 8px; background: #0e1416; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; }
.discovery-row:hover { background: rgba(255,255,255,.018); }
.discovery-row.selected { border-color: rgba(101,217,209,.35); background: linear-gradient(100deg,rgba(101,217,209,.055),#0e1517 62%); }
.discovery-row input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.discovery-copy { display: grid; gap: 3px; min-width: 0; }
.discovery-copy strong { overflow: hidden; font-size: 12px; font-weight: 600; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.discovery-copy small { color: var(--muted-2); font: 8px var(--mono); }
.discovery-meta { display: flex; gap: 7px; }
.discovery-meta b { padding: 4px 8px; border: 1px solid var(--border-soft); border-radius: 6px; color: var(--muted); font: 8px var(--mono); font-weight: 400; }
.repo-note { padding: 10px 12px; color: var(--muted-2); font: 8px var(--mono); }
/* Why a screen ranked the way it did. Sits above the candidates because it
   qualifies every score below it, and is absent whenever the answer is the
   expected one. */
.discovery-ranking-note { margin: 0; padding: 9px 12px; border-bottom: 1px solid var(--border-soft); color: var(--muted-2); background: rgba(255,255,255,.012); font-size: 8px; line-height: 1.55; }
.candidate-card.in-workbench { border-color: rgba(101,217,209,.35); background: linear-gradient(100deg,rgba(101,217,209,.055),#0e1517 62%); box-shadow: inset 3px 0 var(--cyan); }
.candidate-workbench-editor { display: grid; grid-template-columns: minmax(220px,1fr) 160px 110px; gap: 9px; align-items: end; margin-top: 12px; padding: 11px; border: 1px solid rgba(101,217,209,.16); border-radius: 9px; background: rgba(5,10,11,.34); }
.candidate-workbench-state { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; color: var(--cyan); font: 7px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.candidate-workbench-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(101,217,209,.07); }
.candidate-workbench-state small { margin-left: auto; color: var(--muted-2); font-size: 7px; text-transform: none; letter-spacing: 0; }
.candidate-workbench-editor label span { display: block; margin: 0 0 5px 2px; color: var(--muted-2); font-size: 7px; }
.candidate-workbench-editor input, .candidate-workbench-editor select { width: 100%; height: 32px; padding: 0 9px; outline: none; border: 1px solid #2b3734; border-radius: 7px; color: #d4ded9; background: #0a1012; font: 8px var(--mono); }
.candidate-workbench-editor input:focus, .candidate-workbench-editor select:focus { border-color: #607b5b; box-shadow: 0 0 0 3px rgba(200,247,101,.05); }
.assign-button { min-width: 122px; }
.remediate-button { min-width: 112px; border-color: rgba(242,166,90,.3) !important; color: #e1b47f !important; background: rgba(242,166,90,.055) !important; }
.remediate-button:hover { border-color: rgba(242,166,90,.55) !important; background: rgba(242,166,90,.09) !important; }
.code-toolbar button { border: 0; background: transparent; color: var(--muted); font-size: 9px; cursor: pointer; }
.code-toolbar button:hover { color: var(--accent); }
.run-fields label > span, .snapshot-select > span { display: block; margin: 0 0 7px 2px; color: var(--muted-2); font-size: 8px; }
.run-fields input, .run-fields select, .snapshot-select select, .run-benchmark-field select { width: 100%; height: 38px; padding: 0 10px; outline: none; border: 1px solid #2b3734; border-radius: 7px; color: #d8e0dd; background: #0b1012; font: 9px var(--mono); }
.run-fields input:focus, .run-fields select:focus, .snapshot-select select:focus { border-color: #607b5b; box-shadow: 0 0 0 3px rgba(200,247,101,.055); }
.run-fields-toggle-wrap .icon-button { width: 38px; height: 38px; }
.run-fields-toggle-wrap .icon-button.active { border-color: rgba(200,247,101,.38); background: rgba(200,247,101,.045); }
.run-benchmark-field > button { display: block; margin: 6px 0 0 2px; padding: 0; border: 0; color: var(--cyan); background: transparent; font: 600 7px var(--mono); cursor: pointer; }
.run-benchmark-field > button:disabled { color: var(--muted-2); cursor: default; }
/* .execution-task-modal* lived here for a task-picker modal that no markup or
   script has referenced for some time. Task subsetting is now the tray under
   the benchmark grid (see .task-tray), so the dead rules are gone rather than
   left as a second, conflicting way to style the same job. */
.modal-field select, .benchmark-builder select, .candidate-workbench-editor select, .run-fields select, .snapshot-select select, .target-field select { appearance: none; -webkit-appearance: none; padding-right: 24px; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 9px center; background-size: 9px 9px; }
.engine-actions .text-button { font-size: 7px; }
.icon-button { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #35423e; border-radius: 7px; color: var(--accent); background: #12191b; cursor: pointer; font-size: 13px; }
.icon-button:hover { border-color: var(--accent); }
.run-queue-panel, .comparison-panel { margin-top: 18px; overflow: hidden; }
.run-summary-button { min-width: 0; max-width: 100%; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.run-summary-button small { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-summary-button:disabled { cursor: default; }
.snapshot-select { width: 260px; flex: 0 0 auto; }
.profile-run-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 18px; padding: 18px; }
.profile-run-toolbar h2 { margin: 4px 0 3px; font-size: 18px; letter-spacing: -.035em; }
.profile-run-toolbar p { margin: 0; color: var(--muted-2); font-size: 8px; }
.profile-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 18px; }
.profile-metrics article { min-height: 118px; display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--border-soft); border-radius: 11px; background: linear-gradient(145deg, rgba(19,26,29,.94), rgba(13,18,20,.94)); }
.profile-metrics article > span { color: var(--muted-2); font: 8px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.profile-metrics strong { margin: auto 0 4px; font: 500 24px var(--mono); letter-spacing: -.05em; }
.profile-metrics small { overflow: hidden; color: var(--muted-2); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.benchmark-task-table-panel { min-width: 0; margin-bottom: 18px; overflow: hidden; }
.benchmark-task-table-panel .comparison-table-wrap { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }
.inference-panel, .snapshot-panel { overflow: hidden; }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; overflow-y: auto; overscroll-behavior: contain; background: rgba(3,5,6,.78); backdrop-filter: blur(10px); }
.modal-backdrop[hidden] { display: none; }
body.modal-open { overflow: hidden; }
.modal { width: min(460px,100%); position: relative; padding: 28px; border: 1px solid #32403b; border-radius: 16px; background: linear-gradient(150deg,#151d20,#0e1315); box-shadow: var(--shadow); }
/* This modal is read once, at the moment someone is deciding whether to trust
   a command enough to paste it into their terminal — the wrong moment for fine
   print. Everything inside it is set on the Results table's scale: 12.5px
   names, 12px mono for anything that is a value, 10px mono for the labels
   under them. It runs wider than the other modals to keep the install command
   inside three lines at that size. */
.modal.credentials-modal { width: min(760px,100%); max-height: min(700px,calc(100dvh - 40px)); overflow-y: auto; outline: none; }
.credentials-modal .runner-install { margin-top: 18px; }
.credentials-modal .runner-command { margin-top: 12px; padding: 13px; }
.modal-close { position: absolute; top: 13px; right: 14px; width: 30px; height: 30px; border: 0; border-radius: 7px; background: #1b2427; color: var(--muted); font-size: 20px; cursor: pointer; }
.modal-mark { margin-bottom: 18px; }
.modal h2 { margin: 8px 0; font-size: 22px; letter-spacing: -.04em; }
/* The 8px below a heading is the gap before its paragraph. On a step that
   drops the paragraph the heading lands straight on a button, and 8px reads
   as a collision — so the heading takes the paragraph's spacing instead. */
#githubPanel .modal:has(#githubPanelBody[hidden]) h2 { margin-bottom: 20px; }
.modal > p { margin: 0 0 20px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.modal-field { display: grid; gap: 7px; margin: 12px 0; }
.modal-field > span { color: #aeb9b5; font-size: 9px; font-weight: 700; }
.modal-field input, .modal-field select { height: 44px; }
.modal-field textarea { width: 100%; padding: 11px; resize: vertical; outline: none; border: 1px solid #2b3734; border-radius: 7px; color: #d8e0dd; background: #0b1012; font: 10px/1.55 var(--mono); }
.modal-field textarea:focus { border-color: #607b5b; box-shadow: 0 0 0 3px rgba(200,247,101,.055); }
/* The device-flow code. Large and monospaced because it is read off a screen
   and typed into a phone or another tab \u2014 ambiguity between O and 0 is the
   whole failure mode here. */
/* The whole box is the copy control, so it is a button at full width rather
   than a field with a button beside it. */
.device-code {
  display: block; width: 100%; margin: 0 0 14px;
  padding: 18px 16px; border: 1px solid #2b3734; border-radius: 9px;
  background: #0c1113; color: var(--accent);
  font: 600 24px/1 var(--mono); letter-spacing: .22em; text-align: center;
  cursor: pointer; transition: border-color .16s ease, background .16s ease;
}
.device-code:hover { border-color: color-mix(in srgb, var(--accent) 45%, #2b3734); background: #0e1417; }
.device-code:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* While GitHub actually has the code outstanding, the box breathes so the
   panel reads as live rather than a screenshot of instructions. */
.device-code.pending { animation: device-code-pulse 2.4s ease-in-out infinite; }
@keyframes device-code-pulse {
  0%, 100% { border-color: #2b3734; box-shadow: 0 0 0 0 rgba(200,247,101,0); }
  50% { border-color: color-mix(in srgb, var(--accent) 45%, #2b3734); box-shadow: 0 0 0 5px rgba(200,247,101,.05); }
}
.mini-spinner { display: inline-block; width: 12px; height: 12px; flex: 0 0 auto; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
/* A step that is only a wait renders as the button. It is disabled because
   there is nothing to press, but not dimmed like a blocked action — here the
   button is the status, and status has to stay readable. */
.button.is-waiting:disabled { opacity: 1; cursor: default; color: var(--muted); font-weight: 600; }
.button.is-waiting .mini-spinner { color: var(--accent); }
.credential-unavailable { padding: 12px; border: 1px solid rgba(240,196,25,.28); border-radius: 8px; color: #d8c877 !important; background: rgba(240,196,25,.05); }
.credential-provider-list { display: grid; gap: 1px; margin: 18px 0 0; padding: 0; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 8px; list-style: none; background: var(--border-soft); }
.credential-provider-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; background: #0b1012; }
.credential-provider-list strong, .credential-provider-list small { display: block; }
/* A runner row is the same thing as a Results row — a name over the machine
   facts about it — so it takes the same two sizes. */
.credential-provider-list strong { font-size: 12.5px; }
.credential-provider-list small { margin-top: 4px; color: var(--muted-2); font: 600 10px var(--mono); }
.credential-provider-list .text-button { color: var(--red); }
.runner-open { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: space-between; gap: 12px; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.runner-open:hover strong, .runner-open:focus-visible strong { color: var(--accent); }
.runner-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 2px; }
.connected-provider-panel { margin-top: 18px; }
.connected-provider-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.connected-provider-panel > header strong { font-size: 12.5px; letter-spacing: -.01em; }
.connected-provider-panel > header span { min-width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid rgba(126,225,122,.28); border-radius: 6px; color: #91e88d; background: rgba(96,211,101,.07); font: 700 10px var(--mono); }
.connected-provider-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.connected-provider-list li { width: 94px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 11px 6px 10px; border: 1px solid rgba(96,211,101,.16); border-radius: 11px; background: linear-gradient(135deg,rgba(96,211,101,.06),rgba(96,211,101,.014)); text-align: center; }
.connected-provider-mark { position: relative; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #eef2ef; font: 800 9px var(--mono); letter-spacing: .01em; }
.connected-provider-mark img { width: 19px; height: 19px; object-fit: contain; }
.connected-provider-mark.on-dark { background: #0b0b0b; }
.connected-provider-mark::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--pass); border: 2px solid #141b1e; }
.connected-provider-list strong { display: block; overflow: hidden; max-width: 100%; color: var(--muted); font-size: 10px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
/* Enrolment is the one thing most people open this modal to do, so the command
   is laid out to be read and copied rather than assembled: a heading, the two
   platforms, and the line itself. */
.runner-install { display: grid; gap: 11px; }
.runner-install-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.runner-install-head strong { color: var(--text); font-size: 12.5px; letter-spacing: -.01em; }
.runner-install-tabs { display: flex; padding: 2px; border: 1px solid var(--border-soft); border-radius: 7px; background: rgba(255,255,255,.014); }
.runner-install-tabs button { padding: 5px 11px; border: 0; border-radius: 5px; background: transparent; color: var(--muted-2); font: 600 10px var(--mono); letter-spacing: .02em; cursor: pointer; }
.runner-install-tabs button:hover { color: var(--muted); }
.runner-install-tabs button[aria-selected="true"] { color: #0d1310; background: var(--accent); }
/* The copy icon stays with the command, where it is available without adding
   another control below the content someone needs to take away. */
.runner-install-command { position: relative; padding: 14px 52px 14px 14px; border: 1px solid var(--border-soft); border-radius: 8px; background: #070b0d; }
.runner-install-command code { display: block; overflow-wrap: anywhere; color: var(--accent); font: 12px/1.65 var(--mono); }
.runner-install-copy { position: absolute; top: 9px; right: 9px; display: grid; width: 29px; height: 29px; padding: 0; place-items: center; border: 1px solid var(--border-soft); border-radius: 6px; background: #121a1c; color: var(--muted); cursor: pointer; }
.runner-install-copy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.runner-install-copy:hover:not(:disabled) { border-color: rgba(200,247,101,.3); color: var(--accent); }
.runner-install-copy:disabled { opacity: .4; cursor: default; }
.runner-install-error { margin: 0; color: #f0a3a3; font-size: 11px; line-height: 1.5; }
/* The sentence that says the token dies in an hour is the only consequence on
   this panel, so it is not set as fine print: it takes the body ink and the
   same size as the rest of the prose in this modal. */
.runner-install-foot { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.runner-install-foot a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.runner-install-foot a:hover { color: var(--accent); }
/* Named so nobody wonders whether Teev only runs locally. The bordered card
   distinguishes this workspace-wide option from the personal install above. */
.runner-cloud {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 14px; padding: 13px 14px;
  border: 1px dashed var(--border); border-radius: 10px; background: rgba(255,255,255,.014);
}
.runner-cloud > div { display: grid; gap: 4px; min-width: 0; }
.runner-cloud strong { color: var(--text); font-size: 12.5px; letter-spacing: -.01em; }
.runner-cloud small { color: var(--muted-2); font-size: 11px; line-height: 1.5; }
.runner-cloud .button { flex: none; }
/* Asked for and recorded: the card becomes a quiet receipt, without implying
   that Teev hosts the runner. */
.runner-cloud.is-requested { border-style: solid; border-color: rgba(201,255,99,.22); background: rgba(201,255,99,.045); }
.runner-cloud.is-requested small { color: var(--muted); }
/* Same rule as .button.is-waiting: once pressed the button is the receipt, and
   a receipt dimmed to 42% is not one. */
.runner-cloud.is-requested .button:disabled { opacity: 1; color: var(--muted); cursor: default; transform: none; }
.runner-command { display: grid; gap: 9px; margin-top: 12px; padding: 12px; border: 1px solid var(--border-soft); border-radius: 8px; background: #0b1012; }
.runner-command > span, .runner-command > small { color: var(--muted-2); font-size: 11px; line-height: 1.5; }
.runner-command > code { overflow-wrap: anywhere; padding: 12px; border-radius: 6px; color: var(--accent); background: #070b0d; font: 12px/1.6 var(--mono); }
.runner-list { margin-top: 12px; }
.modal.runner-detail-modal { width: min(680px,100%); max-height: min(760px,calc(100dvh - 40px)); overflow-y: auto; }
.runner-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; padding-right: 32px; }
.runner-detail-head h2 { margin-top: 5px; }
.runner-detail-head p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.runner-storage-card { margin-top: 10px; padding: 14px; border: 1px solid var(--border-soft); border-radius: 9px; background: #0b1012; }
.runner-storage-card > header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.runner-storage-card > header strong { font-size: 10px; }
.runner-storage-card > header small { max-width: 430px; color: var(--muted-2); font-size: 8px; line-height: 1.45; text-align: right; }
.runner-storage-numbers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.runner-storage-numbers > div { padding: 10px; border: 1px solid rgba(255,255,255,.05); border-radius: 7px; background: rgba(255,255,255,.018); }
.runner-storage-numbers span { display: block; color: var(--muted-2); font: 700 8px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.runner-storage-numbers strong { display: block; margin-top: 5px; font: 600 15px var(--mono); }
.runner-storage-meter { height: 6px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: #202927; }
.runner-storage-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width .25s ease; }

/* Docker is a flat Results-style table: one header band, one row per category,
   and the same hairline separation used by Jobs and Results. */
.docker-table-head,
.docker-row {
  display: grid; grid-template-columns: minmax(110px,.65fr) minmax(180px,1fr) minmax(220px,1.3fr) minmax(110px,.55fr);
  gap: 14px; align-items: center;
}
.docker-table-head {
  padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.075);
  color: var(--muted); background: rgba(255,255,255,.018);
  font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.runner-docker-rows { display: grid; overflow: hidden; }
.docker-row { padding: 13px 14px; background: transparent; }
.docker-row + .docker-row { border-top: 1px solid rgba(255,255,255,.045); }
.docker-row-name { color: var(--text); font: 600 12px var(--mono); }
.docker-row-usage { display: grid; gap: 4px; min-width: 0; }
.docker-row-usage b { color: var(--text); font: 600 11px var(--mono); }
.docker-row-usage small { color: var(--muted-2); font: 500 9px var(--mono); }
/* The same lime-is-Teev's encoding the host disk bar above already teaches, so
   the reader learns it once and it holds for the whole page. */
.docker-row-bar { display: flex; width: min(150px,100%); height: 5px; overflow: hidden; border-radius: 999px; background: #171d1c; }
.docker-row-bar i { display: block; height: 100%; }
.docker-row-bar .seg-teev { background: var(--accent); }
.docker-row-bar .seg-other { background: #2e3a34; }
.docker-row-own { color: var(--muted); font-size: 9px; line-height: 1.5; }
.docker-row-own b { color: var(--accent); font-weight: 600; }
.docker-row-verdict {
  justify-self: end; padding: 3px 7px; border-radius: 999px;
  font: 700 7.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  /* "Kept" is the quiet verdict, not an unreadable one: it is the answer for a
     category Teev will not touch, and a reader checking that has to be able to
     read it. */
  color: #9dada7; background: rgba(255,255,255,.07);
}
.docker-row-verdict[data-reach="teev"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); }
.docker-row-verdict[data-reach="wipe"] { color: var(--crit); background: rgba(255,92,122,.1); }
.docker-row-empty { color: var(--muted-2); font: 500 9px var(--mono); }
.runner-policy-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 10px; }
.runner-policy-grid .modal-field { margin: 0 0 10px; }
/* One button, at the end of the card — the same corner Remove Selected sits
   in on the list above, so the two read as the same kind of control. */
.runner-storage-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 3px; }
.runner-teev-footprint { margin-top: 18px; }
.runner-teev-numbers { grid-template-columns: repeat(4,minmax(0,1fr)); }
.runner-teev-numbers small { display: block; margin-top: 5px; color: var(--muted-2); font-size: 8px; line-height: 1.35; }
.runner-model-command { margin-top: 14px; border-color: rgba(101,217,209,.18); background: linear-gradient(145deg,rgba(101,217,209,.05),#0b1012 58%); }
.runner-model-command-head { display: flex; align-items: center; gap: 10px; }
.runner-model-command-head > span { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border: 1px solid rgba(101,217,209,.22); border-radius: 8px; color: var(--cyan); background: rgba(101,217,209,.07); font-size: 15px; }
.runner-model-command-head strong,.runner-model-command-head small { display: block; }
.runner-model-command-head strong { font-size: 12.5px; }
.runner-model-command-head small { margin-top: 4px; color: var(--muted-2); font-size: 11px; line-height: 1.45; }
.runner-model-command > small code { color: var(--text); font-family: var(--mono); }
.public-packaging-modal { width: min(720px,100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 30px; }
.public-packaging-head { display: flex; align-items: center; gap: 16px; padding-right: 34px; }
.public-packaging-head h2 { margin: 5px 0 4px; font-size: 24px; }
.public-packaging-head p { margin: 0; color: var(--muted-2); font-size: 10px; }
.public-packaging-orbit { width: 48px; height: 48px; position: relative; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(101,217,209,.22); border-radius: 14px; background: radial-gradient(circle,rgba(101,217,209,.13),rgba(101,217,209,.025)); }
.public-packaging-orbit::before { width: 22px; height: 22px; content: ""; border: 1px solid rgba(101,217,209,.34); border-radius: 50%; }
.public-packaging-orbit span { width: 7px; height: 7px; position: absolute; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px rgba(101,217,209,.65); animation: public-package-orbit 1.8s linear infinite; }
.public-packaging-orbit i { width: 4px; height: 4px; position: absolute; border-radius: 50%; background: var(--accent); }
@keyframes public-package-orbit { from { transform: rotate(0deg) translateX(16px) rotate(0deg); } to { transform: rotate(360deg) translateX(16px) rotate(-360deg); } }
.public-packaging-progress { height: 4px; margin: 24px 0 14px; overflow: hidden; border-radius: 99px; background: #202a2d; }
.public-packaging-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--cyan),var(--accent)); box-shadow: 0 0 18px rgba(101,217,209,.28); transition: width .45s ease; }
.public-packaging-current { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 2px 12px; align-items: baseline; padding-bottom: 18px; border-bottom: 1px solid var(--border-soft); }
.public-packaging-current > span { grid-row: 1 / 3; color: var(--cyan); font: 600 15px var(--mono); }
.public-packaging-current strong { font-size: 11px; }
.public-packaging-current small { color: var(--muted-2); font-size: 8px; }
/* A divided list, not a grid of boxed cards: every selection reads at body
   text size (14px title, 12px meta) since this is the primary record of what
   a job did, not a footnote. Two columns — the selection and its verdict — so
   the right edge scans top-to-bottom on its own and says how each one ended.
   No progress meter beside the verdict: how far a selection got through the
   seven phases is a live detail the record names in full at the top while it
   runs, and once it has stopped the pill is the whole answer. */
.public-packaging-tasks {
  display: grid; gap: 0; margin: 0; padding: 0; list-style: none;
  border: 1px solid var(--border-soft); border-radius: 10px;
  overflow: hidden; background: #0b1012;
}
.public-packaging-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  padding: 13px 15px;
}
.public-packaging-task + .public-packaging-task { border-top: 1px solid rgba(255,255,255,.045); }
/* One row is live and the rest are waiting, so the live one is lit from its
   own edge rather than relying on the pill alone to say which is which. */
.public-packaging-task.active { background: color-mix(in srgb, var(--cyan) 4%, transparent); box-shadow: inset 2px 0 0 var(--cyan); }
.task-row-head { display: contents; }
/* Title and pull number on one line: the number is what tells two selections
   apart, so it sits with the title rather than on a line of its own. */
.task-row-title { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.task-row-title strong {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #d7dedb; font-size: 14px; line-height: 1.4; letter-spacing: -.01em;
}
/* Selections still in the queue have not happened yet, and read as background
   against the one that is happening. */
.public-packaging-task.queued .task-row-title strong { color: var(--muted); }
/* Scoped to the packaging row. Unscoped, this redefined every .task-pill in
   the console from here down — including the classification pills in Task by
   Task, which are a quieter thing entirely and were being repainted as
   uppercase status chips. */
.public-packaging-task .task-pill {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  flex: 0 0 auto; padding: 3px 9px;
  border: 0; border-radius: 999px; color: var(--muted-2); background: rgba(255,255,255,.05);
  font: 700 10px var(--mono); text-transform: uppercase; letter-spacing: .05em;
  line-height: 1.5;
}
.task-row-meta { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; }
/* The source is the merged pull request, so it links to one and carries the
   same purple merge mark GitHub uses and the task detail already borrows. */
.task-source {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--muted-2); font: 500 12px var(--mono); text-decoration: none;
  transition: color .14s ease;
}
a.task-source:hover { color: var(--text); }
a.task-source:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.task-source .gh-icon { width: 11px; height: 11px; flex: none; fill: #a371f7; }
/* The note is alone on its line now that the pull number sits with the title,
   so it opens on its own word rather than on a separator from the thing that
   used to precede it. */
.task-note { color: var(--muted-2); font-size: 12px; line-height: 1.5; }
.public-packaging-task.active .task-pill { color: var(--cyan); background: rgba(101,217,209,.1); }
.public-packaging-task.done .task-pill { color: var(--accent); background: rgba(200,247,101,.08); }
.public-packaging-task.review .task-pill { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.public-packaging-task.failed .task-pill { color: var(--red); background: rgba(255,92,122,.1); }
.public-packaging-task.failed .task-note { color: color-mix(in srgb, var(--red) 65%, var(--muted-2)); }

/* Narrow: the pill rides the title's line instead of centring across both, so
   a wrapped note cannot push it away from the row it belongs to. */
@media (max-width: 560px) {
  .public-packaging-task .task-pill { grid-row: 1; }
}
.public-packaging-note { display: flex; align-items: center; gap: 10px; margin-top: 15px; padding: 11px 12px; border: 1px solid rgba(200,247,101,.16); border-radius: 8px; background: rgba(200,247,101,.025); }
.public-packaging-note span { flex: 0 0 auto; padding: 4px 7px; border-radius: 99px; color: var(--accent); background: rgba(200,247,101,.08); font: 600 7px var(--mono); text-transform: uppercase; }
.public-packaging-note p { margin: 0; color: var(--muted-2); font-size: 8px; line-height: 1.5; }
.public-packaging-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.public-packaging-modal.complete .public-packaging-orbit span { animation: none; transform: translateX(16px); background: var(--accent); }
.public-packaging-modal.complete .public-packaging-current > span { color: var(--accent); }
.mock-benchmark-item { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 12px; padding: 13px 14px; border: 1px solid transparent; border-radius: 9px; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.mock-benchmark-item:hover, .mock-benchmark-item.selected { border-color: rgba(101,217,209,.22); background: rgba(101,217,209,.035); }
.mock-benchmark-item .candidate-title, .mock-benchmark-item .repo-meta { grid-column: 1; }
.mock-benchmark-item > b { grid-row: 1 / 3; grid-column: 2; align-self: center; padding: 4px 7px; border-radius: 99px; color: var(--accent); background: rgba(200,247,101,.07); font: 600 7px var(--mono); text-transform: uppercase; }
.task-view-only-badge { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 3px 6px; border: 1px solid rgba(101,217,209,.2); border-radius: 99px; color: var(--cyan); font: 600 7px var(--mono); text-transform: uppercase; }
.remediation-modal { width: min(900px,100%); max-height: calc(100vh - 40px); overflow: auto; }
.assignment-modal { width: min(520px,100%); }
.assignment-classification .modal-field { margin: 0; }
.assignment-classification > button { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
.run-decision-modal { width: min(500px,100%); }
.runner-setup-modal { width: min(620px,100%); max-height: calc(100vh - 40px); overflow: auto; }
.runner-config-block button { padding: 6px 8px; border: 1px solid var(--border-soft); border-radius: 6px; color: var(--muted); background: #151d20; font: 7px var(--mono); cursor: pointer; }
.run-log-modal { width: min(880px,100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; }
.run-job-links .text-button { font-size: 8px; white-space: nowrap; }
.benchmark-validation-modal { width: min(690px,100%); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
.benchmark-validation-actions .button { width: 100%; }
.benchmark-validation-modal.failed .validation-icon { background: rgba(239,119,105,.08); }
.benchmark-validation-modal.failed .validation-icon span { border: 0; border-radius: 0; color: var(--red); animation: none; }
.benchmark-validation-modal.failed .validation-icon span::before { content: "!"; font: 700 13px var(--mono); }
.benchmark-validation-modal.failed #benchmarkValidationStage, .benchmark-validation-modal.failed #benchmarkValidationPercent, .benchmark-validation-modal.failed #benchmarkValidationFailures { color: var(--red); }
.benchmark-validation-modal.complete .validation-icon span { border: 0; border-radius: 0; color: var(--accent); animation: none; }
.benchmark-validation-modal.complete .validation-icon span::before { content: "✓"; font: 700 13px var(--mono); }
.benchmark-validation-modal.complete #benchmarkValidationStage, .benchmark-validation-modal.complete #benchmarkValidationPercent { color: var(--accent); }
.auth-brand .brand-mark { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 9px; color: var(--accent-ink); background: var(--accent); box-shadow: 0 0 28px rgba(200,247,101,.1); }
.auth-brand .brand-mark svg { width: 23px; fill: currentColor; }
.auth-switch button { padding: 0; border: 0; background: transparent; color: var(--accent); font-size: 10px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth-switch button:hover { color: var(--accent-strong); }
.auth-body button:focus-visible, .auth-checkbox input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.first-user-setup-overlay { position: fixed; inset: 0; z-index: 290; display: grid; place-items: center; overflow: auto; padding: 28px; background: radial-gradient(circle at 50% 0,rgba(101,217,209,.055),transparent 34%),var(--bg); }
.first-user-setup { width: min(620px,100%); padding: 30px; border: 1px solid #2c3935; border-radius: 18px; background: linear-gradient(145deg,#141c1f,#0c1113); box-shadow: 0 28px 80px rgba(0,0,0,.38); animation: account-panel-in .2s ease-out; }
.first-user-setup > header { display: flex; gap: 17px; align-items: flex-start; }
.first-user-setup > header .brand-mark { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; color: var(--accent-ink); background: var(--accent); }
.first-user-setup > header .brand-mark svg { width: 27px; fill: currentColor; }
.first-user-setup > header span, .first-user-setup-copy > span { color: var(--cyan); font: 600 8px var(--mono); letter-spacing: .12em; }
.first-user-setup > header h1 { margin: 4px 0 5px; font-size: 23px; letter-spacing: -.035em; }
.first-user-setup > header p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.first-user-setup-progress { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center; margin: 26px 0 18px; }
.first-user-setup-progress > div { display: flex; gap: 10px; align-items: center; opacity: .42; }
.first-user-setup-progress > div.active, .first-user-setup-progress > div.complete { opacity: 1; }
.first-user-setup-progress i { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #394641; border-radius: 50%; color: var(--muted); font: normal 700 9px var(--mono); }
.first-user-setup-progress .active i { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 0 4px rgba(101,217,209,.055); }
.first-user-setup-progress .complete i { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); }
.first-user-setup-progress strong, .first-user-setup-progress small { display: block; }
.first-user-setup-progress strong { font-size: 9px; }
.first-user-setup-progress small { margin-top: 2px; color: var(--muted-2); font-size: 7px; }
.first-user-setup-progress > b { height: 1px; background: #2c3935; }
.first-user-setup-card { padding: 21px; border: 1px solid var(--border); border-radius: 12px; background: rgba(4,8,9,.38); }
.first-user-setup-copy h2 { margin: 5px 0 6px; font-size: 16px; }
.first-user-setup-copy p { margin: 0 0 17px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.first-user-setup-card label > span { display: block; margin-bottom: 6px; color: var(--muted-2); font-size: 8px; }
.first-user-setup-card input { width: 100%; height: 42px; margin-bottom: 11px; padding: 0 12px; outline: none; border: 1px solid #33403c; border-radius: 8px; color: var(--text); background: #080d0f; font: 10px var(--mono); }
.first-user-setup-card input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(101,217,209,.06); }
.first-user-demo { display: block; margin: 13px auto 0; }
.first-user-model-choice { display: grid; grid-template-columns: 54px 1fr; gap: 2px 10px; align-items: center; margin-bottom: 13px; padding: 11px 12px; border: 1px solid rgba(200,247,101,.14); border-radius: 8px; background: rgba(200,247,101,.035); }
.first-user-model-choice > span { grid-row: 1 / 3; color: var(--muted-2); font: 8px var(--mono); }
.first-user-model-choice strong { font-size: 10px; }
.first-user-model-choice small { color: var(--muted-2); font-size: 7px; }
.first-user-setup-error { margin-top: 10px; padding: 9px 11px; border: 1px solid rgba(239,119,105,.22); border-radius: 8px; color: #f09a91; background: rgba(239,119,105,.05); font-size: 8px; line-height: 1.45; }
.first-user-setup > footer { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-top: 14px; color: var(--muted-2); font-size: 8px; }
.toast-stack { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: grid; gap: 8px; }
/* Not a toast: a toast says something happened, and this says something is
   still true. It sits above the stack, stays for as long as the condition
   does, and takes the warn tone rather than the critical one — nothing has
   failed, the page has just stopped being current. */
.connection-lost {
  position: fixed; left: 50%; bottom: 22px; z-index: 201; transform: translateX(-50%);
  display: flex; align-items: center; gap: 9px;
  max-width: calc(100vw - 44px); padding: 9px 15px;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-radius: 999px;
  background: #1d1c14; box-shadow: var(--shadow);
  color: var(--warn); font: 600 11px var(--sans);
}
.connection-lost-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--warn); animation: connection-pulse 1.4s ease-in-out infinite; }
@keyframes connection-pulse { 50% { opacity: .25; } }
.result-diff-button { display: block; margin-top: 7px; padding: 0; border: 0; color: var(--cyan); background: transparent; font: 600 8px var(--mono); letter-spacing: .04em; cursor: pointer; }
.result-diff-button:hover { color: #a5fff8; }
.result-patch-modal { width: min(1120px, calc(100vw - 40px)); }
.toast { width: min(360px, calc(100vw - 44px)); display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border: 1px solid #34423e; border-radius: 10px; background: #182023; box-shadow: var(--shadow); animation: toast-in .2s ease-out; }
.toast i { width: 7px; height: 7px; margin-top: 4px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); }
.toast.error i { background: var(--red); }
.toast strong, .toast span { display: block; }
.toast strong { font-size: 10px; }
.toast span { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }

@media (prefers-reduced-motion: reduce) { .screening-flow-animation { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .run-row.is-running::before, .run-state.running i, .run-inline-progress > i.indeterminate b, .run-progress-meter.indeterminate > i, .validation-icon span { animation: none; }
  /* The animated sign-in scorecard these rules also covered belongs to the
     data-plane console (teev-benchmark-customer), which owns the sign-in
     surface. Its --tint variable went with it; the rules are dropped rather
     than left pointing at a colour nothing defines. */
}
@media (max-width: 1120px) {
  .auth-layout { grid-template-columns: minmax(0,46%) minmax(0,54%); }
  .auth-column { padding: 32px 30px 26px; }
  .auth-evidence { padding: 28px; }
  .empty-state.small { min-height: 250px; }
  .candidate-card { grid-template-columns: 56px 1fr auto; }
  .candidate-gates { grid-column: 2 / 3; }
  .candidate-action { grid-column: 3; grid-row: 1 / span 2; }
  .remediation-card { grid-template-columns: 120px 1fr auto; }
  .remediation-card-reason { grid-column: 2; }
  .suite-grid, .profile-grid { grid-template-columns: 1fr; }
  .benchmark-catalog-list { max-height: 360px; }
  .discovery-row { grid-template-columns: 50px minmax(200px,1fr) 90px minmax(220px,1fr) auto; }
  /* Relocated: these were left at the top level when the console shell was
     pasted back in, so they applied at every width — the sidebar sat translated
     off-canvas and .app-shell lost its grid on a 1500px desktop. Restored to
     the max-width: 1120px breakpoint they were written for. */
  .empty-state.small { min-height: 250px; }
  /* Relocated: left at the top level by the shell paste-restore, so it
     applied at every width. */
  .empty-state.small { min-height: 250px; }
}
@media (max-width: 940px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-evidence { display: none; }
}
@media (max-width: 860px) {
  .profile-run-toolbar, .benchmark-library-toolbar { align-items: stretch; flex-direction: column; }
  .content-wrap { padding: 36px 20px 25px; }
  .candidate-workbench-editor { grid-template-columns: minmax(0,1fr) 145px 100px; }
  .connection-grid { grid-template-columns: 1fr; }
  .artifact-browser { grid-template-columns: 220px minmax(0,1fr); }
  .view-hero { align-items: flex-start; flex-direction: column; gap: 22px; }
  .view-hero-summary, .snapshot-select { width: 100%; }
  .profile-metrics, .benchmark-library-metrics { grid-template-columns: 1fr 1fr; }
  .benchmark-task-detail-head { align-items: flex-start; flex-direction: column; }
  .run-fields { grid-template-columns: 1fr 1fr auto; }
  .execution-location { grid-template-columns: 1fr; }
  .execution-target-row { grid-template-columns: 28px 1fr; align-items: center; }
  .target-number { grid-row: 1 / span 5; }
  .target-operator { display: none; }
  .target-route, .target-compatibility { grid-column: 2; }
  .target-remove { grid-column: 1; grid-row: 5; }
  .run-queue-head { display: none; }
  .run-row { grid-template-columns: auto auto auto 1fr; grid-template-areas: "state score cost ." "summary summary summary summary" "target task runner started" "actions actions actions actions"; gap: 8px 14px; }
  .run-row .run-state { grid-area: state; }
  .run-row .run-score { grid-area: score; }
  .run-row > .run-metric:nth-child(3) { grid-area: cost; }
  .run-row .run-benchmark-cell { grid-area: summary; }
  .run-row > .run-metric:nth-child(5) { grid-area: target; }
  .run-row > .run-metric:nth-child(6) { grid-area: task; }
  .run-row .run-runner { grid-area: runner; }
  .run-row > .run-metric:nth-child(8) { grid-area: started; justify-self: end; text-align: right; }
  .run-row .run-actions { grid-area: actions; }
  .remediation-editor-grid { grid-template-columns: 1fr; }
  /* Relocated: these were left at the top level when the console shell was
     pasted back in, so they applied at every width. Restored to the
     max-width: 860px breakpoint they were written for. The off-canvas sidebar
     rules that used to sit here are gone: the rail no longer slides away. */
  .profile-run-toolbar, .benchmark-library-toolbar { align-items: stretch; flex-direction: column; }
  .candidate-workbench-editor { grid-template-columns: minmax(0,1fr) 145px 100px; }
  .connection-grid { grid-template-columns: 1fr; }
  .view-hero-summary, .snapshot-select { width: 100%; }
  .profile-metrics, .benchmark-library-metrics { grid-template-columns: 1fr 1fr; }
  /* Relocated: left at the top level by the shell paste-restore, so it
     applied at every width. */
  .run-fields { grid-template-columns: 1fr 1fr auto; }
}
@media (max-width: 620px) {
  .runner-detail-head, .runner-storage-card > header { align-items: flex-start; flex-direction: column; }
  .runner-storage-card > header small { text-align: left; }
  .runner-storage-numbers, .runner-policy-grid { grid-template-columns: 1fr; }
  /* The verdict chip earns its own line before it starts squeezing the
     ownership sentence into two words per line. */
  .docker-table-head { display: none; }
  .docker-row { grid-template-columns: 1fr; gap: 8px; }
  .docker-row-verdict, .docker-row-empty { justify-self: start; text-align: left; }
  .runner-storage-actions { align-items: stretch; flex-direction: column-reverse; }
  .repo-list, .execution-route-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #executionBenchmarkGrid.scrollable { max-height: 410px; }
  .candidate-workbench-editor { grid-template-columns: 1fr 1fr; }
  .candidate-workbench-name, .candidate-workbench-state { grid-column: 1 / -1; }
  .connection-pill { display: none; }
  .account-panel { width: calc(100vw - 32px); }
  .stepper { overflow-x: auto; }
  .step-line { min-width: 16px; margin: 0 10px; }
  .panel-header { align-items: flex-start; flex-direction: column; }
  .repo-panel-tools { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .repo-search-wrap { width: 100%; }
  .repo-search-wrap input { width: 100%; }
  .model-route-filter { width: 100%; }
  .model-route-filter > button { width: 100%; justify-content: space-between; }
  .model-route-filter-panel { left: 0; right: 0; width: auto; }
  .rules-grid { grid-template-columns: 1fr; }
  .parameter-grid { grid-template-columns: 1fr 1fr; }
  .parameter-grid label.wide { grid-column: 1 / -1; }
  .benchmark-builder { flex-direction: column; align-items: stretch; }
  .benchmark-builder #benchmarkNameField, .benchmark-builder #existingBenchmarkField { flex-basis: auto; }
  .benchmark-builder-actions { margin-left: 0; flex-wrap: wrap; }
  .scan-footer { align-items: stretch; flex-direction: column; }
  .scan-actions { width: 100%; }
  .scan-actions .button { flex: 1; }
  .scan-preview small { white-space: normal; }
  .first-user-setup-overlay { padding: 12px; place-items: start center; }
  .first-user-setup { padding: 21px 17px; }
  .first-user-setup > header h1 { font-size: 19px; }
  .first-user-setup-progress { grid-template-columns: 1fr 22px 1fr; }
  .first-user-setup > footer { align-items: flex-start; flex-direction: column; }
  .auth-column { padding: 26px 20px 22px; border-right: 0; }
  .auth-body { padding: 30px 0; }
  .auth-field-pair { grid-template-columns: 1fr; }
  .auth-column > footer { align-items: flex-start; flex-direction: column; }
  .scan-progress { grid-template-columns: 1fr 38px; }
  .scan-progress-meter { grid-column: 1 / -1; grid-row: 2; }
  .discovery-row { grid-template-columns: 44px 1fr auto; }
  .discovery-fast { grid-column: 2; }
  .discovery-outcome { grid-column: 2 / -1; }
  .candidate-card { grid-template-columns: 48px 1fr; }
  .candidate-gates { grid-column: 1 / -1; }
  .candidate-action { grid-column: 1 / -1; grid-row: auto; grid-template-columns: 1fr auto; align-items: center; width: 100%; }
  .artifact-heading { align-items: flex-start; flex-direction: column; }
  .remediation-card { grid-template-columns: 1fr auto; }
  .remediation-card-reason { grid-column: 1 / -1; }
  .artifact-actions { width: 100%; justify-content: space-between; }
  .artifact-browser { min-height: 700px; grid-template-columns: 1fr; grid-template-rows: 180px 1fr; }
  .file-tree { border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .view-hero h1 { font-size: 37px; }
  .run-fields { grid-template-columns: 1fr; }
  .execution-location-options { grid-template-columns: 1fr; }
  .route-heading-actions { width: 100%; align-items: stretch; flex-direction: column-reverse; }
  .execution-target-row { grid-template-columns: 28px 1fr; align-items: center; }
  .target-number { grid-row: 1 / span 5; }
  .target-operator { display: none; }
  .target-route, .target-compatibility { grid-column: 2; }
  .target-remove { grid-column: 1; grid-row: 5; }
  .omnigent-seam { align-items: flex-start; flex-direction: column; }
  .run-launch { align-items: stretch; flex-direction: column; }
  .run-queue-head { display: none; }
  .run-row { gap: 8px 12px; padding: 14px; }
  .run-row .run-runner { justify-self: start; text-align: left; }
  .benchmark-validation-phases { grid-template-columns: 1fr; }
  .benchmark-validation-current > div { align-items: flex-start; flex-direction: column; gap: 4px; }
  .profile-metrics, .benchmark-library-metrics { grid-template-columns: 1fr 1fr; }
  .profile-chart { height: 330px; }
  /* Relocated: these were left at the top level when the console shell was
     pasted back in, so they applied at every width — the sidebar sat translated
     off-canvas and .app-shell lost its grid on a 1500px desktop. Restored to
     the max-width: 620px breakpoint they were written for. */
  .candidate-workbench-editor { grid-template-columns: 1fr 1fr; }
  .candidate-workbench-name, .candidate-workbench-state { grid-column: 1 / -1; }
  .connection-pill { display: none; }
  .account-panel { width: calc(100vw - 32px); }
  .panel-header { align-items: flex-start; flex-direction: column; }
  .scan-actions .button { flex: 1; }
  .first-user-setup-overlay { padding: 12px; place-items: start center; }
  .first-user-setup { padding: 21px 17px; }
  .first-user-setup > header h1 { font-size: 19px; }
  .first-user-setup-progress { grid-template-columns: 1fr 22px 1fr; }
  .first-user-setup > footer { align-items: flex-start; flex-direction: column; }
  /* Relocated: left at the top level by the shell paste-restore, so it
     applied at every width. */
  .repo-list, .execution-route-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .panel-header { align-items: flex-start; flex-direction: column; }
  .repo-search-wrap { width: 100%; }
  .repo-search-wrap input { width: 100%; }
  .rules-grid { grid-template-columns: 1fr; }
  .parameter-grid { grid-template-columns: 1fr 1fr; }
  .parameter-grid label.wide { grid-column: 1 / -1; }
  .scan-footer { align-items: stretch; flex-direction: column; }
  .scan-actions { width: 100%; }
  .scan-actions .button { flex: 1; }
  .scan-preview small { white-space: normal; }
  .scan-progress { grid-template-columns: 1fr 38px; }
  .scan-progress-meter { grid-column: 1 / -1; grid-row: 2; }
  .run-fields { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .repo-list, .execution-route-list { grid-template-columns: 1fr; }
  .repo-list.scrollable { height: 830px; }
  #executionBenchmarkGrid.scrollable { max-height: 800px; }
  /* Relocated: left at the top level by the shell paste-restore, so it
     applied at every width. */
  .repo-list, .execution-route-list { grid-template-columns: 1fr; }
}

/* Runner status and account, moved into the restored sidebar footer. */
.sidebar-footer .runner-pill { width: 100%; justify-content: center; margin-bottom: 10px; }
.account-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--muted-2);
}
.account-row .text-button {
  background: none; border: 0; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer;
}
.account-row .text-button:hover { color: var(--text); }


/* ==================================================================
   Restored from the pre-split console (2dbaf59), which is the markup
   this shell was pasted back from. These 32 classes ship in
   index.html but had no rule at all, so whole panels rendered as bare
   text: the execution suite, the benchmark library and task detail, the
   artifact browser and the remediation queue.
   ================================================================== */

.account-menu { position: relative; }
.account-avatar-lg { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 800; }
.stepper:not(.execution-stepper) .step > div { text-align: center; }
.model-icon { color: var(--cyan); background: rgba(101,217,209,.09); }
.workspace-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; }
.workspace-grid > #screeningSection { scroll-margin-top: 24px; }
.results-section, .artifact-section, .remediation-section { margin-top: 24px; scroll-margin-top: 24px; }
.model-review-error { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; margin: 10px 22px 18px; padding: 11px 13px; border: 1px solid rgba(239,119,105,.25); border-radius: 9px; color: #e7aaa2; background: rgba(239,119,105,.055); }
.model-review-error[hidden] { display: none; }
.model-review-error::before { content: "!"; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; color: var(--red); background: rgba(239,119,105,.11); font: 700 10px var(--mono); }
.model-review-error strong, .model-review-error span { display: block; }
.model-review-error strong { color: #f0beb8; font-size: 9px; }
.model-review-error span { margin-top: 3px; color: #bd8d87; font: 8px/1.5 var(--mono); }
/* One joined pill instead of two separate bordered buttons — same idea as
   .benchmark-target-switch, since these are the toolbar's other paired control. */
.select-all-controls { display: flex; border: 1px solid #4b5852; border-radius: 7px; overflow: hidden; }
.select-all-btn { display: inline-flex; align-items: center; min-height: 43px; padding: 0 11px; border: 0; border-radius: 0; color: #aab7b0; background: #131b17; font: 600 12px var(--mono); cursor: pointer; transition: background .14s ease, color .14s ease; }
.select-all-btn + .select-all-btn { border-left: 1px solid #354039; }
.select-all-btn:hover { color: #c5d0ca; background: color-mix(in srgb,var(--accent) 5%,#131b17); }
.select-all-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.task-candidate-card { position: relative; display: grid; grid-template-columns: minmax(0,1fr); gap: 0; align-items: start; padding: 20px; overflow: visible; border: 1px solid rgba(255,255,255,.075); border-radius: 13px; background: linear-gradient(145deg,rgba(18,25,22,.96),rgba(11,16,14,.96)); transition: transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease; cursor: pointer; }
.task-candidate-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb,var(--accent) 22%,#35413b); box-shadow: 0 14px 34px rgba(0,0,0,.13); }
.task-candidate-card.selected { border-color: color-mix(in srgb,var(--accent) 45%,#35413b); background: radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent) 8%,transparent),transparent 42%),linear-gradient(145deg,rgba(18,25,22,.96),rgba(11,16,14,.96)); box-shadow: none; }
.task-candidate-score { display: none; }
.task-candidate-main { min-width: 0; }
.task-candidate-main h3 { margin: 0; color: #f1f6f2; font-size: 15px; line-height: 1.3; letter-spacing: -.012em; display: flex; align-items: center; gap: 8px; }
.task-candidate-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.task-candidate-edit-inline { padding: 0; border: none; background: none; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: #aab7b0; cursor: pointer; transition: color .14s ease; flex-shrink: 0; }
.task-candidate-edit-inline:hover { color: var(--accent); }
.task-candidate-edit-inline:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.task-candidate-edit-inline svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.task-candidate-origin { display: flex; flex-wrap: wrap; gap: 6px 15px; margin-top: 9px; color: var(--muted-2); font: 9px var(--mono); }
.task-candidate-origin > * { display: inline-flex; align-items: center; gap: 5px; }
.task-candidate-origin strong { color: #aab7b0; font-weight: 600; }
.task-candidate-ref { gap: 5px; color: #aab7b0; text-decoration: none; transition: color .14s; }
.task-candidate-ref:hover { color: #e7edea; }
.task-candidate-ref.repo { font-weight: 600; }
.task-candidate-ref.merged { color: var(--muted-2); }
.task-candidate-ref.merged:hover { color: #e7edea; }
.task-candidate-origin .gh-icon { width: 11px; height: 11px; flex: none; }
/* GitHub's own status colours so the marks read the same as on GitHub. */
.task-candidate-origin .gh-icon.merge { fill: #a371f7; }
.task-candidate-origin .gh-icon.issue { fill: #3fb950; }
/* Code, clock and author stay neutral, inheriting the repo/merged text colour. */
.task-candidate-origin .gh-icon.code, .task-candidate-origin .gh-icon.clock, .task-candidate-origin .gh-icon.author { fill: currentColor; }
.task-candidate-classification { display: flex; flex: none; flex-wrap: nowrap; align-items: center; gap: 7px; margin-top: 0; }
.task-candidate-classification > span { padding: 5px 8px; border: 1px solid color-mix(in srgb,var(--accent) 20%,var(--border-soft)); border-radius: 999px; color: color-mix(in srgb,var(--accent) 78%,white); background: color-mix(in srgb,var(--accent) 6%,transparent); font: 600 7px var(--mono); white-space: nowrap; }
.task-candidate-classification > span + span { border-color: #37423e; color: #aeb9b4; background: #18201d; }
.task-candidate-classification > span.complexity-high { border-color: rgba(223,145,139,.26); color: #dfa49d; background: rgba(223,145,139,.065); }
.task-candidate-classification > span.complexity-low { border-color: rgba(101,217,209,.2); color: #8bded7; background: rgba(101,217,209,.05); }
.task-candidate-main > p { display: -webkit-box; max-width: 780px; margin: 7px 0 0; overflow: hidden; color: #8a978f; font-size: 11px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.task-candidate-main > p code { padding: 1px 5px; border: 1px solid rgba(255,255,255,.08); border-radius: 4px; color: #8bded7; background: rgba(255,255,255,.05); font: 10px var(--mono); }
.task-candidate-metrics { display: flex; flex-wrap: wrap; gap: 0; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); }
.task-candidate-metrics > span { display: flex; align-items: baseline; gap: 5px; padding: 0 14px; }
.task-candidate-metrics > span:first-child { padding-left: 0; }
.task-candidate-metrics > span + span { border-left: 1px solid rgba(255,255,255,.08); }
.task-candidate-metrics b { color: #d3ddd7; font: 600 11px var(--mono); }
.task-candidate-metrics small { color: var(--muted-2); font: 8px var(--mono); }
.task-candidate-metrics .positive b { color: #76cfa0; }
.task-candidate-metrics .negative b { color: #df918b; }
.task-candidate-actions { min-width: 128px; display: grid; gap: 7px; align-self: center; }
/* Inline editor panel, full width beneath the card body (no longer floated to a
   phantom second column). Accent-tinted so edit mode is unmistakable. */
.task-candidate-card.editing { border-color: color-mix(in srgb,var(--accent) 30%,#35413b); }
.task-candidate-edit-inline.active { color: var(--accent); }
.task-metadata-editor { grid-column: 1 / -1; margin-top: 16px; padding: 15px 16px 16px; display: grid; gap: 12px; border: 1px solid color-mix(in srgb,var(--accent) 22%,var(--border)); border-radius: 11px; background: color-mix(in srgb,var(--accent) 3%,#0c1210); }
.task-metadata-editor-head { display: flex; align-items: center; justify-content: space-between; }
.task-metadata-editor-head > span { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font: 600 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.task-metadata-editor-head svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.task-metadata-done { padding: 6px 15px; border: 1px solid color-mix(in srgb,var(--accent) 42%,transparent); border-radius: 7px; color: #0c120a; background: var(--accent); font: 700 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: filter .14s; }
.task-metadata-done:hover { filter: brightness(1.08); }
.task-metadata-editor-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.task-metadata-editor label > span { display: block; margin: 0 0 6px 2px; color: var(--muted-2); font: 7px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.task-metadata-editor input,.task-metadata-editor select { width: 100%; height: 38px; padding: 0 11px; outline: none; border: 1px solid #303c37; border-radius: 8px; color: #dce5e0; background: #0b100e; font: 10px var(--mono); }
.task-metadata-editor input:focus,.task-metadata-editor select:focus { border-color: color-mix(in srgb,var(--accent) 46%,#303c37); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 5%,transparent); }
@media (max-width: 520px) {
  .task-candidate-card { grid-template-columns: minmax(0,1fr); }
  .task-metadata-editor-row { grid-template-columns: 1fr; }
}
.remediation-list { display: grid; gap: 9px; }
.verification-badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid rgba(242,166,90,.22); border-radius: 8px; color: #d8b185; background: rgba(242,166,90,.06); font: 8px var(--mono); }
.verification-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.code-viewer { min-width: 0; display: grid; grid-template-rows: 45px 1fr; background: #090d0f; }
.code-viewer pre { margin: 0; padding: 19px 22px 40px; overflow: auto; max-height: 650px; color: #b6c3be; font: 10px/1.72 var(--mono); tab-size: 2; }
.surface-heading { min-height: 82px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 19px 20px; border-bottom: 1px solid var(--border-soft); }
.surface-heading.compact { min-height: 74px; padding: 17px 18px; }
.surface-heading h2 { margin: 5px 0 4px; font-size: 15px; letter-spacing: -.025em; }
.surface-heading p { margin: 0; color: var(--muted-2); font-size: 8px; line-height: 1.45; }
.rules-environment-fields .execution-location-option { min-height: 38px; padding: 0 10px; border-radius: 7px; }
.execution-location-option { min-height: 51px; display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid #2a3632; border-radius: 8px; color: inherit; background: #0d1315; text-align: left; cursor: pointer; }
.execution-location-option:hover { border-color: #405149; background: #11191a; }
.execution-location-option > i { width: 7px; height: 7px; border: 1px solid #60716a; border-radius: 50%; }
.execution-location-option strong, .execution-location-option small { display: block; }
.execution-location-option strong { font-size: 9px; }
.execution-location-option small { margin-top: 3px; color: var(--muted-2); font-size: 7px; }
.execution-location-option > b { color: var(--muted-2); font: 500 7px var(--mono); }
.execution-location-option.selected { border-color: rgba(200,247,101,.38); background: rgba(200,247,101,.045); }
.execution-location-option.selected > i { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px rgba(200,247,101,.08); }
.execution-location-option.selected > b { color: var(--accent); }
.execution-location-option.unavailable { opacity: .58; }
.execution-location-option.unavailable > b { color: var(--orange); }
.model-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 5px 20px 10px; }
.model-heading strong, .model-heading span { display: block; }
.model-heading strong { font-size: 8px; }
.model-heading span { margin-top: 3px; color: var(--muted-2); font-size: 8px; }
.execution-connectivity { margin-bottom: 18px; }
.execution-target-list { display: grid; gap: 7px; padding: 0 20px 12px; }
.run-queue { min-height: 126px; }
.benchmark-task-table { min-width: 1380px; }
.table-scroll-hint { align-self: center; color: var(--muted-2); font: 8px var(--mono); white-space: nowrap; }
.benchmark-task-table td { vertical-align: top; }
.benchmark-task-table td strong, .benchmark-task-table td span { display: block; }
.benchmark-task-table td > span:not(.task-library-tag):not(.task-library-complexity):not(.task-library-status) { max-width: 270px; margin-top: 4px; overflow: hidden; color: var(--muted-2); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.benchmark-task-detail { margin-bottom: 24px; overflow: hidden; scroll-margin-top: 24px; }
.comparison-table { width: 100%; border-collapse: collapse; min-width: 850px; }
.comparison-table th { padding: 10px 14px; border-bottom: 1px solid var(--border-soft); color: var(--muted-2); font: 600 11px var(--mono); text-align: left; text-transform: uppercase; letter-spacing: .07em; }
.comparison-table td { padding: 13px 14px; border-bottom: 1px solid rgba(38,49,53,.55); color: var(--muted); font: 8px var(--mono); }
.comparison-table td strong { color: var(--text); font: 600 9px var(--sans); }
.comparison-table tr:last-child td { border-bottom: 0; }
.comparison-table .table-empty td { height: 130px; color: var(--muted-2); text-align: center; }
.github-diff { display: grid; gap: 14px; }


/* ------------------------------------------------------------------
   Second pass. The first restore keyed on whether a class was mentioned
   anywhere in the stylesheet, which counted a class as covered when only
   a descendant rule mentioned it — .execution-location-options had its
   `gap` but not its two-column grid, so Local and Cloud stacked. These are
   matched by exact selector instead.
   ------------------------------------------------------------------ */

.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #596561; box-shadow: 0 0 0 3px rgba(89,101,97,.1); }
.eyebrow span { width: 18px; height: 1px; background: currentColor; }
.card-status { display: flex; align-items: center; gap: 7px; margin-top: 4px; color: var(--muted-2); font-size: 9px; }
.card-status > span { width: 5px; height: 5px; border-radius: 50%; background: #505d59; }
.artifact-heading h2 { margin: 9px 0 5px; font-size: 24px; letter-spacing: -.04em; }
.artifact-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.benchmark-builder > div strong, .benchmark-builder > div small { display: block; }
.benchmark-builder > div strong { font-size: 11px; }
.benchmark-builder > div strong span { color: var(--accent); }
.benchmark-builder > div small { margin-top: 4px; color: var(--muted-2); font-size: 8px; }
.benchmark-builder label span { display: block; margin-bottom: 6px; color: var(--muted-2); font-size: 8px; }
.benchmark-builder input, .benchmark-builder select { width: 100%; height: 36px; padding: 0 10px; outline: none; border: 1px solid #2b3734; border-radius: 7px; color: #d8e0dd; background: #0b1012; font: 12px var(--mono); }
.benchmark-builder input:focus, .benchmark-builder select:focus { border-color: #607b5b; box-shadow: 0 0 0 3px rgba(200,247,101,.055); }
.benchmark-builder #benchmarkNameField { position: relative; }
.benchmark-builder .benchmark-name-error { position: absolute; top: calc(100% + 5px); left: 0; color: #f1aaa4; font: 600 9px var(--sans); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.benchmark-builder #benchmarkName[aria-invalid="true"] { border-color: color-mix(in srgb,var(--crit) 55%,#2b3734); }
.discovery-list { display: grid; gap: 8px; padding: 10px; }
.code-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid var(--border-soft); color: #a9b4b0; font: 9px var(--mono); }
.execution-location > div:first-child strong, .execution-location > div:first-child span { display: block; }
.execution-location > div:first-child strong { font-size: 9px; }
.execution-location > div:first-child span { margin-top: 4px; color: var(--muted-2); font-size: 7px; line-height: 1.4; }
.execution-route-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; padding: 16px 20px; }
.run-launch strong, .run-launch span { display: block; }
.run-launch strong { color: var(--cyan); font: 500 11px var(--mono); }
.run-launch span { margin-top: 3px; color: var(--muted-2); font-size: 8px; }
.comparison-table-wrap { overflow-x: auto; }

/* ==================================================================
   2026 SaaS shell and onboarding experience

   The workbench rules above preserve the mature task, execution and result
   components. This final layer gives the complete console one deliberate
   visual hierarchy.
   ================================================================== */

:root {
  --bg: #070a09;
  --bg-raised: #0b0f0d;
  --panel: #101512;
  --panel-2: #151c18;
  --panel-3: #1b241f;
  --border: #2b3730;
  --border-soft: #202a24;
  --text: #f4f8f5;
  --muted: #a2afa7;
  --muted-2: #6f7d75;
  --accent: #c9ff63;
  --accent-strong: #b8f447;
  --cyan: #74ddd1;
  --shadow: 0 30px 90px rgba(0,0,0,.42);

  /* Pro has one colour, and it is not the workspace accent. --accent flips to
     this same blue in the private environment, so a Pro badge borrowing it
     would read lime in public and blue in private — the plan appearing to
     change when only the environment did. Declared outside the workspace
     theme so switching environments cannot touch it. */
}

body {
  min-width: 320px;
  background:
    radial-gradient(900px 520px at 18% -15%, rgba(201,255,99,.07), transparent 64%),
    radial-gradient(700px 500px at 92% 12%, rgba(116,221,209,.045), transparent 62%),
    var(--bg);
  font-size: 14px;
}

button, input, select, textarea { font-family: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.sidebar button.brand { width: 100%; border: 0; background: transparent; cursor: pointer; }
.sidebar button.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.sidebar .brand-logo { display: block; width: auto; height: 34px; }
.sidebar .brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(201,255,99,.12);
}
.brand-name { font-size: 18px; font-weight: 700; }
.brand-caption { font-size: 8px; color: #77857c; letter-spacing: .14em; }
.sidebar-footer { gap: 11px; }
.sidebar-footer .runner-pill {
  min-height: 38px;
  justify-content: flex-start;
  margin: 0;
  padding: 0 11px;
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  cursor: pointer;
}
.security-stamp { padding: 12px; border-radius: 11px; background: rgba(116,221,209,.035); }
.version-row { padding: 0 3px; }
.main-content { grid-column: 2; }

.connection-pill { min-height: 36px; border-radius: 10px; }
.avatar-button { width: 38px; height: 38px; }
.content-wrap { width: 100%; padding: 42px 42px 80px; }

.panel {
  border-color: rgba(255,255,255,.075);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(18,24,20,.97), rgba(12,17,14,.97));
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 20px 60px rgba(0,0,0,.09);
}
.button {
  min-height: 41px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}
.button.primary { box-shadow: 0 9px 25px rgba(201,255,99,.10); }
.button.secondary { border-color: #35433b; background: #17201b; }
.button.compact { min-height: 34px; font-size: 11px; }
.text-button { font-size: 11px; font-weight: 700; }
.card-kicker { font-size: 9px; letter-spacing: .13em; }
.panel-header { padding: 18px 22px; }
.panel-header h2 { font-size: 16px; }
.panel-header p { font-size: 12px; }
.surface-heading { min-height: 88px; padding: 20px 22px; }
.surface-heading h2 { font-size: 17px; }
.surface-heading p { font-size: 12px; }
.connection-copy h2 { font-size: 15px; }
.connection-copy p { font-size: 12px; }
.card-status { font-size: 11px; }
.run-fields label > span, .snapshot-select > span { font-size: 10px; }
.run-fields input, .run-fields select, .snapshot-select select, .run-benchmark-field select { font-size: 11px; }

.scope-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font: 600 8px var(--mono);
  letter-spacing: .08em;
}
.scope-tag.public { color: var(--accent); border-color: rgba(201,255,99,.22); background: rgba(201,255,99,.055); }
.scope-tag.private { color: #8ab7ff; border-color: rgba(109,165,255,.3); background: rgba(109,165,255,.075); }

/* Persistent workspace context */
.workspace-context {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding: 10px 14px;
  border: 1px solid rgba(116,221,209,.14);
  border-radius: 12px;
  background: rgba(116,221,209,.025);
}
.workspace-context > div { display: flex; align-items: center; gap: 11px; }
.workspace-context strong { font-size: 12px; }
.workspace-context > span { color: var(--muted-2); font-size: 10px; }

/* Execution and results scope */
.view-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
}
.view-intro h1 { margin-top: 7px; font-size: 30px; letter-spacing: -.045em; }
.view-intro p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.scope-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}
.scope-switcher button {
  min-width: 132px;
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.scope-switcher button span { font-size: 11px; font-weight: 700; }
.scope-switcher button small { color: var(--muted-2); font-size: 8px; }
.scope-switcher button.active { color: var(--accent-ink); background: var(--accent); }
.scope-switcher button.active small { color: rgba(24,32,11,.68); }
.scope-switcher button:nth-child(2).active { color: #081613; background: var(--cyan); }
.public-execution-panel {
  overflow: hidden;
  border: 1px solid rgba(201,255,99,.13);
  border-radius: 18px;
  background:
    radial-gradient(500px 250px at 80% 0, rgba(201,255,99,.065), transparent 66%),
    linear-gradient(145deg, rgba(18,24,20,.97), rgba(10,15,12,.97));
}
.public-execution-copy { max-width: 700px; padding: 28px 28px 20px; }
.public-execution-copy h2 { margin-top: 12px; font-size: 27px; letter-spacing: -.04em; }
.public-execution-copy p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.public-benchmark-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; padding: 0 28px 28px; }
.public-benchmark-card {
  min-height: 155px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 17px;
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  color: var(--text);
  background: rgba(7,11,9,.58);
  text-align: left;
  cursor: pointer;
}
.public-benchmark-card:hover { border-color: #435148; background: rgba(255,255,255,.025); }
.public-benchmark-card.selected { border-color: rgba(201,255,99,.45); box-shadow: inset 0 0 0 1px rgba(201,255,99,.08); }
.benchmark-language { color: var(--accent); font: 600 9px var(--mono); text-transform: uppercase; }
.public-benchmark-card strong { margin-top: 6px; font-size: 13px; }
.public-benchmark-card small { color: var(--muted-2); font-size: 10px; }
.public-benchmark-card b { margin-top: auto; color: var(--muted); font-size: 9px; }
.public-benchmark-card.selected b { color: var(--accent); }
.public-run-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 28px;
  border-top: 1px solid var(--border-soft);
  background: rgba(201,255,99,.018);
}
.public-run-summary span, .public-run-summary strong, .public-run-summary small { display: block; }
.public-run-summary span { color: var(--muted-2); font: 600 9px var(--mono); text-transform: uppercase; }
.public-run-summary strong { margin-top: 4px; font-size: 13px; }
.public-run-summary small { margin-top: 3px; color: var(--muted-2); font-size: 9px; }
.execution-mock {
  overflow: hidden;
  border: 1px solid rgba(201,255,99,.17);
  border-radius: 20px;
  background: radial-gradient(700px 300px at 82% -8%,rgba(201,255,99,.07),transparent 66%),linear-gradient(145deg,rgba(17,23,19,.98),rgba(8,12,10,.99));
  box-shadow: 0 28px 90px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.025);
}
.execution-workflow { display: grid; gap: 18px; }
.execution-workflow .execution-stage { overflow: hidden; margin: 0; border-color: var(--border-soft); border-radius: 12px; background: var(--panel); box-shadow: none; }
.execution-workflow .execution-builder-section + .execution-builder-section { margin-top: 0; }
.execution-workflow .execution-builder-section > .panel-header { min-height: 72px; padding: 15px 22px; }
.execution-workflow .execution-builder-section > .panel-header > div:first-child { display: flex; align-items: center; gap: 12px; }
.execution-workflow .execution-builder-section > .panel-header .section-number { top: 0; width: 26px; height: 26px; display: grid; place-items: center; flex: none; border: 1px solid color-mix(in srgb,var(--accent) 28%,transparent); border-radius: 8px; color: var(--accent); background: color-mix(in srgb,var(--accent) 7%,transparent); font-size: 10px; }
.execution-workflow .panel-header h2 { margin: 0; font-size: 14px; letter-spacing: -.02em; }
.execution-workflow .panel-header p { margin: 4px 0 0; color: var(--muted-2); font-size: 9px; }
.execution-mock-head { min-height: 126px; display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; padding: 28px 30px 24px; border-bottom: 1px solid rgba(255,255,255,.07); }
.execution-mock-head h2 { margin-top: 13px; font-size: 25px; letter-spacing: -.04em; }
.execution-mock-head p { max-width: 700px; margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.execution-preview-badge { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 7px 9px; border: 1px solid rgba(201,255,99,.2); border-radius: 8px; color: var(--accent); background: rgba(201,255,99,.045); font: 700 8px var(--mono); letter-spacing: .1em; }
.execution-preview-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(201,255,99,.08); }
.execution-mock-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; align-items: start; }
.execution-mock-main { min-width: 0; padding: 24px; border-right: 1px solid rgba(255,255,255,.07); }
.execution-builder-section { overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 14px; background: rgba(6,10,8,.42); }
.execution-builder-section + .execution-builder-section { margin-top: 16px; }
.execution-builder-section > header { min-height: 75px; display: flex; align-items: center; gap: 13px; padding: 15px 17px; border-bottom: 1px solid rgba(255,255,255,.065); }
.execution-builder-section > header > span { width: 29px; height: 29px; display: grid; place-items: center; flex: none; border: 1px solid rgba(201,255,99,.25); border-radius: 8px; color: var(--accent); background: rgba(201,255,99,.045); font: 700 8px var(--mono); }
.execution-builder-section header h3 { font-size: 13px; }
.execution-builder-section header p { margin: 3px 0 0; color: var(--muted-2); font-size: 9px; }
.execution-mock .public-benchmark-grid { padding: 12px; gap: 9px; }
.execution-mock .public-benchmark-card { min-height: 143px; padding: 15px; border-radius: 11px; background: rgba(12,17,14,.74); transition: transform .16s ease,border-color .16s ease,background .16s ease; }
.execution-mock .public-benchmark-card:hover { transform: translateY(-1px); border-color: rgba(201,255,99,.26); }
.execution-mock .public-benchmark-card.selected { border-color: rgba(201,255,99,.55); background: radial-gradient(circle at 100% 0,rgba(201,255,99,.09),transparent 48%),rgba(14,20,15,.86); box-shadow: inset 0 0 0 1px rgba(201,255,99,.06); }
.benchmark-card-top { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.benchmark-card-top i { color: var(--muted-2); font: normal 8px var(--mono); }
.execution-mock .public-benchmark-card strong { max-width: 20ch; font-size: 12px; line-height: 1.4; }
.execution-mock .public-benchmark-card small { line-height: 1.5; }
.execution-mock .public-benchmark-card b { font: 700 8px var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.execution-builder-heading { flex-wrap: wrap; }
/* Model comparison targets reuse the repo/benchmark card (.repo-row) at a
   smaller size: same icon-mark + identity + stats-row shape, just shorter.
   Selection is the same "Select/Selected" pill the repo and benchmark cards
   use, not a checkbox — the only difference is a target grid is multi-select
   (click toggles membership) rather than single-select. The provider mark
   carries a real logo where we have art, and a plain two-letter monogram
   otherwise. */
/* One line per selected target, below the card grid: what the run will
   actually submit for it now that route/harness/effort are auto-picked
   rather than chosen per card. */
/* overflow stays visible so the harness list can hang out of the table; the
   head keeps the top corners rounded on its own. */
.execution-target-summary { margin: 10px 22px 16px; border: 1px solid rgba(255,255,255,.075); border-radius: 12px; background: rgba(6,10,8,.35); }
.execution-target-summary-head,
.execution-target-summary-row { display: grid; grid-template-columns: 26px minmax(0,1.6fr) minmax(0,1.1fr) minmax(0,1.15fr) 56px; gap: 12px; align-items: center; padding: 9px 14px; }
/* The header names three columns of controls, so it is sized to be read at a
   glance rather than squinted at: bigger than the values beneath it, brighter,
   and centred over each column. */
.execution-target-summary-head { padding-top: 11px; padding-bottom: 11px; color: var(--muted); font: 700 11px var(--mono); letter-spacing: .12em; text-align: center; text-transform: uppercase; background: rgba(255,255,255,.018); border-bottom: 1px solid rgba(255,255,255,.075); border-radius: 12px 12px 0 0; }
.execution-target-summary-row { position: relative; }
.execution-target-summary-row + .execution-target-summary-row { border-top: 1px solid rgba(255,255,255,.045); }
/* Same flat light tile as the model card the row was clicked from, so a target
   is recognisable by its mark before its name is read. */
.execution-target-mark { width: 26px; height: 26px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; color: #1b201d; background: #eef2ef; }
.execution-target-mark img { width: 100%; height: 100%; object-fit: contain; }
.execution-target-mark svg { width: 17px; height: 17px; }
.execution-target-mark span { font: 800 8px var(--mono); }
.execution-target-identity { min-width: 0; display: grid; gap: 1px; }
.execution-target-identity strong { overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
/* Where the Source column went: the route is stated, not asked for, because it
   follows the harness — but it is what gets billed, so it stays on the row. */
.execution-target-identity small { overflow: hidden; color: var(--muted-2); font: 8px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.execution-target-actions { display: flex; align-items: center; justify-content: center; }
.execution-target-actions button { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 7px; color: var(--muted-2); background: transparent; cursor: pointer; transition: color .14s ease, border-color .14s ease, background .14s ease; }
.execution-target-actions button:hover { color: var(--text); border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.04); }
.execution-target-actions button:focus-visible { outline: 0; border-color: rgba(201,255,99,.42); box-shadow: 0 0 0 3px rgba(201,255,99,.08); }
.execution-target-actions svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }

/* Harness and effort are the same control so the pair reads as one thing: a
   button carrying the current value over a listbox of the rest. Only the
   harness has a mark to carry; the effort cell uses the same shell without one
   so the two still line up. */
.execution-row-cell { position: relative; min-width: 0; display: flex; align-items: center; }
.execution-row-mark, .harness-cell-mark { width: 16px; height: 16px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 5px; color: #1b201d; background: #eef2ef; }
.execution-row-mark img, .harness-cell-mark img { width: 100%; height: 100%; object-fit: contain; }
.execution-row-mark span, .harness-cell-mark span { font: 800 7px var(--mono); }
/* Pi's mark is white ink with no backing of its own — invisible on the tile's
   light fill, so the image gets a dark square inset within it instead. */
.execution-row-mark img.harness-mark-on-dark, .harness-cell-mark img.harness-mark-on-dark { padding: 2px; border-radius: 3px; background: #0b0b0b; }
.execution-row-toggle,
.execution-row-cell.is-fixed { width: 100%; min-width: 0; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; background: #0b110e; }
.execution-row-toggle { color: var(--text); cursor: pointer; transition: border-color .14s ease, background .14s ease; }
.execution-row-toggle:hover { border-color: rgba(255,255,255,.16); background: #101714; }
.execution-row-toggle:focus-visible { outline: 0; border-color: rgba(201,255,99,.45); box-shadow: 0 0 0 3px rgba(201,255,99,.09); }
.execution-row-toggle b,
.execution-row-cell.is-fixed b { flex: 1; overflow: hidden; font: 10px var(--mono); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
/* A field with one possible value isn't a choice — plenty of models accept only
   the default effort — so it is shown as a value rather than as a control that
   does nothing when pressed. */
.execution-row-cell.is-fixed { border-color: rgba(255,255,255,.05); background: rgba(255,255,255,.015); }
.execution-row-cell.is-fixed b { color: var(--muted); }
.execution-row-toggle > i { flex: none; color: var(--muted-2); font-style: normal; font-size: 10px; line-height: 1; transition: transform .14s ease; }
.execution-row-toggle[aria-expanded="true"] > i { transform: rotate(180deg); }
.execution-row-menu { position: absolute; z-index: 40; top: calc(100% + 5px); left: 0; min-width: 100%; display: grid; gap: 1px; max-height: 262px; overflow-y: auto; padding: 5px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); box-shadow: 0 18px 44px rgba(0,0,0,.55); }
.execution-row-menu[hidden] { display: none; }
.execution-row-menu button { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 8px; border: 0; border-radius: 7px; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.execution-row-menu button:hover { background: #1b241f; }
.execution-row-menu button:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px rgba(201,255,99,.45); }
.execution-row-menu button b { flex: 1; font: 10px var(--mono); white-space: nowrap; }
/* Only shown when picking this harness would move the run to another route —
   silence means the route on the row above stays as it is. */
.execution-row-menu button em { flex: none; color: var(--muted-2); font: 8px var(--mono); font-style: normal; }
.execution-row-menu button[aria-selected="true"] { background: rgba(201,255,99,.09); }
.execution-row-menu button[aria-selected="true"] b { color: var(--accent); }
/* A harness this model can't run under stays on the list rather than
   disappearing — so a customer sees "2 of 5" instead of a shorter list they
   have no way to tell apart from "this runner only ever offered 2". */
.execution-row-menu button.is-disabled { color: var(--muted-2); cursor: not-allowed; }
.execution-row-menu button.is-disabled:hover { background: transparent; }
.execution-row-menu button.is-disabled b { color: var(--muted-2); }
.execution-row-menu button.is-disabled .execution-row-mark { opacity: .4; filter: grayscale(1); }
.execution-row-menu button.is-disabled em { color: var(--muted-2); font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .execution-row-toggle,
  .execution-row-toggle > i { transition: none; }
}
.execution-access-ready { display: inline-flex; align-items: center; gap: 6px; color: #9fb2aa; font: 7px var(--mono); white-space: nowrap; }
.execution-access-ready i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(201,255,99,.07); }
/* Same profile-then-advanced shape Task Factory uses for screening: three
   named profiles carry the common cases, and the knobs they set stay one click
   away for the run that needs a different answer. The preset cards, the toggle
   and its chevron are the Task Factory's own components — only the box around
   them is local, so the two steps of the workflow read as one product. Task
   Factory flattens these surfaces under #factoryView; the execution view keeps
   the raised treatment the rest of its panels use. */
.execution-run-policy { margin: 2px 22px 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 12px; background: rgba(6,10,8,.35); }
.execution-run-policy .screening-config { gap: 15px; padding: 16px; }
/* A run in flight freezes the two upstream stages, and Run Configuration's
   header and launch profile — `inert` already blocks the interaction, this
   just says so: a quiet fade rather than a graying-out that reads as broken
   or disabled-by-error. Every element that takes `inert` here also takes the
   fade, so an inert region can never be one that looks interactive; the
   launch row is never made inert at all (see setExecutionStagesLocked) and so
   never needs the exception it used to carry.
   The header fades with the settings it titles, the way #screeningSection's
   does on the repository page: a bright "4 Run Configuration" over a faded
   body read as a section half-frozen for no stated reason. */
#executionChooseBenchmarkStage[inert],
#executionConfigureModelsStage[inert],
#executionTargetSummary[inert],
#executionRunConfigStage > .panel-header[inert],
.execution-run-policy[inert] { opacity: .5; filter: saturate(.55); transition: opacity .25s ease, filter .25s ease; }
/* Same treatment for Task Factory: a screen, count or package in flight
   freezes repo selection whole, and freezes the screening criteria except its
   own buttons and progress meter — those are already showing the live truth.
   The count preview is not: it is last run's numbers, not this run's status,
   so it dims and undims with the rest instead of standing out untouched. */
#factoryRepoStage[inert] { opacity: .5; filter: saturate(.55); transition: opacity .25s ease, filter .25s ease; }
#screeningSection[inert] > .panel-header,
#screeningSection[inert] > .screening-config,
#screeningSection[inert] #scanPreview { opacity: .5; filter: saturate(.55); transition: opacity .25s ease, filter .25s ease; }
/* Same treatment for the Task Workbench: a package run in flight freezes the
   whole section — heading, pills and error banner included — except the
   builder's own buildBenchmark row, which is already showing "Packaging…",
   the live truth. */
#resultsSection[inert] > .workbench-panel-header,
#resultsSection[inert] > .results-controls,
#resultsSection[inert] > #modelReviewError,
#resultsSection[inert] #discoveryPanel { opacity: .5; filter: saturate(.55); transition: opacity .25s ease, filter .25s ease; }
#resultsSection[inert] #benchmarkBuilder > .benchmark-target-switch,
#resultsSection[inert] #benchmarkBuilder > #benchmarkNameField,
#resultsSection[inert] #benchmarkBuilder > #existingBenchmarkField,
#resultsSection[inert] #benchmarkBuilder > .benchmark-packaging-environment,
#resultsSection[inert] #benchmarkBuilder > .benchmark-builder-actions > .select-all-controls { opacity: .5; filter: saturate(.55); transition: opacity .25s ease, filter .25s ease; }
/* The active card's corner blob reads as a hard-edged quarter circle at this
   card size rather than as the glow it is meant to be — the same call Task
   Factory already made for it. The wash and the lit dot say "active" alone. */
.execution-run-policy .screening-preset::after { display: none; }
/* Nested in the same .candidate-advanced box Advanced Criteria uses on
   Repositories, so the border/radius/overflow-hidden that keeps the toggle
   and the panel reading as one shape comes from there — this is just the
   grid and field styling layered on top of .parameter-grid, three columns
   instead of four now that Verification is gone. border-top: 0 hands the
   top divider to the box, which is what Advanced Criteria's own parameter
   grid does against .candidate-advanced-parameters. */
.execution-advanced-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 14px 16px 16px; border-top: 0; background: rgba(9,14,16,.3); }
.execution-advanced-fields label > span { display: block; margin-bottom: 6px; color: var(--muted-2); font: 9px var(--mono); }
.execution-advanced-fields select { width: 100%; height: 34px; padding: 0 24px 0 9px; border: 1px solid rgba(255,255,255,.09); border-radius: 7px; color: #cbd5d0; background-color: #0b110e; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 8px center; background-size: 8px; font: 10px var(--mono); appearance: none; }
.execution-plan-card { position: sticky; top: 94px; display: grid; gap: 0; padding: 24px 21px; }
.execution-plan-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.execution-plan-status > span { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font: 700 7px var(--mono); letter-spacing: .09em; }
.execution-plan-status > span i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(201,255,99,.08); }
.execution-plan-status > b { padding: 4px 7px; border: 1px solid rgba(201,255,99,.18); border-radius: 6px; color: var(--accent); background: rgba(201,255,99,.045); font: 700 7px var(--mono); }
.execution-plan-title { padding: 28px 0 20px; border-bottom: 1px solid rgba(255,255,255,.07); }
.execution-plan-title > span { color: var(--muted-2); font: 700 8px var(--mono); letter-spacing: .1em; }
.execution-plan-title h3 { margin-top: 9px; font-size: 17px; line-height: 1.25; letter-spacing: -.035em; }
.execution-plan-title p { margin: 7px 0 0; color: var(--muted-2); font-size: 9px; line-height: 1.55; }
.execution-plan-equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 7px; padding: 21px 0 14px; }
.execution-plan-equation div { display: grid; gap: 2px; text-align: center; }
.execution-plan-equation strong { font: 700 22px var(--mono); }
.execution-plan-equation span { color: var(--muted-2); font: 7px var(--mono); text-transform: uppercase; }
.execution-plan-equation > b { color: #46534d; font: 400 12px var(--mono); }
.execution-plan-total { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 11px 12px; border: 1px solid rgba(201,255,99,.12); border-radius: 9px; background: rgba(201,255,99,.025); }
.execution-plan-total span { color: var(--muted); font-size: 9px; }
.execution-plan-total strong { color: var(--accent); font: 700 16px var(--mono); }
.execution-plan-details { display: grid; gap: 0; margin: 20px 0; }
.execution-plan-details div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.055); }
.execution-plan-details dt { color: var(--muted-2); font-size: 8px; }
.execution-plan-details dd { margin: 0; color: #b9c5bf; font-size: 8px; font-weight: 700; text-align: right; }
.execution-plan-details dd.included { color: var(--accent); }
.execution-plan-card > .button { width: 100%; justify-content: space-between; }
.execution-plan-card > .button span { font-size: 15px; }
.execution-plan-note { margin-top: 9px; color: var(--muted-2); font: 7px/1.5 var(--mono); text-align: center; }
.execution-launch { overflow: hidden; }
.execution-launch-body { display: flex; align-items: center; gap: 16px; justify-content: flex-end; padding: 20px 24px; border-top: 1px solid rgba(255,255,255,.055); }
/* Both status lines share one column immediately left of the button, right-
   aligned so the text ends where the button begins. They used to sit at
   opposite ends of the row — the hint flush against the far edge, the error
   below the whole panel at 9px — which is how a launch that was blocked, and
   a launch the server rejected, both came across as a button that did
   nothing. Both lines are `hidden` when they have nothing to say, which
   collapses this column to nothing and leaves the button where it sits. */
.execution-launch-status { display: grid; gap: 4px; max-width: 52ch; text-align: right; }
/* Guidance, not a failure: this says which control to go touch, so it takes
   the muted tone the rest of the console gives instructions rather than the
   red .execution-launch-error spends on a run that was actually rejected. */
.execution-launch-hint { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
/* Wide enough to hold the scope the label states — "Run Benchmark
   (12 tasks × 10 models × 5 trials)" — so ticking a task or a model
   card rewrites the text without the button resizing under the cursor.
   Tabular figures keep the digits from jittering within that width.
   336px is the longest three-digit label measured at 13px Manrope SemiBold
   plus the button's padding; still min-, not fixed, so anything past that
   grows rather than truncating what it is about to queue. */
.execution-launch .button { min-width: 336px; max-width: 100%; min-height: 42px; font-variant-numeric: tabular-nums; }
/* Blocked is a different thing from working, and it has to look like one.
   The global .button:disabled dims to 42% opacity, which on this accent green
   against this background still renders as a solid, live-looking button — a
   control the reader will keep clicking and keep being ignored by. A blocked
   launch drops the fill entirely and reads as an outline. The spinning state
   is disabled too but is not blocked, so it keeps the accent it earned. */
.execution-launch .button.primary:disabled:not([data-loading="true"]) {
  opacity: 1; color: var(--muted); border-color: rgba(255,255,255,.11);
  background: rgba(255,255,255,.035); box-shadow: none;
}
/* Working is not blocked, and must not be dimmed like it. The global
   .button:disabled fade was reading as "this control is off" on the one
   control the reader had just successfully used — so the spinner keeps full
   opacity and the accent, the way the Screen Merged PRs button does while a
   screen is in flight (.scan-action-button.loading:disabled). What it is
   waiting for dims instead: the settings above it, which really are frozen. */
.execution-launch .button.primary:disabled[data-loading="true"] { opacity: 1; cursor: default; }
.execution-launch .button[data-loading="true"]::before { content: ""; width: 11px; height: 11px; margin-right: 8px; display: inline-block; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; background: transparent; }
/* A rejected run is the one message on this panel the reader must not miss,
   and it spent it at 9px under the bottom edge of the whole section. Same
   size as the hint it shares a column with. */
.execution-launch-error { margin: 0; color: #ff8b8b; font-size: 11px; line-height: 1.45; }
.execution-run-empty { padding: 24px; border-top: 1px solid rgba(255,255,255,.055); color: var(--muted-2); font-size: 9px; text-align: center; }
.execution-run-empty .text-button { margin-left: 6px; }
/* The catalogue is empty because a command has not been run yet, so the empty
   state is that command — left-aligned and full size, not a 9px centred note,
   because it is meant to be read and copied rather than skimmed past. */
.execution-model-empty { padding: 18px; border-top: 1px solid rgba(255,255,255,.055); }
.execution-model-empty .runner-command { margin-top: 0; }
.execution-model-empty .button { justify-self: start; }
.execution-private-context { margin-bottom: 18px; }
/* Run log ----------------------------------------------------------------
   The old results page put a filter row, an empty state, a run rail and a
   full run article on screen at once and asked the customer to work out the
   relationship. This is an index that becomes a record: one thing at a time. */
.log-view, .analytics-view { grid-template-columns: minmax(0, 1fr); align-content: start; }
.log-index { display: grid; gap: 2px; }
/* The index reuses the benchmark table's frame — one bordered panel, a
   filled head band, hairline-divided rows — rather than the floating-card
   look every other index on this page moved away from. */
.log-panel { overflow: hidden; padding: 0; background: rgba(6,10,8,.25); }
.log-panel .log-index { display: grid; }
.log-head, .log-row {
  display: grid;
  /* Seven columns is the ceiling for this width: the two elastic ones carry
     the benchmark id and the result line, and everything between them is
     sized to its longest real value — a task count or an email. */
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, .65fr) minmax(0, 1.05fr) minmax(0, .9fr) minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
.log-head {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,255,255,.075);
  background: rgba(255,255,255,.018);
  color: var(--muted); font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  text-align: center;
}
.log-head > span { justify-self: stretch; text-align: center; }
.log-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.log-rows > li + li { border-top: 1px solid rgba(255,255,255,.045); }
.log-row {
  width: 100%;
  padding: 13px 14px;
  border: 0; border-radius: 0;
  background: transparent; color: var(--text);
  text-align: left; font: inherit; cursor: pointer;
  transition: background .15s ease;
}
.log-row > span { justify-self: start; text-align: left; }
.log-row:hover { background: rgba(255,255,255,.022); }
.log-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.log-when { color: var(--muted); font: 600 10.5px var(--sans); }
.log-job { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; }
/* Packaging builds a thing; execution runs a thing. Two marks, so the two
   halves of the log are separable without reading the label. */
.log-job-mark { width: 8px; height: 8px; flex: 0 0 auto; }
.log-job-mark.packaging { border-radius: 2px; background: var(--cyan); }
.log-job-mark.run { border-radius: 50%; background: var(--accent); }
.log-benchmark, .log-user { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-benchmark {
  width: 100%; max-width: 28ch;
  color: var(--text); font: 600 11.5px var(--sans);
}
.log-tasks { color: var(--text); font: 600 11.5px var(--mono); justify-self: start; }
.log-environment { color: var(--text); font: 600 10.5px var(--sans); }
.log-elapsed { color: var(--muted); font: 600 10.5px var(--mono); }
.log-user { color: var(--muted); font: 500 11px var(--sans); }
.log-status {
  justify-self: start;
  padding: 3px 8px; border-radius: 999px;
  font: 700 8.5px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); background: rgba(255,255,255,.05);
}
.log-status[data-tone="complete"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); }
.log-status[data-tone="failed"] { color: var(--crit); background: rgba(255,92,122,.1); }
.log-status[data-tone="cancelled"] { color: var(--muted); background: rgba(255,255,255,.05); }
.log-status[data-tone="active"] { color: var(--cyan); background: rgba(101,217,209,.1); }

/* Same pill, same tones, for a packaging record's own Status fact — kept as
   its own class since .log-status also names the run-log grid's cell. */
.fact-status { display: inline-block; padding: 3px 8px; border-radius: 999px; font: 700 8.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: rgba(255,255,255,.05); }
.fact-status[data-tone="complete"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); }
.fact-status[data-tone="failed"] { color: var(--crit); background: rgba(255,92,122,.1); }
.fact-status[data-tone="cancelled"] { color: var(--muted); background: rgba(255,255,255,.05); }
.fact-status[data-tone="active"] { color: var(--cyan); background: rgba(101,217,209,.1); }

.log-detail { display: grid; gap: 18px; align-content: start; }
.log-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.log-detail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.log-back {
  justify-self: start;
  min-height: 41px; display: flex; align-items: center; gap: 7px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--border-soft); border-radius: 999px;
  background: var(--bg-raised); color: var(--muted);
  font: 700 12px var(--sans); cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.log-back:hover { color: var(--text); border-color: var(--border); }
.log-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.log-detail-headline { font-size: 30px; letter-spacing: -.045em; }

.packaging-record { display: grid; gap: 22px; align-content: start; }
.packaging-record-heading { display: grid; gap: 6px; }
.packaging-record-heading .packaging-record-sub { margin: 0; }
.packaging-record-failure {
  display: grid; gap: 12px; padding: 15px 17px;
  border: 1px solid color-mix(in srgb, var(--crit) 28%, var(--border-soft));
  border-radius: 11px; background: color-mix(in srgb, var(--crit) 5%, var(--bg-raised));
}
.packaging-record-failure-copy > span { color: var(--crit); font: 700 8px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.packaging-record-failure-copy h2 { margin: 6px 0 0; color: var(--text); font-size: 13px; line-height: 1.45; }
.packaging-record-failure details { border-top: 1px solid color-mix(in srgb, var(--crit) 18%, var(--border-soft)); padding-top: 10px; }
.packaging-record-failure summary { width: max-content; color: var(--muted); font-size: 10px; font-weight: 700; cursor: pointer; }
.packaging-record-failure pre {
  max-height: 240px; margin: 11px 0 0; padding: 12px; overflow: auto;
  border-radius: 8px; color: var(--muted); background: #080c0d;
  font: 9.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
.section-block { display: grid; gap: 12px; }
/* A section-block already spaces its children by 12px, so the head's own
   14px margin stacks on top of that and opens a 26px hole under every heading.
   The record layouts drop it and let the grid gap do the spacing (the
   benchmark record does the same further down). An execution record is the
   same kind of document as a packaging one and sat a full line further from
   its own heading. */
.packaging-record .section-block > .section-head,
.run .section-block > .section-head { margin-bottom: 0; }
.packaging-record-summary .facts { margin: 0; }
.packaging-record-summary .public-packaging-progress { margin-top: 0; }
.packaging-record-progress-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.packaging-record-progress-line .public-packaging-progress { width: 100%; margin: 0; }
.packaging-record-progress-line > span { min-width: 38px; color: var(--text); font: 700 11px var(--mono); text-align: right; }
/* Analytics ---------------------------------------------------------------
   Every number is derived in the browser from the same per-job rows the run
   matrix draws, so an aggregate can never quietly disagree with its run. */
.analytics-body { position: relative; display: grid; gap: 16px; align-content: start; }
.analytics-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-left: auto; }
.analytics-grouping { display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 3px; border: 1px solid #2b3734; border-radius: 9px; background: #0c1113; }
.analytics-grouping button { height: 28px; padding: 0 9px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font: 700 10px var(--sans); cursor: pointer; white-space: nowrap; }
.analytics-grouping button:hover { color: var(--text); }
.analytics-grouping button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); }
.result-filter { position: relative; min-width: 172px; }
.result-filter > button { width: 100%; height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 0 12px; border: 1px solid #2b3734; border-radius: 8px; background: #0c1113; color: var(--text); font: 700 11px var(--sans); cursor: pointer; }
.result-filter > button:hover { border-color: #43534d; }
.result-filter > button.active { border-color: rgba(201,255,99,.35); color: var(--accent); background: rgba(201,255,99,.03); }
.result-filter > button b { min-width: 16px; height: 16px; display: grid; place-items: center; border-radius: 999px; color: var(--accent-ink); background: var(--accent); font: 700 8px var(--mono); }
.result-filter > button i { color: var(--muted-2); font-style: normal; }
.result-filter-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 240px; padding: 6px; border: 1px solid #32403b; border-radius: 12px; background: linear-gradient(150deg,#151d20,#0e1315); box-shadow: var(--shadow); animation: account-panel-in .14s ease-out; }
.result-filter-all { margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.065); border-radius: 7px 7px 0 0; }

/* Results uses the same flat table frame as Jobs: one panel, one header band,
   and hairline-divided rows, with no card title nested above the table. */
.analytics-table-panel { overflow: hidden; padding: 0; background: rgba(6,10,8,.25); }
.analytics-table-panel .standing-rows { gap: 0; border: 0; border-radius: 0; background: transparent; }
/* Ten rows remain in view; additional results scroll inside the table just as
   the Compare model catalogue does, keeping the filters and context nearby. */
.analytics-table-panel .standing-rows.scrollable { max-height: 585px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.analytics-table-panel .standing-rows.scrollable .standing-head { position: sticky; top: 0; z-index: 1; }
.analytics-table-panel .standing-rows.scrollable:focus-visible { outline: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: -1px; }
.analytics-table-panel .standing-head,
.analytics-table-panel .standing { grid-template-columns: 22px 26px minmax(136px,1.08fr) minmax(105px,.7fr) 146px 94px 94px 122px 88px; gap: 14px; }
.analytics-table-panel .analytics-group-model .standing-head,
.analytics-table-panel .analytics-group-model .standing { grid-template-columns: 22px 26px minmax(180px,1.3fr) 146px 94px 94px 122px 88px; }
.analytics-table-panel .standing-head { padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.075); background: rgba(255,255,255,.018); color: var(--muted); font-size: 12px; letter-spacing: .1em; }
.analytics-table-panel .standing-head span { white-space: nowrap; }
.analytics-table-panel .standing { padding: 13px 14px; background: transparent; }
.analytics-table-panel .standing + .standing { border-top: 1px solid rgba(255,255,255,.045); }
.analytics-table-panel .standing.is-best-value { background: rgba(13,72,20,.28); }
.analytics-model { min-width: 0; display: grid; gap: 3px; }
.analytics-model-mark { width: 26px; height: 26px; }
.analytics-model strong { overflow: hidden; color: var(--text); font: 600 13px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.analytics-model small { overflow: hidden; color: var(--muted-2); font: 600 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.analytics-resolved { min-width: 0; display: grid; grid-template-columns: minmax(64px,1fr) 38px; align-items: center; gap: 10px; }
.analytics-resolved-track { height: 8px; overflow: hidden; border-radius: 4px; background: var(--panel-3); }
.analytics-resolved-track span { display: block; height: 100%; border-radius: 4px; background: #72aef0; }
.analytics-resolved strong { color: var(--text); font: 700 13px var(--mono); font-variant-numeric: tabular-nums; }
.analytics-table-panel .standing.is-best-value .analytics-resolved-track span { background: #14b81f; }
.analytics-table-panel .standing.is-best-value .analytics-cost { color: #14c223; }
.analytics-table-panel .chart-empty { padding: 80px 20px; color: var(--muted-2); font-size: 11px; text-align: center; }
.analytics-quadrant-panel { margin-top: 18px; overflow: hidden; padding: 0; background: rgba(6,10,8,.25); }
.analytics-quadrant-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 18px; border-bottom: 1px solid rgba(255,255,255,.075); }
.analytics-quadrant-head h2 { font-size: 14px; }
.analytics-quadrant-head p { margin-top: 4px; color: var(--muted-2); font-size: 11px; }
.analytics-quadrant-key { display: flex; align-items: center; gap: 7px; color: var(--muted); font: 700 9px var(--mono); white-space: nowrap; }
.quadrant-key-attractive { width: 13px; height: 13px; border: 1px solid rgba(116,221,118,.35); border-radius: 3px; background: rgba(116,221,118,.14); }
.analytics-quadrant-key i { width: 19px; border-top: 2px dotted var(--muted); }
.analytics-quadrant-scroll { overflow-x: auto; }
.analytics-quadrant { display: block; width: 100%; min-width: 720px; height: auto; }
.analytics-quadrant-grid line { stroke: rgba(255,255,255,.075); stroke-width: 1; }
.analytics-quadrant-attractive { fill: rgba(116,221,118,.1); }
.analytics-quadrant-divider { stroke: rgba(201,255,99,.24); stroke-width: 1; stroke-dasharray: 3 5; }
.analytics-quadrant-axis text { fill: var(--muted-2); font: 10px var(--mono); }
.analytics-quadrant-axis-title { fill: var(--muted); font: 700 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.analytics-pareto-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 2 6; opacity: .8; }
.analytics-quadrant-point circle { fill: #72aef0; stroke: #101614; stroke-width: 2; }
.analytics-quadrant-point text { fill: var(--text); font: 600 10px var(--sans); paint-order: stroke; stroke: #0d1210; stroke-width: 4px; stroke-linejoin: round; }
.analytics-quadrant-point:hover circle { fill: var(--accent); r: 7px; }
@media (max-width: 1040px) {
  .analytics-table-panel { overflow-x: auto; }
  .analytics-table-panel .standing-rows { min-width: 880px; }
  .analytics-table-panel .standing-head { display: grid; }
  .analytics-quadrant-head { align-items: flex-start; flex-direction: column; }
}

.modal { border-radius: 20px; }
.modal h2 { font-size: 24px; }
.modal > p { font-size: 12px; }
.credential-provider-list strong { font-size: 11px; }
.credential-provider-list small, .runner-command > span, .runner-command > small { font-size: 9px; }

@media (max-width: 1060px) {
  .execution-mock-layout { grid-template-columns: 1fr; }
  .execution-mock-main { border-right: 0; }
  .execution-plan-card { position: static; border-top: 1px solid rgba(255,255,255,.07); }
  .execution-plan-title { padding-top: 20px; }
  .execution-plan-equation { max-width: 420px; }
  .public-benchmark-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .content-wrap { padding: 32px 22px 64px; }
  .view-intro { align-items: flex-start; flex-direction: column; }
  .analytics-controls { width: 100%; justify-content: stretch; margin-left: 0; }
  .analytics-grouping { flex: 1 1 100%; justify-content: stretch; }
  .analytics-grouping button { flex: 1; }
  .result-filter { min-width: 0; flex: 1 1 172px; }
  .result-filter > button { width: 100%; justify-content: space-between; }
  /* The log stops being a table and becomes stacked cards: eight columns in
     360px would truncate every one of them into uselessness. */
  .log-head { display: none; }
  .log-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .log-when { grid-row: 1; grid-column: 2; justify-self: end; }
  .log-job { grid-row: 1; grid-column: 1; }
  .log-benchmark { grid-row: 2; grid-column: 1 / -1; }
  .log-status { grid-row: 3; grid-column: 2; justify-self: end; }
  /* Who and how big share the last line, in that order — the header that
     named them is gone, so each carries its own label instead. */
  .log-user { grid-row: 4; grid-column: 1; }
  .log-tasks { grid-row: 4; grid-column: 2; justify-self: end; }
  .log-tasks::after { content: " tasks"; color: var(--muted-2); }
  .log-environment { grid-row: 5; grid-column: 1; }
  .log-elapsed { grid-row: 5; grid-column: 2; justify-self: end; }
  .bar-row { grid-template-columns: minmax(0, 1fr) 56px; gap: 4px 10px; }
  .bar-label { grid-column: 1; }
  .bar-value { grid-column: 2; grid-row: 1; }
  .bar-track { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .content-wrap { padding: 26px 14px 52px; }
  .execution-mock-head { min-height: 0; align-items: flex-start; flex-direction: column; padding: 21px 18px; }
  .execution-mock-main { padding: 12px; }
  .execution-mock .public-benchmark-grid { grid-template-columns: 1fr; }
  .execution-advanced-fields { grid-template-columns: 1fr 1fr; }
  /* The run button holds a 336px floor, so it and the hint stop fitting on
     one line here — the hint stacks above it rather than squeezing it. */
  .execution-launch-body { padding: 16px; align-items: stretch; flex-direction: column; gap: 12px; }
  .execution-launch-hint { margin: 0; max-width: none; }
  .workspace-context { align-items: flex-start; flex-direction: column; }
  .workspace-context > div { align-items: flex-start; flex-direction: column; }
  .scope-switcher { width: 100%; }
  .scope-switcher button { min-width: 0; }
  .public-execution-copy { padding: 21px 18px 17px; }
  .public-benchmark-grid { padding: 0 18px 18px; }
  .public-run-summary { align-items: stretch; flex-direction: column; padding: 18px; }
  .auth-card { --auth-card-top: 26px; padding: var(--auth-card-top) 22px; }
  .public-packaging-modal { padding: 24px 18px; }
}

/* Base rules whose only survivor was the breakpoint override, so the
   element was styled at narrow widths and unstyled at wide ones. */
.content-wrap { width: 100%; margin: 0 auto; padding: 50px 44px 32px; }
.artifact-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.benchmark-builder { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px; }
.benchmark-builder .benchmark-target-switch { flex: none; }
.benchmark-builder #benchmarkNameField, .benchmark-builder #existingBenchmarkField { flex: 0 0 320px; min-width: 320px; }
/* The select-all pair and Package button are the toolbar's "act on the list"
   group — kept together and pushed to the row's right edge, so a narrow
   viewport wraps them as one unit rather than splitting the button off alone. */
.benchmark-builder-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* Full width on its own row: the builder is a wrapping flex line, and a note
   that shares a row with the name field reads as that field's error. */
.packaging-runner-note {
  flex-basis: 100%; display: flex; align-items: center; gap: 8px; margin: 2px 0 0;
  color: var(--muted); font: 10px var(--sans); line-height: 1.6;
}
.packaging-runner-note-action {
  padding: 0; border: 0; background: none; color: var(--accent);
  font: inherit; cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.packaging-runner-note-action:hover { border-bottom-color: var(--accent); }
.packaging-runner-note-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Toolbar row, not a form: labels sit inline as mono captions rather than
   stacked above their control, so the whole strip holds to one line — 43px,
   the same line-height Screen/Preview set two rows up, so New/Existing,
   Name and the action buttons all read as one continuous row of controls. */
.benchmark-builder label { display: flex; align-items: center; gap: 8px; }
.benchmark-builder label span { flex: none; margin: 0; color: var(--muted-2); font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.benchmark-builder input, .benchmark-builder select { height: 43px; }
/* Same trigger-plus-panel shape as the Provider filter on Compare
   (.model-route-filter > button / -panel) — a dark chip that opens a custom
   dark panel, instead of a plain form select handing the open state to the
   browser's own list. No checkboxes and no provider marks: this picks one
   benchmark, not a set of routes, so a check on the chosen row is the whole
   selection state. The real <select> stays in the markup, visually hidden
   (.sr) — it is still what packaging reads at submit time. */
.existing-benchmark-field { position: relative; }
.existing-benchmark-toggle {
  width: 100%; height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 12px; border: 1px solid #2b3734; border-radius: 7px; outline: none;
  color: var(--text); background: #0c1113; font: 700 9px var(--sans); cursor: pointer;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.existing-benchmark-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.existing-benchmark-toggle:hover { border-color: #43534d; }
.existing-benchmark-toggle[aria-expanded="true"] { border-color: rgba(201,255,99,.35); color: var(--accent); background: rgba(201,255,99,.03); }
.existing-benchmark-toggle i { flex: none; color: var(--muted-2); font-style: normal; transition: transform .14s ease, color .14s ease; }
.existing-benchmark-toggle[aria-expanded="true"] i { color: var(--accent); transform: rotate(180deg); }
.existing-benchmark-panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  max-height: 240px; overflow-y: auto; padding: 6px;
  border: 1px solid #32403b; border-radius: 12px;
  background: linear-gradient(150deg,#151d20,#0e1315); box-shadow: var(--shadow);
  animation: account-panel-in .14s ease-out;
}
.existing-benchmark-row {
  width: 100%; display: flex; align-items: center; gap: 9px;
  min-height: 34px; padding: 0 9px; border: 0; border-radius: 7px;
  color: var(--text); background: transparent; font: 500 11px var(--mono); text-align: left; cursor: pointer;
}
.existing-benchmark-row:hover { background: #131a1c; }
.existing-benchmark-row svg { flex: none; width: 12px; height: 12px; opacity: 0; stroke: var(--accent); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.existing-benchmark-row.selected svg { opacity: 1; }
.existing-benchmark-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.existing-benchmark-row.selected span { color: var(--accent); }
.existing-benchmark-row b { flex: none; color: var(--muted-2); font: 700 8px var(--mono); }
.existing-benchmark-empty { padding: 12px 8px; color: var(--muted-2); font-size: 10px; text-align: center; }
.benchmark-packaging-environment { display: flex; align-items: center; gap: 8px; }
.benchmark-packaging-environment > span { margin: 0; color: var(--muted-2); font: 600 8px var(--mono); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.benchmark-packaging-environment .execution-location-options { gap: 5px; }
.benchmark-packaging-environment .execution-location-option { min-height: 32px; padding: 0 9px; border-radius: 7px; }
.benchmark-target-switch { height: 43px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border: 1px solid #2b3734; border-radius: 9px; background: #0b1012; }
.benchmark-target-switch button { border: 0; border-radius: 6px; color: var(--muted-2); background: transparent; font: 600 12px var(--mono); cursor: pointer; transition: color .14s ease,background .14s ease,box-shadow .14s ease; }
.benchmark-target-switch button:hover:not(:disabled) { color: var(--text); }
.benchmark-target-switch button.active { color: var(--accent); background: color-mix(in srgb,var(--accent) 8%,#131a17); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent); }
.benchmark-target-switch button:disabled { opacity: .35; cursor: not-allowed; }
/* buildBenchmark disables itself the moment packaging starts (same as the
   Screen/Preview buttons above it) — the global .button:disabled dimming
   would otherwise bury "Packaging…", the one piece of live status this
   button carries while the rest of the builder is greyed out around it. */
#buildBenchmark.loading:disabled { opacity: 1; cursor: default; }
/* Same footprint as the Screen/Preview buttons directly above this row, so
   the two rows of action buttons read as one height, not two. */
#buildBenchmark { min-height: 43px; gap: 8px; padding: 0 20px; }
/* Reuses the scan buttons' spinner glyph/animation so packaging reads the
   same "working" cue Screening already established; the default package
   glyph steps aside while it spins, the same swap Screen/Preview do. */
#buildBenchmark.loading .scan-action-default { display: none; }
#buildBenchmark.loading .scan-action-spinner { display: block; }
/* Select all / Deselect all get the same icon-plus-label treatment and a
   wider footprint, so all three actions on this row read as one family. */
.select-all-btn { padding: 0 16px; gap: 7px; }
.select-all-btn .scan-action-icon { width: 15px; height: 15px; }
.select-all-btn .scan-action-icon svg { width: 11px; }
.artifact-actions { display: flex; align-items: center; gap: 10px; }
.artifact-browser { min-height: 570px; display: grid; grid-template-columns: 280px minmax(0,1fr); overflow: hidden; }
.file-tree { padding: 12px; border-right: 1px solid var(--border-soft); background: #0d1214; overflow: auto; }
.execution-location { display: grid; grid-template-columns: minmax(150px,.55fr) minmax(0,1.45fr); gap: 18px; align-items: center; margin: 0 20px 16px; padding: 13px 14px; border: 1px solid var(--border-soft); border-radius: 10px; background: rgba(9,14,16,.58); }
.execution-location-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.route-heading-actions { display: flex; align-items: center; gap: 10px; }
.run-launch { min-height: 73px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--border-soft); background: rgba(101,217,209,.025); }
.benchmark-task-detail-head { display: flex; justify-content: space-between; gap: 24px; padding: 20px; border-bottom: 1px solid var(--border-soft); }

/* Final shell precedence. The legacy base-recovery block immediately above
   intentionally remains for the older workbench components, but the console
   shell and its responsive padding belong to the current design system. */
.content-wrap { width: 100%; padding: 42px 42px 80px; }

@media (max-width: 860px) {
  .content-wrap { padding: 32px 22px 64px; }
}

@media (max-width: 620px) {
  .content-wrap { padding: 26px 14px 52px; }
}
/* Benchmark library ------------------------------------------------------
   An index that becomes a record, in the run log's grammar: a benchmark is
   an operational object you pick from, not a thing to be introduced. Eleven
   near-identically-named evidence sets behind a <select> is what this
   replaced — and a list with no rows had nowhere to put a delete.

   The library opens on the benchmarks, not on their tasks. A flat task table
   above the list answered a question nobody arrives with — the page is
   entered to pick an evidence set, and it is entered that way from the run
   log too, so both routes now land on the same list. Tasks are one level
   down: inside a record, or in the queue behind the switch.

   Colour discipline, which is most of the redesign. Everything that used to
   be tinted decoration — the hero mark, accent eyebrows, the task index
   badge, the count pill, the card's accent spine — is now --muted-2. Colour
   is spent on outcomes only: the attempt chips (pass/fail/error), the access
   pill, and the readiness bar, which is the same ready/review pair the row
   already states in words.

   Typographic rule, held throughout: what the runner minted is mono (ids,
   counts, repositories, timestamps); what a person wrote is sans (names,
   titles, prose). */
.benchmark-view { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.bench-index, .bench-record { display: grid; gap: 18px; align-content: start; }
.bench-sets { display: grid; gap: 14px; align-content: start; }
.bench-lifecycle-controls { display: flex; flex: 0 0 auto; align-items: center; gap: 14px; }
.bench-scope { display: grid; grid-template-columns: auto minmax(170px, 230px); align-items: center; gap: 8px; }
.bench-scope > span { color: var(--muted-2); font: 600 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.bench-scope select {
  height: 34px; padding: 0 30px 0 10px; border: 1px solid var(--border-soft); border-radius: 9px;
  appearance: none; color: var(--text); background-color: var(--bg-raised); background-image: var(--chevron);
  background-repeat: no-repeat; background-position: right 10px center; background-size: 9px 9px; font: 500 9px var(--mono);
}
.bench-lifecycle { display: grid; gap: 12px; }
.task-status-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.task-status-filters button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 31px;
  padding: 0 10px; border: 1px solid var(--border-soft); border-radius: 999px;
  color: var(--muted); background: transparent; font: 600 8.5px var(--mono); cursor: pointer;
}
.task-status-filters button span { color: var(--muted-2); font-weight: 500; }
.task-status-filters button:hover { color: var(--text); background: rgba(255,255,255,.025); }
.task-status-filters button.active { color: var(--text); border-color: color-mix(in srgb, var(--accent) 34%, var(--border-soft)); background: var(--bg-raised); }
.task-lifecycle-table { display: grid; gap: 3px; }
.task-lifecycle-head, .task-lifecycle-row {
  display: grid; grid-template-columns: minmax(180px,1.15fr) 102px minmax(220px,1.35fr) minmax(130px,.75fr) 72px 92px;
  gap: 12px; align-items: center;
}
.task-lifecycle-head { padding: 0 12px 6px; }
.task-lifecycle-head span { color: var(--muted-2); font: 500 8px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.task-lifecycle-rows { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.task-lifecycle-row { min-width: 0; padding: 12px; border: 1px solid transparent; border-radius: 10px; background: var(--bg-raised); }
.task-lifecycle-row:hover { border-color: var(--border-soft); background: var(--panel); }
/* The open review panel sits below the whole table, so the row it belongs to
   has to say so — otherwise five rows and one detail leave the reader counting.
   The spine matches the one on the panel's verdict. */
.task-lifecycle-row[data-selected="true"] { border-color: var(--border); background: var(--panel-2); box-shadow: inset 3px 0 0 #e3bd62; }
/* One quiet action per row. Four filled buttons in a column read as a wall of
   chrome and drown the single Open that is a different kind of act. */
.task-lifecycle-action .button.secondary { border-color: var(--border-soft); background: transparent; color: var(--muted); }
.task-lifecycle-action .button.secondary:hover { border-color: var(--border); background: var(--panel-2); color: var(--text); }
.task-lifecycle-row[data-selected="true"] .task-lifecycle-action .button.secondary { border-color: var(--border); background: var(--panel-3); color: var(--text); }
.task-lifecycle-name, .task-lifecycle-reason, .task-lifecycle-benchmark { min-width: 0; }
.task-lifecycle-name strong { display: block; overflow: hidden; font: 650 11px var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.task-lifecycle-name small { display: block; margin-top: 4px; overflow: hidden; color: var(--muted-2); font: 500 8.5px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.task-lifecycle-status { justify-self: start; padding: 4px 7px; border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.05); font: 700 7.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.task-lifecycle-status[data-status="published"] { color: var(--pass); background: color-mix(in srgb, var(--pass) 12%, transparent); }
.task-lifecycle-status[data-status="quarantined"] { color: #e3bd62; background: rgba(227,189,98,.1); }
.task-lifecycle-status[data-status="packaging_error"] { color: var(--crit); background: color-mix(in srgb, var(--crit) 11%, transparent); }
.task-lifecycle-reason { overflow: hidden; color: var(--muted); font-size: 9.5px; line-height: 1.45; text-overflow: ellipsis; }
.task-lifecycle-benchmark, .task-lifecycle-updated { overflow: hidden; color: var(--muted-2); font: 500 8.5px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.task-lifecycle-action { display: flex; justify-content: flex-end; }
/* The spine on the verdict carries the state now, so the frame is quiet — an
   amber outline round the whole panel made every open review look like an
   alert regardless of what it said. */
.task-attention-detail { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-raised); scroll-margin-top: 20px; }
.task-attention-detail > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 20px; border-bottom: 1px solid var(--border-soft); }
.task-attention-detail h3 { margin: 6px 0 0; font-size: 15px; }
.task-attention-detail header p { margin: 5px 0 0; color: var(--muted-2); font: 8.5px var(--mono); }
.task-attention-detail-body { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-soft); }
.task-attention-detail-body > div { padding: 17px 20px; background: var(--bg-raised); }
.task-attention-detail-body span { color: var(--muted-2); font: 600 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.task-attention-detail-body p { margin: 8px 0 0; color: var(--text); font-size: 10px; line-height: 1.55; }

/* The verdict is one sentence and reads as one: a status spine carries the
   state so the panel border does not have to be amber all the way round. */
.task-review-root-cause > span { display: block; padding: 16px 20px 0; color: var(--muted-2); font: 600 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.task-review-verdict {
  margin: 8px 0 0; padding: 10px 20px 13px 17px;
  border-left: 3px solid #e3bd62;
  color: var(--text); font-size: 12.5px; line-height: 1.45; letter-spacing: -.01em;
}
.task-attention-detail[data-review="excluded"] .task-review-verdict { border-left-color: var(--muted-2); }
.task-attention-detail[data-review="packaging_error"] .task-review-verdict { border-left-color: var(--crit); }

/* The signature: the two GitHub objects the task is generated from, with the
   disagreement between them. Mono throughout — every value here is a reference
   the runner minted or GitHub owns, never prose. */
.task-review-sources {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 10px;
  padding: 0 20px 16px;
}
.task-review-sources[hidden] { display: none; }
.task-review-source {
  display: grid; align-content: start; gap: 7px;
  padding: 13px 14px; border: 1px solid var(--border-soft); border-radius: 9px;
  background: var(--panel); text-align: left; justify-items: start;
}
.task-review-source-role { color: var(--muted-2); font: 600 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.task-review-source a,
.task-review-source > span:not([class]) {
  display: inline-flex; align-items: center; gap: 6px;
  justify-self: start; text-align: left;
  color: var(--text); font: 600 10.5px var(--mono); text-decoration: none;
}
.task-review-source a:hover { color: var(--accent); }
.task-review-source a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.task-review-source a svg,
.task-review-source > span:not([class]) svg { width: 12px; height: 12px; flex: none; color: #eef2ef; fill: #eef2ef; opacity: 1; }
.task-review-source-note { color: var(--muted); font-size: 9px; line-height: 1.4; }
.task-review-source-missing { color: #e3bd62; font: 600 10.5px var(--mono); font-style: normal; }
.task-review-source[data-missing] { border-style: dashed; border-color: rgba(227,189,98,.3); background: rgba(227,189,98,.03); }
/* Reads as the relation it is, not as an ornament: it is the failure. */
.task-review-source-relation {
  display: grid; place-items: center; align-self: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(227,189,98,.28); background: rgba(227,189,98,.06);
  color: #e3bd62; font: 600 12px var(--mono);
}

/* One line per failed gate, which is what the quality report always was before
   it was joined into a paragraph. The rule down the left ties the stack to the
   verdict's spine above it without repeating its colour on every row. */
.task-review-findings {
  margin: 0; padding: 0 20px 18px; list-style: none;
  display: grid; gap: 7px;
}
.task-review-findings[hidden] { display: none; }
.task-review-findings li {
  position: relative; padding-left: 15px;
  color: var(--muted); font-size: 10px; line-height: 1.55;
}
.task-review-findings li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(227,189,98,.5);
}

/* Where the work happens. Labelled by destination rather than by sequence:
   "Next" described the panel's own order, "Fix on GitHub" describes the place
   the reader has to go, which is the one thing this block exists to say. */
.task-review-fix {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline;
  padding: 15px 20px; border-top: 1px solid var(--border-soft); background: var(--bg-raised);
}
/* min-width, so the guidance keeps the same left edge whether the label reads
   "Fix on GitHub", "Set aside" or "Try again". */
.task-review-fix > span { min-width: 74px; color: var(--muted-2); font: 600 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.task-review-fix p { margin: 0; color: var(--text); font-size: 11px; line-height: 1.55; }
/* Why the fix is upstream, sized as the footnote it is rather than as a band
   of its own — it qualifies the line above, it isn't a section. */
.task-review-fix .task-review-fix-note { margin-top: 6px; color: var(--muted); font-size: 9px; line-height: 1.5; }
/* Same right-aligned action bar and primary/secondary rhythm as the Screen /
   Package controls: supporting actions lead into the filled next step. */
.task-attention-detail footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border-soft); }
.task-review-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.task-review-action { min-height: 43px; padding-inline: 16px; border-radius: 11px; }
.task-review-exclude:hover:not(:disabled) { border-color: color-mix(in srgb,var(--crit) 42%,#35433b); color: #f1aaa4; background: color-mix(in srgb,var(--crit) 8%,#17201b); }
.task-review-link {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--muted); font: 500 9.5px var(--sans); letter-spacing: .01em;
  text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px;
}
.task-review-link:hover { color: var(--text); text-decoration-color: currentColor; }
.task-review-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.task-review-link[disabled] { cursor: default; opacity: .5; text-decoration: none; }
/* Status and Close travel together on the queue panel's header. */
.task-review-head-actions { display: flex; flex: none; align-items: center; gap: 10px; }

/* One column template for the head and every row, declared once so the two
   cannot drift apart. The elastic columns carry the name and the source
   repositories; everything between is sized to its longest real value.

   The shell is Run Configuration's: one bordered card, a filled header band
   inside it, and rows divided by hairlines rather than floating as separate
   tiles. Both surfaces answer "what is in this list, column by column", so
   reading one should teach you the other. Alignment stays left here — Run
   Configuration centres its head over pickers, but these columns hold values
   that read from the left, and a centred label over a left-aligned value
   points at nothing. */
.bench-table {
  /* Every floor is the column's own longest real value; the weights then say
     which columns are worth widening past it. Readiness and Status hold values
     of a known length — "128 ready 14 review", a status label — so they take
     almost none of the slack. The name and the repository are the two that can
     be arbitrarily long, so they take most of it.

     Status's floor is 112px, which holds "UNAVAILABLE" — now the longest label
     the pill can carry, since every status was cut to a single word. It was
     160px when that label read "Environment unavailable"; the 48px this
     returns goes to the name and the repository, which are the two columns
     that can be arbitrarily long. */
  --bench-cols: minmax(180px, 1.5fr) minmax(112px, .3fr) minmax(136px, .2fr) minmax(136px, 1fr) minmax(88px, .3fr) minmax(120px, .5fr);
  display: grid; gap: 0;
}
/* The list is the panel's whole body, so it breaks out of .panel's own
   18px 20px padding: a filled head band that stopped 20px short of the card
   edge would read as a floating strip, and the last row should meet the card's
   bottom the way Run Configuration's does. overflow clips both to the radius. */
.bench-panel { overflow: hidden; padding-bottom: 0; }
.bench-index-panel { padding: 0; background: rgba(6,10,8,.25); }
/* The head band's own fill and top edge separate the heading from the list, so
   the panel-header's inset divider would be a second, shorter rule stacked a
   few pixels above a full-width one. */
.bench-panel .panel-header { border-bottom: 0; }
.bench-panel .bench-table { margin: 0 -20px; background: rgba(6,10,8,.25); }
.bench-index-panel .bench-table { margin: 0; }
.bench-head, .bench-item { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
/* Run Configuration's head, copied: same fill, same rule beneath it, same
   centred mono caps. It centres MODEL over a left-aligned model name too — the
   head labels the column, not the value's edge. */
.bench-head {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,255,255,.075);
  background: rgba(255,255,255,.018);
  text-align: center;
}
/* Column gap, head label and row rhythm are the Jobs index's, to the pixel —
   the two tables sit one nav item apart and are read the same way, so the
   type scale is shared rather than each surface picking its own. */
.bench-head-cells, .bench-row-cells { display: grid; grid-template-columns: var(--bench-cols); gap: 16px; align-items: center; }
.bench-head-cells > span { color: var(--muted); font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.bench-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.bench-item {
  border: 0; border-radius: 0;
  background: transparent;
  transition: background .15s ease;
}
.bench-item + .bench-item { border-top: 1px solid rgba(255,255,255,.045); }
.bench-item:hover { background: rgba(255,255,255,.022); }
.bench-row {
  min-width: 0; width: 100%;
  padding: 13px 14px; border: 0; border-radius: 0;
  background: transparent; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.bench-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.bench-name { min-width: 0; }
/* The row's subject, at the size the Jobs index sets its job name. */
.bench-name strong { display: block; overflow: hidden; font: 700 12.5px var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.bench-num { color: var(--text); font: 600 11.5px var(--mono); justify-self: start; font-variant-numeric: tabular-nums; }
/* A counted value, so it takes the Jobs index's mono figure size — the same
   one Tasks is set in there. */
.bench-membership { display: grid; gap: 6px; justify-self: stretch; min-width: 0; font: 600 11.5px var(--mono); }
.bench-membership-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.bench-membership strong { color: var(--pass); font-weight: 600; white-space: nowrap; }
.bench-membership small { color: #e3bd62; font: inherit; white-space: nowrap; }
/* Only the Ready subset can be executed, so the proportion is the fact the
   row is scanned for. Two hairline segments in the colours these two states
   already own everywhere else — no new colour, one fewer division to do. */
.bench-readiness-bar { display: flex; gap: 1px; height: 3px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.06); }
.bench-readiness-bar i[data-segment="ready"] { background: var(--pass); }
.bench-readiness-bar i[data-segment="review"] { background: #e3bd62; }
/* Two different kinds of cell, so they no longer share one declaration: the
   repository is an identifier, set like the Jobs index's Benchmark column,
   and the date is a timestamp, set like its When column. */
.bench-repos, .bench-when { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bench-repos { color: var(--text); font: 600 11.5px var(--sans); }
.bench-when { color: var(--muted); font: 600 10.5px var(--sans); }
/* The Jobs index's status pill, exactly — same padding, same 8.5px mono
   caps — so a state chip reads the same on either surface. */
.bench-access {
  justify-self: start;
  padding: 3px 8px; border-radius: 999px;
  color: var(--muted); background: rgba(255,255,255,.05);
  font: 700 8.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.bench-access[data-access="public"] { color: var(--cyan); background: rgba(101,217,209,.1); }
.bench-access[data-access="private"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); }
/* Same pill as Access, one per lifecycle state. Created stays the base
   neutral tone — it is the state every benchmark starts in, not an
   exception worth colouring — while Tested and Archived get their own. */
.bench-status {
  justify-self: start;
  padding: 3px 8px; border-radius: 999px;
  color: var(--muted); background: rgba(255,255,255,.05);
  font: 700 8.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.bench-status[data-status="tested"] { color: var(--pass); background: rgba(79,201,138,.1); }
.bench-status[data-status="archived"] { color: var(--muted-2); background: rgba(255,255,255,.03); }
/* The three states that stop a benchmark being run used to fall through to
   the same neutral tone as Created, so a library row that could not be run
   looked exactly like a fresh one. Tones match the environment bar exactly —
   a benchmark cannot read as merely waiting in one place and critical in the
   other. Preparation required stays uncoloured: nothing has gone wrong, it
   is simply a build nobody has asked for yet, so it earns an outline rather
   than a colour the palette reserves for outcomes. */
.bench-status[data-status="preparing"] { color: var(--muted); background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.bench-status[data-status="building"] { color: var(--cyan); background: rgba(101,217,209,.12); }
.bench-status[data-status="unavailable"] { color: var(--warn); background: rgba(240,196,25,.12); }

/* The environment bar, and it has exactly one home: the head of a benchmark
   record. That is the page for one benchmark, reached deliberately, where the
   build is an action you can take on its own — which is what earns it the room
   to explain itself. Compare has no version of it in either place it was
   tried: not on the cards, where a dozen copies of the same sentences became
   the view, and not at the launch step, where the button's own label already
   says what the click does.
   --env-tone is set once per state and every part of the bar reads it. */
.env-bar {
  --env-tone: var(--muted);
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 13px;
  margin: 0 0 16px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--env-tone) 26%, transparent);
  border-radius: 11px; background: color-mix(in srgb, var(--env-tone) 8%, transparent);
}
.env-bar .button { flex: none; padding-inline: 10px; white-space: nowrap; }
/* No working tone: a build in flight is reported by the launch button's own
   label, and draws no bar at all. */
.env-bar[data-env-state="unavailable"] { --env-tone: var(--warn); }
.env-bar[data-env-state="failed"] { --env-tone: var(--crit); }
.env-bar-glyph {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: color-mix(in srgb, var(--env-tone) 16%, transparent);
  color: var(--env-tone); font: 700 10px var(--mono);
}
.env-bar-text { min-width: 0; }
.env-bar-text strong { display: block; color: var(--env-tone); font: 700 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.env-bar-text small { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.env-bar.wide .env-bar-glyph { width: 26px; height: 26px; font-size: 12px; }
/* The glyphs are aria-hidden, so their meaning has to reach a screen reader
   some other way: eight identical "check" announcements are not a summary. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* One glyph per attempt, in the task table where a row is a single task and
   the strip stays short. The chips are the standard 20px the Jobs run matrix
   uses — the 15px override that used to sit here never applied, because .chip
   fixes its own flex-basis and this is a flex row. overflow clips the tail
   rather than letting it spill past the card's edge. */
.bench-attempts { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
/* The words beside the glyphs take the Jobs index's small-meta size. */
.bench-attempts i { color: var(--muted-2); font: 500 10.5px var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.bench-attempts b { color: var(--muted-2); font: 500 10.5px var(--mono); }
.bench-attempts-cell { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bench-attempts-cell > .bench-attempts { flex: 1 1 auto; }
.bench-task-edit { flex: 0 0 auto; }
/* The library index asks the shorter question — not how many times a benchmark
   was run, but when last, and how that run ended. One outcome glyph and one
   date fit a column a third the width the strip needed, and the date is the
   part that says whether the evidence is still current. The date matches
   Packaged beside it; the glyph is the row's only colour. */
.bench-last-run { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; }
.bench-last-run > span { color: var(--muted); font: 600 10.5px var(--sans); white-space: nowrap; }
.bench-last-run i { color: var(--muted-2); font: 500 10.5px var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
/* Archive and Delete live only in the record header now — one benchmark on
   screen there, so nothing to disambiguate and nothing to hide. */
/* Plain .button.small, the same filled control the Jobs record puts in this
   bar — background included, or the hover would snap while every other button
   in the row eases. Delete keeps its own red-on-hover on top of it. */
.bench-delete, .bench-archive-toggle { transition: color .15s ease, border-color .15s ease, background 140ms ease; }
.bench-delete:hover { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, transparent); }
.bench-confirm {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.045);
}
.bench-confirm p { margin: 0; max-width: 640px; color: var(--muted); font-size: 10.5px; line-height: 1.5; }
.bench-confirm-actions { display: flex; gap: 7px; }
.bench-empty {
  padding: 44px 24px; border: 1px solid var(--border-soft); border-radius: 11px;
  background: var(--bg-raised); text-align: center;
}
.bench-empty h2 { margin: 0 0 6px; font-size: 15px; letter-spacing: -.02em; }
.bench-empty p { max-width: 460px; margin: 0 auto; color: var(--muted-2); font-size: 11px; line-height: 1.55; }

/* The record follows the same hierarchy as packaging and execution: the
   shared back/action bar sits above the title, then the benchmark caption. */
.bench-record-head { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bench-record-head h1 { margin: 0; min-width: 0; }
.bench-record .log-detail-actions { align-items: center; }
.bench-record .bench-confirm {
  border: 1px solid color-mix(in srgb, var(--crit) 30%, var(--border-soft)); border-radius: 10px;
  background: var(--bg-raised);
}
/* The record's sections carry their own head spacing, the same way packaging's
   do — .section-head's 14px plus .section-block's 12px gap is two gaps. */
.bench-record .section-block > .section-head { margin-bottom: 0; }
/* Summary reuses the packaging record's own facts strip, so a benchmark's
   headline reads the same as a packaging job's. Two differences: the margin
   (.facts is written to follow a verdict, here it follows a section head), and
   fixed thirds rather than auto-fit — auto-fit sized the cells to their 122px
   floor and left the rest of the strip empty, and clipped the longest status
   label doing it. */
.bench-summary-facts { margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bench-summary-facts .fact { min-width: 0; background: var(--bg-raised); }
/* Status is a pill, not a figure, so its cell drops the numeric size. */
.bench-summary-facts #benchmarkMetricStatus { display: flex; margin-top: 7px; }
/* The one fact holding a name rather than a figure. At the numeric size a
   repository like kubernetes/kubernetes runs past its quarter of the strip, so
   it steps down and truncates, with the full value on the title. */
.bench-summary-facts dd.bench-stat-name { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
/* Tasks labels its list the same way Summary and Scope label theirs, so it
   takes the plain .section-head h2 rather than the title weight
   .bench-section-head gives one. This only carries its controls. */
.bench-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }

/* The strip's bottom edge, spanning every column: the readiness meter. An edge
   has to be drawn there anyway, and drawn out of the ready/review split it
   answers "how much of this can I run" without spending a row on a second
   widget. Same two segments and colours the index row uses. */
.bench-spine { grid-column: 1 / -1; display: flex; gap: 1px; height: 3px; background: rgba(255,255,255,.06); }
.bench-spine i[data-segment="ready"] { background: var(--pass); }
.bench-spine i[data-segment="review"] { background: #e3bd62; }

.bench-profile-mix {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1px;
  border: 1px solid var(--border-soft); border-radius: 10px;
  background: var(--border-soft); overflow: hidden;
}
.bench-mix { min-width: 0; padding: 16px 17px 17px; background: var(--bg-raised); }
.bench-mix h2 { margin: 0 0 13px; color: var(--muted-2); font: 500 8px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.bench-mix-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
/* Label, share, count. The label column is a fixed width so every bar starts at
   the same x — bars that begin wherever their label ended cannot be compared,
   which is the only thing this column is for. The bar itself is deliberately
   quiet at two pixels in one colour: rank already orders the list, and the ramp
   opposite owns the panel's colour. */
.bench-mix-row { display: grid; grid-template-columns: 148px minmax(40px, 1fr) auto; align-items: center; gap: 14px; }
.bench-mix-label { min-width: 0; overflow: hidden; color: var(--text); font: 500 11px var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.bench-mix-count { color: var(--muted); font: 600 11px var(--mono); font-variant-numeric: tabular-nums; }
.bench-mix-bar { height: 2px; background: rgba(255,255,255,.07); }
.bench-mix-bar i { display: block; height: 100%; background: rgba(255,255,255,.3); }
.bench-mix-empty { color: var(--muted-2); font: 500 10.5px var(--sans); }

/* The signature: one bar, read left to right, easy to hard. Complexity is the
   only ordered axis on the record, so it is the only place colour encodes
   anything — cool for Low through neutral to warm for High. Nothing else in
   the panel is allowed to compete with it. */
.bench-ramp { display: flex; gap: 1px; height: 10px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.05); }
.bench-ramp i { min-width: 6px; }
.bench-ramp i[data-level="low"] { background: #8bded7; }
.bench-ramp i[data-level="medium"] { background: #9fb0a8; }
.bench-ramp i[data-level="high"] { background: #dfa49d; }
.bench-ramp i[data-level="unrated"] { background: rgba(255,255,255,.13); }
.bench-ramp-legend { list-style: none; margin: 13px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px 16px; }
.bench-ramp-legend li { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font: 500 10.5px var(--sans); }
/* A level with nothing in it still holds its place — an empty rung is what
   makes the ramp readable as a scale rather than a list of whatever turned up. */
.bench-ramp-legend li[data-empty="true"] { color: var(--muted-2); opacity: .55; }
.bench-ramp-legend i { width: 7px; height: 7px; border-radius: 2px; }
.bench-ramp-legend i[data-level="low"] { background: #8bded7; }
.bench-ramp-legend i[data-level="medium"] { background: #9fb0a8; }
.bench-ramp-legend i[data-level="high"] { background: #dfa49d; }
.bench-ramp-legend i[data-level="unrated"] { background: rgba(255,255,255,.13); }
.bench-ramp-legend b { color: var(--text); font: 600 10.5px var(--mono); font-variant-numeric: tabular-nums; }

.bench-section { display: grid; gap: 12px; }
.bench-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 0; }
.bench-count { flex: 0 0 auto; color: var(--muted-2); font: 500 9.5px var(--mono); }
/* A classification, not a status: same pill shape as the index's Status column
   and the same size, but sentence case — these are names, and shouting them
   would make every task row read as an alert. */
.bench-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 8px; border: 1px solid var(--border-soft); border-radius: 999px;
  color: var(--muted); background: rgba(255,255,255,.02);
  font: 500 10.5px var(--mono); white-space: nowrap;
}

/* Task rows wear the same shell as the Benchmarks index table and Run
   Configuration: the list is the panel's whole body, so it breaks out of
   .panel's own padding, and rows are hairline-divided rather than the
   individually bordered cards this used to be. */
.bench-task-table { margin: 0 -20px; background: rgba(6,10,8,.25); }
/* With the title lifted out to a section head, the list is the card's whole
   body — so the card drops its padding rather than leaving an 18px band above
   the head row where the panel header used to be. */
.bench-task-panel { padding: 0; }
.bench-task-panel .bench-task-table { margin: 0; }
/* Sized the way the Benchmarks index sizes its own columns: each floor is the
   column's longest real value — a "Infrastructure changes" tag, a COMPLEXITY
   head, a full attempt strip — and the task title, the one value with no fixed
   length, takes every pixel left over. */
.bench-task-head, .bench-task-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 160px 88px 56px 148px;
  gap: 16px; align-items: center;
}
.bench-task-head {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,255,255,.075);
  background: rgba(255,255,255,.018);
  text-align: center;
}
.bench-task-head > span { color: var(--muted); font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.bench-task-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
/* The open task's detail is a child of this same list (see
   renderBenchmarkRecord), not just another <li> — the universal selector
   keeps the hairline between it and its neighbours the same as between any
   two rows. */
.bench-task-rows > * + * { border-top: 1px solid rgba(255,255,255,.045); }
.bench-task-row {
  width: 100%; padding: 13px 14px;
  border: 0; border-radius: 0;
  background: transparent; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
  transition: background .15s ease;
}
.bench-task-row:hover { background: rgba(255,255,255,.022); }
.bench-task-row.selected { background: var(--panel-2); }
.bench-task-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bench-task-name { min-width: 0; display: flex; align-items: center; gap: 7px; }
.bench-task-open { min-width: 0; padding: 0; overflow: hidden; border: 0; color: inherit; background: none; text-align: left; cursor: pointer; }
.bench-task-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
/* The row's subject, at the size the Benchmarks index sets its benchmark name
   — the two tables are read the same way, one nested inside the other's
   record, so they share one type scale. */
.bench-task-name strong { display: block; overflow: hidden; font: 700 12.5px var(--sans); text-overflow: ellipsis; white-space: nowrap; }
/* justify-self, like the index's status pill: a grid item stretches by default,
   which sized every tag to its column and made "Low" as wide as
   "Infrastructure changes". A pill should be the width of its word. */
.bench-task-row .bench-tag { justify-self: start; overflow: hidden; max-width: 100%; }
.bench-review-state { justify-self: start; padding: 3px 8px; border-radius: 999px; color: #e3bd62; background: rgba(227,189,98,.1); font: 700 8.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.bench-review-state[data-status="excluded"] { color: var(--muted); background: rgba(145,157,150,.1); }

/* The run-history chip strip survives from the old task card: the Task
   Factory tray still renders it. The card it used to sit on does not. */
.benchmark-task-card-history { display: flex; align-items: center; gap: 5px; margin-top: 12px; }
.benchmark-task-card-history .chip { width: 17px; height: 17px; font-size: 10px; }
.benchmark-task-card-history-none { color: #647069; font: 600 7px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.benchmark-task-card-history-more { color: #647069; font: 600 8px var(--mono); }

/* Section labels inside the task detail. These were accent-coloured, which put
   four bright lime lines on a page whose actual signals — pass, fail, error —
   are also coloured. A label is not a status, so it reads as one. */
.benchmark-detail-eyebrow { display: block; color: var(--muted-2); font: 500 8px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
/* Opened inline in the task list (see .bench-task-table above) rather than as
   its own panel below it — no border or corner radius of its own, just a
   faint tint to read as expanded content rather than another row. The
   hairline above it comes from .bench-task-rows > * + *, the same rule every
   row boundary uses. */
.benchmark-task-detail { margin-bottom: 0; border: 0; border-radius: 0; background: rgba(255,255,255,.014); box-shadow: none; }
.benchmark-task-detail-head { min-height: 0; align-items: center; padding: 20px; background: transparent; }
.benchmark-task-detail-head > div { flex: 1 1 100%; width: 100%; min-width: 0; }
/* The one child of the detail with no padding of its own — every other
   block here (.benchmark-task-review, .benchmark-run-history-head,
   #benchmarkTaskRunHistory) insets itself; this used to inherit the old
   standalone panel's 18px/20px padding instead. */
#benchmarkTaskMetadataEditor { padding: 0 20px; }
/* No title here. The name is on the row this panel opens from, where the
   reader clicked it; repeating it as a heading spent the widest line in the
   panel restating what the row directly above already said, and pushed the
   detail that is only available here further down. The row carries the full
   name in its own `title`, so nothing is lost to the ellipsis.

   The rationale line, styled like the screening card's own — readable body
   text, not the mono/muted treatment the origin row and caption use. Uncapped:
   the panel spans the table, and a measure set for a narrow column left the
   summary wrapping in the left third of an otherwise empty row. */
.benchmark-task-detail-head p.task-detail-summary { width: 100%; max-width: none; margin: 0 0 18px; color: #a4b0a9; font: 13px/1.6 var(--sans); }
.benchmark-task-detail-head p.task-detail-summary code { padding: 1px 6px; border: 1px solid rgba(255,255,255,.08); border-radius: 4px; color: #8bded7; background: rgba(255,255,255,.05); font: 11px var(--mono); }
/* Reuses the candidate card's repo/PR/issue/time refs, so the two views read
   as one system rather than two different treatments of the same fact — but
   on a grid rather than the card's wrap-as-it-falls flex. Across a full-width
   panel the flex row spaced refs by their own text length, so repo, PR, issue
   and time landed in different places on every task and the eye had to search
   the row again for each one. Even columns put each ref where the last task
   left it. */
.benchmark-task-detail-head p.task-candidate-origin { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); align-items: center; gap: 8px 22px; width: 100%; margin-top: 14px; font-size: 11px; }
.benchmark-task-detail-head p.task-candidate-origin .gh-icon { width: 13px; height: 13px; }
/* Four fixed columns for the same reason, and fixed rather than auto-fit
   because these four are always the same four — files, additions, deletions,
   runtime — so their positions may as well be constant. minmax(0,1fr) rather
   than 1fr: a long value would otherwise push a column past its share and
   knock the dividers out of line. */
.benchmark-task-detail-head .task-candidate-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; width: 100%; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.065); }
.benchmark-task-detail-head .task-candidate-metrics > span { padding: 0 20px; }
.benchmark-task-detail-head .task-candidate-metrics > span:first-child { padding-left: 0; }
.benchmark-task-detail-head .task-candidate-metrics > span + span { border-left: 1px solid rgba(255,255,255,.075); }
.benchmark-task-detail-head .task-candidate-metrics b { font-size: 14px; }
.benchmark-task-detail-head .task-candidate-metrics small { font-size: 9.5px; }
/* The review a stopped task gets, inside the record that holds it. It reuses
   the task queue's panel wholesale — same reason, same next step, same
   decisions — and only needs insetting, because the detail card around it is
   edge-to-edge and this is the one block in it that is a card of its own. */
.benchmark-task-review { margin: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.benchmark-task-review .task-review-fix { background: transparent; }
.bench-task-inventory-controls { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; }
.github-diff { display: grid; gap: 1px; background: var(--border-soft); }
.diff-empty,.diff-binary { padding: 18px 24px; color: var(--muted-2); font: 9px var(--mono); }
.diff-file { background: #0a0f0d; }
.diff-file-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; background: #101613; }
.diff-file-path { overflow: hidden; color: #d2dbd6; font: 600 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.diff-stat { display: flex; gap: 8px; font: 600 9px var(--mono); }
.diff-stat-add { color: var(--pass); }
.diff-stat-del { color: var(--crit); }
.diff-file table { width: 100%; border-collapse: collapse; table-layout: auto; }
.diff-hunk-header td { padding: 5px 16px; color: var(--cyan); background: rgba(116,221,209,.05); font: 9px var(--mono); white-space: nowrap; }
.diff-line td { padding: 0 10px; height: 20px; border: 0; font: 10.5px/20px var(--mono); white-space: pre; vertical-align: top; }
.diff-gutter { width: 1%; padding: 0 10px !important; color: #4c5852; text-align: right; user-select: none; }
.diff-marker { width: 1%; padding: 0 4px !important; text-align: center; user-select: none; }
.diff-code { padding-right: 20px !important; color: #c8d2cd; }
.diff-line-add td { background: rgba(79,201,138,.08); }
.diff-line-add .diff-marker,.diff-line-add .diff-code { color: #a6e6c2; }
.diff-line-del td { background: rgba(255,92,122,.08); }
.diff-line-del .diff-marker,.diff-line-del .diff-code { color: #ffb3c1; }
.diff-line-context .diff-gutter { color: #3e4841; }

/* Run history: every attempt any comparison run has made against this task,
   reusing the same .chip vocabulary the Run Log matrix uses so a "passed" or
   "failed" glyph means the same thing everywhere in the console. */
.benchmark-task-run-history { padding-bottom: 4px; }
.benchmark-run-history-head { padding: 18px 24px 0; }
.benchmark-run-history-head h3 { margin: 0; font-size: 13px; }
/* This is a table inside the selected task's inline expansion, not another
   card inside that expansion. It runs edge to edge exactly like the Tasks
   table around it: one header band, transparent rows and hairline dividers. */
#benchmarkTaskRunHistory { display: grid; gap: 0; margin: 14px 0 0; overflow: hidden; border-top: 1px solid rgba(255,255,255,.075); background: rgba(6,10,8,.25); }
.benchmark-run-history-empty { margin: 0; padding: 16px 24px 22px; color: var(--muted-2); font-size: 10.5px; }
.benchmark-run-history-row-head, .benchmark-run-history-row {
  width: 100%; display: grid;
  grid-template-columns: 22px 26px minmax(150px,1.25fr) minmax(78px,.6fr) minmax(64px,.5fr) minmax(200px,1.45fr) 76px 76px 62px 58px;
  align-items: center; gap: 10px;
}
.benchmark-run-history-row-head { padding: 10px 15px; border-bottom: 1px solid var(--border-soft); color: var(--muted-2); background: var(--panel-2); font: 700 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.benchmark-run-history-row-head > span { text-align: center; white-space: nowrap; }
.benchmark-run-history-row-head > span:nth-child(3) { text-align: left; }
.benchmark-run-history-row { padding: 10px 15px; border: 0; border-radius: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; transition: background .15s ease; }
.benchmark-run-history-row + .benchmark-run-history-row { border-top: 1px solid rgba(255,255,255,.045); }
.benchmark-run-history-row:hover { background: rgba(255,255,255,.022); }
.benchmark-run-history-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.benchmark-run-history-row > .benchmark-run-history-model-mark { width: 26px; height: 26px; }

/* Columns drop in the order they stop earning their width: the source
   repositories are already in the name's id, the packaging date is the least
   asked-for fact, and Last run is the last thing to go because it is the one
   the delete decision needs. */
@media (max-width: 1180px) {
  .task-lifecycle-head, .task-lifecycle-row { grid-template-columns: minmax(180px,1fr) 102px minmax(220px,1.2fr) 72px 78px; }
  .task-lifecycle-head > span:nth-child(4), .task-lifecycle-benchmark { display: none; }
  .bench-table { --bench-cols: minmax(70px, 1.5fr) minmax(160px, .3fr) minmax(136px, .2fr) minmax(88px, .3fr) minmax(120px, .5fr); }
  .bench-head-cells > span:nth-child(4), .bench-row-cells > .bench-repos { display: none; }
  /* Complexity is the third head cell now that Source is gone. */
  .bench-task-head, .bench-task-row { grid-template-columns: minmax(140px, 1fr) 160px 56px 148px; }
  .bench-task-head > span:nth-child(3), .bench-task-row > .bench-tag-complexity { display: none; }
}
@media (max-width: 1050px) {
  .bench-scope { flex: 0 1 280px; }
  #benchmarkTaskRunHistory { overflow-x: auto; overflow-y: hidden; }
  .benchmark-run-history-row-head, .benchmark-run-history-row { min-width: 980px; }
}
@media (max-width: 860px) {
  .task-lifecycle-head, .task-lifecycle-row { grid-template-columns: minmax(170px,1fr) 102px minmax(180px,1fr) 78px; }
  .task-lifecycle-head > span:nth-child(5), .task-lifecycle-updated { display: none; }
  .bench-table { --bench-cols: minmax(60px, 1.5fr) minmax(160px, .3fr) minmax(136px, .2fr); }
  .bench-head-cells > span:nth-child(5), .bench-head-cells > span:nth-child(6),
  .bench-row-cells > .bench-when, .bench-row-cells > .bench-last-run { display: none; }
  .bench-profile-mix { grid-template-columns: 1fr; }
  .bench-summary-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  /* Column labels stop paying for themselves once a row is down to a name and
     an outcome, and the row reads without them. */
  .bench-head, .bench-task-head, .task-lifecycle-head { display: none; }
  .task-lifecycle-row { grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; }
  .task-lifecycle-name { grid-column: 1; }
  .task-lifecycle-status { grid-column: 2; grid-row: 1; }
  .task-lifecycle-reason { grid-column: 1 / -1; }
  .task-lifecycle-action { grid-column: 1 / -1; justify-content: flex-start; }
  .bench-lifecycle-controls { width: 100%; justify-content: space-between; }
  .bench-scope { width: 100%; grid-template-columns: auto minmax(0,1fr); flex-basis: 100%; }
  .task-attention-detail-body { grid-template-columns: 1fr; }
  /* Stacked, the pair still reads as a pair: the relation turns to sit between
     the two cards vertically rather than being dropped. */
  .task-review-sources { grid-template-columns: 1fr; gap: 8px; }
  /* margin, not padding: the badge is a fixed-size circle and padding would
     stretch it out of round. */
  .task-review-source-relation { justify-self: start; margin-left: 14px; }
  .task-review-fix { grid-template-columns: 1fr; gap: 7px; }
  .task-attention-detail footer { justify-content: flex-start; }
  .bench-task-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bench-task-row > .bench-num,
  .bench-task-row > .bench-tag-category { display: none; }
}

/* ==========================================================================
   The rail
   --------------------------------------------------------------------------
   The console has no top bar. Everything that used to frame the page lives in
   one column now, read top to bottom as a sentence about where you are:

     mark          who this is
     environment   which trust boundary you are working inside
     views         what you are doing
     activity      what is running
     runner        what will execute it
     account       who you are, and everything you configure

   Runner state stays on the rail rather than moving behind the account menu:
   Setup is now two clicks away, so an offline runner has to announce itself
   without being opened. Below 860px the rail narrows to icons instead of
   sliding off-canvas — there is no top bar left to hang a menu button on, and
   a rail that is always present is one less piece of state to get wrong.
   ========================================================================== */

.main-content { grid-column: 2; min-width: 0; }
/* The rail is flat: one surface, hairline edge, and rows that are told apart
   by a fill rather than by borders, gradients or an accent. Nothing here
   competes with the content beside it, and the accent is spent on buttons and
   status where it means something. */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: 224px;
  display: flex;
  flex-direction: column;
  padding: 22px 8px 12px;
  border-right: 1px solid var(--border-soft);
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.main-nav { display: grid; gap: 2px; }
.nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease;
}
.nav-item svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.nav-item:hover { background: rgba(255,255,255,.05); }
.nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-item.active { background: rgba(255,255,255,.1); }

/* The mark aligns with the row icons below it, so the head reads as part of
   the same column rather than as a banner sitting on top of one. */
.rail-head { display: flex; align-items: center; gap: 8px; padding: 0 4px 14px 10px; }
.sidebar .brand { flex: 1; min-width: 0; padding: 0; }
.sidebar button.brand { width: auto; }
.rail-toggle {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background .14s ease, color .14s ease, opacity .14s ease;
}
.rail-toggle:hover { color: var(--text); background: rgba(255,255,255,.05); }
.rail-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rail-toggle svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Matched on .sidebar to outrank the `.sidebar .brand-logo` rule above, which
   would otherwise keep the wordmark visible inside the 68px rail. */
.sidebar .brand-glyph { display: none; width: 30px; height: 30px; }

/* Views ------------------------------------------------------------------- */
.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bottom of the rail ------------------------------------------------------ */
.sidebar-bottom { margin-top: auto; display: grid; gap: 8px; padding-top: 20px; }
.runner-hub {
  border: 1px solid var(--border-soft); border-radius: 11px;
  background: rgba(255,255,255,.018); overflow: hidden;
  transition: border-color .16s ease;
}
.runner-hub[data-busy="true"] { border-color: rgba(101,217,209,.3); }
.header-runner-status { width: 100%; min-width: 0; min-height: 38px; border: 0; border-radius: 0; background: transparent; }
.header-runner-status:hover { background: rgba(255,255,255,.035); }

.account-row {
  width: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 11px;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 0 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease;
}
.account-row:hover { background: rgba(255,255,255,.05); }
.account-row[aria-expanded="true"] { background: rgba(255,255,255,.1); }
.account-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account-row-avatar {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid #34413d;
  border-radius: 50%;
  background: #1b2528;
  color: #c6cfcc;
  font: 800 9px var(--sans);
}
.account-row[aria-expanded="true"] .account-row-avatar { border-color: var(--accent); color: var(--text); }
.account-row-name { min-width: 0; font-size: 11.5px; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-row > svg { width: 11px; fill: none; stroke: var(--muted-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.account-row[aria-expanded="true"] > svg { transform: rotate(180deg); }

/* The panel rises out of the row it belongs to, so it opens upward. */
.account-panel {
  top: auto;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  width: auto;
  animation: account-panel-up .16s ease-out;
}
@keyframes account-panel-up { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .account-panel { animation: none; }
  /* The ring still reads as "busy" parked on one arc — it just stops turning. */
  .runner-activity-item[data-status="running"] .runner-activity-icon::before { animation: none; }
}

/* Icon rail ---------------------------------------------------------------
   One geometry, reached two ways: the reader puts the rail away with the
   toggle ("collapsed"), or the viewport is too narrow to hold it open and
   takes the decision away from them ("compact"). Both are set on <body> by
   applyRailState(), so the rules below are written once instead of being
   duplicated between a state and a media query that would drift apart.

   overflow stays visible so the account flyout can leave the rail; at this
   width the rail is short enough that it never needs to scroll. */
body[data-rail="collapsed"] .app-shell,
body[data-rail="compact"] .app-shell { grid-template-columns: 60px minmax(0, 1fr); }

body[data-rail="collapsed"] .sidebar,
body[data-rail="compact"] .sidebar { width: 60px; padding: 18px 8px 12px; overflow: visible; }

body[data-rail="collapsed"] .rail-head,
body[data-rail="compact"] .rail-head { position: relative; justify-content: center; padding: 0 0 14px; }
body[data-rail="collapsed"] .sidebar .brand,
body[data-rail="compact"] .sidebar .brand { flex: none; }
body[data-rail="collapsed"] .sidebar .brand-logo,
body[data-rail="compact"] .sidebar .brand-logo { display: none; }
body[data-rail="collapsed"] .sidebar .brand-glyph,
body[data-rail="compact"] .sidebar .brand-glyph { display: block; margin: 0 auto; transition: opacity .14s ease; }

/* Collapsed, the mark's slot is also the way back — hovering or tabbing into
   the head swaps one for the other, so the 60px rail spends no extra row on a
   control you only need once. The viewport-driven state has no toggle to
   show, so it keeps the mark and its link home. */
body[data-rail="compact"] .rail-toggle { display: none; }
body[data-rail="collapsed"] .rail-toggle { position: absolute; inset: 0; margin: auto; opacity: 0; }
/* :focus-visible, not :focus-within — clicking the toggle leaves focus on it,
   and :focus-within would strand the head showing the control instead of
   returning the mark the moment the pointer leaves. Keyboard focus still
   reveals it, which is the case that needs it. */
body[data-rail="collapsed"] .rail-head:hover .brand-glyph,
body[data-rail="collapsed"] .rail-head:has(.rail-toggle:focus-visible) .brand-glyph { opacity: 0; }
body[data-rail="collapsed"] .rail-head:hover .rail-toggle,
body[data-rail="collapsed"] .rail-head:has(.rail-toggle:focus-visible) .rail-toggle { opacity: 1; }

body[data-rail="collapsed"] .nav-item,
body[data-rail="compact"] .nav-item { justify-content: center; padding: 0; }
body[data-rail="collapsed"] .nav-label,
body[data-rail="compact"] .nav-label { display: none; }

body[data-rail="collapsed"] .header-runner-status,
body[data-rail="compact"] .header-runner-status { width: 100%; min-width: 0; min-height: 42px; padding: 0; justify-content: center; }
body[data-rail="collapsed"] .header-runner-copy,
body[data-rail="compact"] .header-runner-copy { display: none; }
/* .header-runner-status carries no border of its own in the rail (the .runner-hub
   rule below :4323 already zeroes it) — the visible box around the runner dot
   is .runner-hub's card border. Every other rail icon is bare, so drop it here
   too; .runner-activity, the hub's other child, is empty and hidden until
   something is running, so this never strips a boundary anything else needs. */
body[data-rail="collapsed"] .runner-hub,
body[data-rail="compact"] .runner-hub { border-color: transparent; background: transparent; }

/* There is no room to say what the runner is doing, only how far along it is
   — so the rows keep the icon and the badge and drop the prose. */
body[data-rail="collapsed"] .runner-activity,
body[data-rail="compact"] .runner-activity { padding: 3px; }
body[data-rail="collapsed"] .runner-activity-open,
body[data-rail="compact"] .runner-activity-open { grid-template-columns: 1fr; gap: 3px; padding: 6px 2px; justify-items: center; }
body[data-rail="collapsed"] .runner-activity-copy,
body[data-rail="compact"] .runner-activity-copy { display: none; }
body[data-rail="collapsed"] .runner-activity-badge,
body[data-rail="compact"] .runner-activity-badge { min-width: 0; padding: 2px 4px; }
body[data-rail="collapsed"] .runner-activity-dismiss,
body[data-rail="compact"] .runner-activity-dismiss { display: none; }

body[data-rail="collapsed"] .account-row,
body[data-rail="compact"] .account-row { grid-template-columns: 1fr; justify-items: center; min-height: 44px; padding: 0; }
body[data-rail="collapsed"] .account-row-name,
body[data-rail="collapsed"] .account-row > svg,
body[data-rail="compact"] .account-row-name,
body[data-rail="compact"] .account-row > svg { display: none; }
body[data-rail="collapsed"] .account-panel,
body[data-rail="compact"] .account-panel { left: calc(100% + 10px); right: auto; bottom: 0; width: 232px; }

/* ================================================================== */
/* Task factory surfaces.

   The factory reads as one continuous surface: every box sits at the page
   background and is told apart by its border alone. The gradient fills and
   drop shadows that lifted these panels off the page are dropped here rather
   than edited in place, because the rules they override are shared with the
   home, execution and library views, which keep the raised treatment. */
#factoryView .panel,
#factoryView .repo-row,
#factoryView .repo-empty-state,
#factoryView .screening-preset,
#factoryView .screening-advanced-toggle,
#factoryView .candidate-advanced-heading,
#factoryView .candidate-advanced-parameters,
#factoryView .scan-preview,
#factoryView .scan-preview-failure-body,
#factoryView .scan-preview-failure-list,
#factoryView .task-candidate-card {
  background: transparent;
}

/* Cells drawn on a 1px grid-line background stay opaque, or the line colour
   shows through the cell itself instead of only through the gap. */
#factoryView .toggle-row,
#factoryView .scan-preview-failure-list article {
  background: var(--bg);
}

/* Nothing is raised any more, so nothing casts — a drop shadow against a
   surface its own colour only reads as a smudge around the border. */
#factoryView .panel,
#factoryView .repo-row,
#factoryView .repo-row:hover,
#factoryView .repo-row.selected,
#factoryView .screening-preset.active,
#factoryView .scan-preview,
#factoryView .scan-preview-failure-body {
  box-shadow: none;
}
#factoryView .repo-row::before { display: none; }

/* Benchmarks reads Repositories' own numbered "Select ___" panel, so it
   picks up the same flat surface: at the page background, told apart by
   its border alone, rather than the raised gradient the rest of the
   console (home, execution, library) still uses. */
#benchmarksView .panel {
  background: transparent;
  box-shadow: none;
}

/* State without a gradient: one flat wash, with the border and the check mark
   carrying the rest. Ordered after the resets above so hover and selection
   still win at equal specificity. */
#factoryView .repo-row:hover,
#factoryView .screening-preset:hover,
#factoryView .task-candidate-card:hover { background: #0c110f; }
#factoryView .repo-row.selected,
#factoryView .screening-preset.active,
#factoryView .task-candidate-card.selected { background: color-mix(in srgb, var(--accent) 5%, var(--bg)); }

/* The active preset's corner blob was a flat disc read through a radial
   gradient. With the gradient gone it reads as a hard-edged quarter circle,
   and the wash and border already say "active" on their own. */
#factoryView .screening-preset::after { display: none; }

/* ================================================================== */
/* Execution suite surfaces.

   Brought in line with the factory: panels sit flat at the page background,
   told apart by their border rather than a gradient lift or drop shadow. */
#executionView .panel,
#executionView .execution-builder-section,
#executionView .public-benchmark-card {
  background: var(--bg);
  box-shadow: none;
}

/* Selected/active state without a gradient: one flat wash, same as the
   factory's selected repo row and active preset. */
#executionView .public-benchmark-card.selected {
  background: color-mix(in srgb, var(--accent) 5%, var(--bg));
}

/* "Choose Benchmark" and the model comparison targets both reuse .repo-row
   for their cards — same card Select Repository uses to choose a
   repository. It needs the same flat treatment the factory gives that
   card, since the base .repo-row is still the raised/gradient version
   everywhere else. */
#executionView .repo-row { background: var(--bg); box-shadow: none; }
#executionView .repo-row::before { display: none; }
#executionView .repo-row:hover { background: #0c110f; box-shadow: none; }
#executionView .repo-row.selected { background: color-mix(in srgb, var(--accent) 5%, var(--bg)); box-shadow: none; }

/* The benchmark tile drops the language icon, provider label and Select
   pill the factory's repo card carries — the whole card is already the
   click target, so a "Select"/"Selected" box in the corner only repeated
   what the border and background tint underneath it already say. Less
   content means less height to hold it: the base 190px was sized for that
   fuller card and left a blank gap above the stats row (which .repo-stats'
   margin-top: auto pins to the bottom regardless). */
#executionBenchmarkGrid .repo-row { min-height: 112px; }
#executionBenchmarkGrid .repo-identity { margin-bottom: 12px; }
/* Three stats, so three columns. The base rule divides the row into four for
   the repository card, which carries a fourth; here that left an empty
   quarter of the card while Status — the widest of the three — ellipsed one
   pixel short of "Unavailable". */
#executionBenchmarkGrid .repo-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Cards carry no environment bar: whether a benchmark's images are built is a
   question about starting a run, not about picking one, so it is asked once
   beside the launch button. A card that grew one would also be clipped here —
   .repo-list.scrollable gives the grid a definite height, which resolves its
   auto rows to exactly the min-height above, and .repo-row's overflow: hidden
   removes the excess without a trace. */

/* Every figure in the stats row — Tasks, Repos, Status — reads in the same
   muted tone as the base .repo-stats strong rule. Colour was pulling the eye
   to Tasks and Status and leaving Repos looking unfinished beside them; one
   tile, one text colour. (Set explicitly, not "inherit" — the .none/.tested
   selectors outrank the base rule, and inherit would pick up the parent
   span's colour instead of matching it.) */
#executionView .repo-stats strong b,
#executionBenchmarkGrid .repo-stats strong.tested,
#executionBenchmarkGrid .repo-stats strong.archived { color: #bac5c0; font-weight: 500; }

/* The benchmark tile's own link back to its detail record, sitting right
   after the name. Quiet by default — the card's own click already selects
   it, so this is a second, smaller-stakes action (go look at the record)
   and reads that way: no border or fill until it's actually being aimed at.
   Same muted-to-text hover .log-back uses for the same kind of "go
   elsewhere" control. */
.repo-open-link {
  flex: none; width: 18px; height: 18px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted-2);
  cursor: pointer; transition: color .14s ease, background .14s ease;
}
.repo-open-link svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.repo-open-link:hover { color: var(--text); background: rgba(255,255,255,.07); }
.repo-open-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ------------------------------------------------ run task tray (subsetting)

   Step 2's whole body: which of the chosen benchmark's tasks this run actually
   executes. The stage only appears for a benchmark with more than one task —
   there is nothing to narrow otherwise. */
/* Same table as Run Configuration downstream — named columns over one row per
   thing, so choosing what runs and choosing what runs it read alike. */
.task-tray {
  margin: 0 12px 12px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 9%, var(--border-soft));
  background: rgba(6, 10, 8, .35);
}

.task-tray-head,
.task-tray-row {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(88px, .7fr) minmax(0, 1fr) minmax(104px, .8fr);
  gap: 12px; align-items: center; padding: 9px 14px;
}
.task-tray-head {
  padding-top: 11px; padding-bottom: 11px; color: var(--muted);
  font: 700 11px var(--mono); letter-spacing: .12em; text-align: center; text-transform: uppercase;
  background: rgba(255, 255, 255, .018);
  border-bottom: 1px solid rgba(255, 255, 255, .075); border-radius: 12px 12px 0 0;
}
.task-tray-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-tray-head .col-task { text-align: left; }

/* Same rule the benchmark grid uses: past six rows the list scrolls rather
   than the panel growing to whatever a large package happens to contain. */
.task-tray-list { overflow: hidden; border-radius: 0 0 12px 12px; }
.task-tray-list.scrollable { max-height: 232px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.task-tray-list.scrollable::-webkit-scrollbar { width: 8px; }
.task-tray-list.scrollable::-webkit-scrollbar-track { background: rgba(255, 255, 255, .018); }
.task-tray-list.scrollable::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--accent) 32%, #26302b); background-clip: padding-box; }

/* Only the headings are centred over their column; every value reads from the
   same left edge, so a row scans as a line rather than as five islands. A
   ready row is a real button spanning the full row — same click-anywhere
   pattern Configure Models uses for its model rows, no per-row checkbox. */
.task-tray-row { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.task-tray-row + .task-tray-row { border-top: 1px solid rgba(255, 255, 255, .045); }
.task-tray-row:hover { background: rgba(255, 255, 255, .028); }
.task-tray-row:focus-visible { outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -1px; }
/* Same accent left-edge + tint the model table uses for a selected row. */
.task-tray-row.selected { background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.task-tray-row.selected:hover { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.task-tray-identity { min-width: 0; }
.task-tray-identity strong { display: block; overflow: hidden; color: var(--text); font-size: 11px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.task-tray-complexity { min-width: 0; overflow: hidden; color: #aeb9b4; font: 600 10px var(--mono); letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.task-tray-complexity.complexity-low { color: #8bded7; }
.task-tray-complexity.complexity-high { color: #dfa49d; }
.task-tray-category { min-width: 0; overflow: hidden; color: var(--muted-2); font: 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
/* Same fail→pass glyph strip the benchmark task cards carry, shrunk to sit on
   one table line: what this task has done in past runs of this benchmark,
   newest first, so you narrow a run knowing what already passes. */
.task-tray-history { min-width: 0; overflow: hidden; }
.task-tray-history .benchmark-task-card-history { margin-top: 0; gap: 4px; }
.task-tray-history .chip { width: 15px; height: 15px; border-radius: 5px; font-size: 9px; }
.task-tray-history .benchmark-task-card-history-none,
.task-tray-history .benchmark-task-card-history-more { font-size: 7px; }

/* The tray is now step 2's whole body, so it sits flush in its panel the way
   Configure Models' table sits in the next one — not as a card floating inside
   a card. It also takes the room a stage of its own affords: nine rows before
   it scrolls, where it used to get six sharing step 1 with a 424px grid. */
#executionView .task-tray { margin: 0; border: 0; border-radius: 0; background: transparent; }
#executionView .task-tray-head { border-radius: 0; border-top: 0; }
#executionView .task-tray-list { border-radius: 0 0 14px 14px; }
#executionView .task-tray-list.scrollable { max-height: 350px; }

/* One left edge down the stage: its heading and every task title start at the
   same 22px the panel header uses. Inset inside a card of its own, the tray's
   first column had nothing to line up with. */
#executionView .task-tray-head,
#executionView .task-tray-row { padding-left: 22px; padding-right: 22px; }

/* At tile width the accent wash marked one row among several. Run edge to edge
   across the panel — and across every row, since every task is in the run
   until you say otherwise — it stops distinguishing anything and just floods
   the surface. The left edge keeps the state; the wash drops to a tint you
   notice only when the row beside it has none. */
#executionView .task-tray-row.selected { background: color-mix(in srgb, var(--accent) 4%, transparent); }
#executionView .task-tray-row.selected:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* An excluded task stays legible — you need to read it to decide to put it
   back — but drops out of the foreground so the run reads at a glance. */
.task-tray-row.off .task-tray-identity strong { color: var(--muted-2); }
.task-tray-row.off .task-tray-complexity,
.task-tray-row.off .task-tray-category,
.task-tray-row.off .task-tray-history { opacity: .5; }

/* A review row isn't a button at all — it can't be toggled, so it gets no
   pointer cursor or hover affordance, only the "Needs review" state in place
   of an attempt history it doesn't have yet. */
.task-tray-row.review { cursor: default; }
.task-tray-row.review:hover { background: transparent; }
.task-tray-row.review .task-tray-identity strong { color: var(--muted); }
.task-tray-row.review .task-tray-complexity,
.task-tray-row.review .task-tray-category { opacity: .6; }

@media (max-width: 620px) {
  .task-tray-head,
  .task-tray-row { grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
  .task-tray-head .col-category,
  .task-tray-head .col-history,
  .task-tray-category,
  .task-tray-history { display: none; }
}

/* ==================================================================
   PROFILE SETTINGS
   Two voices, one panel. Manrope for the things this person controls,
   DM Mono for the things the control plane issued them — the same
   split the rest of the console already draws between a label and an
   identifier. The hairlines between sections are the only structure;
   nothing here is boxed for decoration.
   ================================================================== */

.profile-modal {
  width: min(520px, 100%);
  max-height: min(760px, calc(100dvh - 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.profile-modal .card-kicker { text-transform: uppercase; }
/* Title only. The panel's sections name themselves, so a kicker and a line of
   preamble above them were saying what the page below already said. */
.profile-head { flex: 0 0 auto; padding: 0 34px 15px 0; }
.profile-head h2 { margin: 0; }
/* Scrolls inside its own padding so the scrollbar runs the full height of the
   body rather than stopping short of the modal's bottom edge. The rule is
   what the scrolled content passes under — without it the first field is
   sliced mid-height and reads as a rendering fault. */
.profile-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  margin: 0 -28px -28px; padding: 15px 28px 28px;
  border-top: 1px solid var(--border-soft);
}

.profile-section { display: block; margin: 0; padding: 17px 0; border-top: 1px solid var(--border-soft); }
.profile-section:first-of-type { padding-top: 0; border-top: 0; }
.profile-section .card-kicker { margin-bottom: 13px; }
.profile-section .modal-field { margin: 0 0 11px; }
.profile-section .modal-field:last-of-type { margin-bottom: 0; }

/* The chip is the preview, so it is the size it will be on the rail and
   carries the same accent — a smaller or paler swatch would be a mockup of
   the thing rather than the thing. */
.profile-name-row { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: end; gap: 13px; }
/* Fields default to mono across the console, which is right for identifiers
   and wrong here: a name is prose, and the panel's whole argument is that
   mono means the system issued it. Passwords keep the mono face — telling an
   l from a 1 matters more there than reading it as words. */
.profile-name-row input { font: 12.5px/1.4 var(--sans); letter-spacing: -.01em; }
.profile-initials {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font: 800 13px var(--sans);
  letter-spacing: .01em;
  transition: transform .18s cubic-bezier(.2,.9,.3,1.2);
}
.profile-initials.changed { transform: scale(1.06); }

/* The action is always right-aligned; a hint, where a section still has one,
   is pushed to the far left. Written this way rather than with space-between
   so a footer holding only a button still puts it on the right. */
.profile-section-foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 13px; }
.profile-section-foot small { min-width: 0; margin-right: auto; color: var(--muted-2); font-size: 9.5px; line-height: 1.5; }
.profile-section-foot .button { flex: 0 0 auto; }

/* The record. Label left in the reading face, value right in mono: this half
   of the panel is a statement of fact, and it should not look like a form
   somebody forgot to make editable. */
.profile-record { display: grid; gap: 1px; margin: 0; padding: 0; border-radius: 9px; overflow: hidden; background: var(--border-soft); }
.profile-record-row {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 10px 12px;
  background: #0b1012;
}
.profile-record dt { color: var(--muted); font-size: 10.5px; font-weight: 600; }
.profile-record dd { margin: 0; justify-self: end; min-width: 0; overflow: hidden; color: #d8e0dd; font: 10.5px var(--mono); letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }

.profile-copy { display: inline-flex; align-items: center; gap: 7px; padding: 3px 6px; margin: -3px -6px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: inherit; letter-spacing: inherit; cursor: pointer; transition: background .15s ease, color .15s ease; }
.profile-copy svg { width: 12px; flex: 0 0 auto; fill: none; stroke: var(--muted-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s ease; }
.profile-copy:hover { background: #131a1c; }
.profile-copy:hover svg { stroke: var(--accent); }
.profile-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.profile-copy.copied svg { stroke: var(--accent); }


.profile-note { display: block; margin-top: 11px; color: var(--muted-2); font-size: 9.5px; line-height: 1.55; }
.profile-note[hidden] { display: none; }
.profile-note .text-button { padding: 0; font-size: inherit; font-weight: 700; color: var(--accent); }
.profile-note .text-button:hover { color: var(--accent-strong); text-decoration: underline; }
.profile-note .text-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* Only rendered when there is more than one session, so it states a fact
   rather than asking a question nobody had. */
.profile-sessions { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 15px; border-top: 1px solid var(--border-soft); }
.profile-sessions[hidden] { display: none; }
.profile-sessions span { color: var(--muted); font-size: 10.5px; }
.profile-sessions .button { flex: 0 0 auto; color: #e08c85; }
.profile-sessions .button:hover { color: #ff9089; }

@media (max-width: 520px) {
  .profile-section-foot, .profile-sessions { flex-direction: column; align-items: stretch; }
  .profile-section-foot .button, .profile-sessions .button { width: 100%; }
  .profile-record-row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .profile-record dd { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-initials { transition: none; }
  .profile-initials.changed { transform: none; }
}

/* ==================================================================
   TEAM & ROLES
   A compact access directory: identity leads, role is the one editable
   property, and pending invitations are visually quieter than active people.
   ================================================================== */

.team-view { grid-template-columns: minmax(0, 1fr); align-content: start; }
.team-page-head { margin-bottom: 20px; }
.team-page-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 18px; }
.team-page-title h1 { margin: 0; font-size: 30px; letter-spacing: -.045em; }
.team-page-title p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.team-page-title .button { flex: 0 0 auto; }
.team-invite { display: grid; grid-template-columns: minmax(190px, .85fr) minmax(240px, 1fr) 150px auto; align-items: end; gap: 14px; margin-bottom: 14px; padding: 18px; border-color: color-mix(in srgb, var(--accent) 20%, var(--border-soft)); background: color-mix(in srgb, var(--accent) 3%, #0b1012); }
.team-invite[hidden] { display: none; }
.team-invite .modal-field { margin: 0; }
.team-invite-copy { align-self: center; min-width: 0; }
.team-invite-copy strong, .team-invite-copy small { display: block; }
.team-invite-copy strong { color: var(--text); font-size: 12px; }
.team-invite-copy small { max-width: 31ch; margin-top: 5px; color: var(--muted-2); font: 8.5px/1.5 var(--mono); }
.team-invite-actions { display: flex; align-items: center; gap: 5px; }
.team-invite-actions .button { min-height: 44px; white-space: nowrap; }
.team-role-guide { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 2px 14px; color: var(--muted-2); font: 8.5px/1.5 var(--mono); }
.team-role-guide span { display: inline-flex; gap: 5px; }
.team-role-guide strong { color: #aeb9b5; font-weight: 700; }
.team-panel { overflow: hidden; padding: 0; background: rgba(6,10,8,.25); }
.team-table-head, .team-row { display: grid; grid-template-columns: minmax(220px, 1.7fr) minmax(100px, .7fr) minmax(120px, .8fr) minmax(100px, .7fr) minmax(105px, .7fr); align-items: center; gap: 16px; }
.team-table-head { padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,.075); color: var(--muted); background: rgba(255,255,255,.018); font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.team-table-head > span:not(:first-child) { text-align: center; }
.team-list { min-height: 150px; }
.team-loading { display: grid; min-height: 180px; place-items: center; color: var(--muted-2); font: 9px var(--mono); }
.team-row { min-height: 68px; padding: 11px 16px; transition: background .15s ease; }
.team-row + .team-row { border-top: 1px solid rgba(255,255,255,.045); }
.team-row:hover { background: rgba(255,255,255,.018); }
.team-row[data-status="invited"] { background: rgba(255,255,255,.009); }
.team-person { min-width: 0; display: flex; align-items: center; gap: 12px; }
.team-avatar { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #34413d; border-radius: 50%; background: #172024; color: #cbd5d1; font: 800 10px var(--sans); }
.team-row[data-status="invited"] .team-avatar { border-style: dashed; color: var(--muted-2); background: transparent; }
.team-identity { min-width: 0; }
.team-identity strong, .team-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-identity strong { color: var(--text); font-size: 11.5px; }
.team-identity small { margin-top: 4px; color: var(--muted-2); font: 9px var(--mono); }
.team-you { display: inline-flex; margin-left: 7px; padding: 2px 5px; border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); font: 700 7px var(--mono); letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
.team-access { display: grid; justify-items: center; }
.team-role-select { width: 116px; }
.team-role-select select { width: 100%; height: 31px; padding: 0 25px 0 9px; border: 1px solid #2b3734; border-radius: 7px; outline: none; appearance: none; color: #d8e0dd; background: #0b1012 var(--chevron) no-repeat right 8px center / 8px 8px; font: 9px var(--mono); }
.team-role-select select:focus { border-color: #607b5b; box-shadow: 0 0 0 3px rgba(200,247,101,.055); }
.team-role-static { padding: 5px 0; color: #cbd5d1; font: 700 9px var(--mono); }
.team-member-status { justify-self: center; padding: 3px 8px; border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); font: 700 8px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.team-row[data-status="invited"] .team-member-status { color: #d7b968; background: rgba(215,185,104,.09); }
.team-joined { justify-self: center; color: var(--muted); font: 600 10px var(--mono); }
.team-row-actions { display: flex; justify-content: flex-end; gap: 4px; }
.team-row-actions button { padding: 6px 7px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font: 700 8px var(--mono); cursor: pointer; }
.team-row-actions button:hover { color: var(--text); background: #182023; }
.team-row-actions button.danger { color: #d9847d; }
.team-row-actions button.danger:hover { color: #ff9089; background: rgba(239,119,105,.08); }
.team-row-actions button:disabled { opacity: .45; cursor: default; }
.team-no-action { justify-self: center; color: var(--muted-2); font: 10px var(--mono); }
.auth-invite-mark { width: 42px; height: 42px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 50%; color: var(--accent-ink); background: var(--accent); font-weight: 900; }
.auth-invite-copy { margin: 0 0 17px; color: var(--muted); font-size: 10.5px; line-height: 1.6; text-align: center; }

@media (max-width: 980px) {
  .team-invite { grid-template-columns: 1fr 150px auto; }
  .team-invite-copy { grid-column: 1 / -1; }
  .team-table-head, .team-row { grid-template-columns: minmax(200px, 1.7fr) minmax(95px, .7fr) minmax(115px, .8fr) minmax(90px, .7fr); }
  .team-table-head > span:nth-child(4), .team-joined { display: none; }
}

@media (max-width: 680px) {
  .team-page-title { align-items: stretch; flex-direction: column; }
  .team-page-title .button { align-self: flex-start; }
  .team-invite { grid-template-columns: 1fr; }
  .team-invite-copy { grid-column: auto; }
  .team-role-field { width: 100%; }
  .team-invite-actions { justify-content: flex-end; }
  .team-table-head, .team-row { grid-template-columns: minmax(160px, 1fr) 96px; gap: 10px; }
  .team-table-head > span:nth-child(2), .team-table-head > span:nth-child(4), .team-table-head > span:nth-child(5), .team-member-status, .team-joined { display: none; }
  .team-access { justify-items: end; }
  .team-row-actions, .team-no-action { grid-column: 1 / -1; justify-self: end; }
  .team-role-guide { display: none; }
}

/* ------------------------------------------------- runner storage item list

   One runner's disk, itemised. Reached only from that runner's own modal: a
   machine's storage is a property of the machine, not of the workspace, so it
   never earned a place in the nav beside Benchmarks and Jobs.

   Same table shape as Compare's task tray — named columns over one row per
   thing, whole row as the control, accent left-edge for what is selected —
   because it is the same kind of decision: tick the members of a set. */
/* ---------------------------------------------------------- the runner page

   Setting a runner up, watching its disk and deciding what to delete from it
   are sustained tasks with tables in them. All three used to happen in a
   modal, and the last one in a modal stacked on that modal — a scroll region
   inside a dialog inside a dialog. They are a page now, laid out like every
   other page in the console: panels down a column at the content width. */
.runner-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.runner-page-identity { margin: 14px 0 24px; }
.runner-page-identity h1 { margin: 0; font-size: 26px; letter-spacing: -.02em; }

/* Match Compare's flat workflow cards: the page and its boxes share the same
   fill, with the border — not a raised gradient — defining each section. */
#runnerView .panel {
  border-color: var(--border-soft);
  border-radius: 12px;
  background: var(--bg);
  box-shadow: none;
}

/* Three zones: what the disk holds, what can be removed, and what only applies
   to the machine. The page used to alternate between reading and deciding
   panel by panel, so neither half could be skimmed; the gap between zones is
   deliberately larger than the gap inside one, because that difference is the
   only thing doing the grouping. */
.runner-zones { display: grid; gap: 28px; }
.runner-zone { display: grid; gap: 10px; }
/* These override the page's older per-panel margins, which were an ad-hoc mix
   of 10, 14 and 16px. Inside a zone the gap owns the rhythm. */
.runner-view .runner-zone > .panel,
.runner-view .runner-zone > .panel + .panel,
.runner-view .runner-zone > .runner-storage-card,
.runner-view .runner-zone > .runner-danger-zone { margin: 0; }

/* Non-table sections use the same numbered panel header as Select
   Repositories and Compare, including their unpadded single-digit number. The number belongs to the page's reading order; the quiet
   packaging-record heading above it is the section divider. */
.runner-numbered-card { overflow: hidden; padding: 0; }
.runner-numbered-head { min-height: 72px; margin: 0 !important; padding: 15px 22px; }
.runner-numbered-head .section-number {
  top: 0; display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 8px; background: color-mix(in srgb, var(--accent) 7%, transparent);
  font-size: 10px;
}
.runner-numbered-head h2 { margin: 0; font-size: 14px; letter-spacing: -.02em; }
.runner-numbered-body { padding: 18px 22px; }
.runner-card-observed { margin: 14px 0 0; color: var(--muted-2); font-size: 9px; line-height: 1.5; }

/* Tables use Results' flat frame: the column band and rows meet the panel
   edges, with hairline row dividers and no second rounded box inside. */
.runner-table-panel { overflow: hidden; padding: 0; background: rgba(6,10,8,.25); }
/* The header carries a number and a title again, so it keeps the numbered
   card's own height and padding and lets the base rule space the two sides. */
.runner-view .runner-storage-items .panel-header { margin: 0; }
/* Two cards that answer one question between them — how full is it, and with
   what — so they sit side by side rather than stacking into two scrolls. */
.runner-page-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
/* The two cards are different heights — Docker carries four rows to Storage's
   three numbers — and the grid stretches the shorter one. Its meter belongs at
   the foot of the card it is measuring rather than floating above a gap. */
.runner-page-grid > .panel { display: flex; flex-direction: column; }
.runner-page-grid .runner-storage-meter { margin-top: auto; }
.runner-view .panel + .panel,
.runner-view .panel + form.panel { margin-bottom: 16px; }

.runner-storage-items .panel-header { gap: 20px; }
.storage-items-toolbar { display: flex; align-items: center; gap: 12px; flex: none; }
.storage-items-toolbar .repo-search-wrap { width: 260px; margin-left: auto; }
.runner-storage-items .storage-items-table { margin: 0; }
.runner-storage-items .storage-items-footer { margin: 0; padding: 14px; border-top: 1px solid rgba(255,255,255,.075); }

@media (max-width: 900px) {
  .runner-page-grid { grid-template-columns: 1fr; }
  /* Stacked, the number and title lead and the controls sit under them — the
     base rule centres a row, which would centre the heading once it wraps. */
  .runner-storage-items .panel-header { flex-direction: column; align-items: flex-start; }
  .storage-items-toolbar { width: 100%; }
  .storage-items-toolbar .repo-search-wrap { width: auto; flex: 1; }
}

.storage-items-table {
  display: flex; flex-direction: column; min-height: 0;
  overflow: hidden; border: 0; border-radius: 0;
}
.storage-items-head,
.storage-items-row {
  /* State stopped being a one-word label once it started carrying the only
     breakdown the runner sends for shared data — "311 cache records · 12 in
     use · 9.1 GB held" — so it takes its width from that rather than from
     "Built". The slack comes off Benchmark, the shortest real value here. */
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .75fr) minmax(228px, .9fr) minmax(72px, .35fr);
  gap: 12px; align-items: center; padding: 9px 16px;
}
.storage-items-head {
  color: var(--muted); font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255, 255, 255, .018); border-bottom: 1px solid rgba(255, 255, 255, .075);
}
.storage-items-head .col-item,
.storage-items-head .col-benchmark,
.storage-items-head .col-state { text-align: center; }
/* Only Size reads right-aligned: it is the column people scan down to decide
   what is worth removing, and a ragged left edge of numbers is unreadable. */
.storage-items-head .col-size,
.storage-item-size { text-align: right; }

.storage-items-list { min-height: 0; overflow: hidden; }
.storage-items-list.scrollable { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.storage-items-list.scrollable::-webkit-scrollbar { width: 8px; }
.storage-items-list.scrollable::-webkit-scrollbar-track { background: rgba(255,255,255,.018); }
.storage-items-list.scrollable::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--accent) 32%, #26302b); background-clip: padding-box; }

.storage-items-row { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.storage-items-row + .storage-items-row { border-top: 1px solid rgba(255, 255, 255, .045); }
.storage-items-row:hover { background: rgba(255, 255, 255, .028); }
.storage-items-row:focus-visible { outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -1px; }
/* Selected means "this is going to be deleted", so it is marked in the palette
   that means loss everywhere else in the console rather than in the accent,
   which everywhere else means "included in what you are about to run". */
.storage-items-row.selected { background: color-mix(in srgb, var(--crit) 9%, transparent); box-shadow: inset 3px 0 0 var(--crit); }
.storage-items-row.selected:hover { background: color-mix(in srgb, var(--crit) 13%, transparent); }

.storage-item-identity { min-width: 0; }
.storage-item-identity strong { display: block; overflow: hidden; color: var(--text); font-size: 11px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.storage-item-benchmark { min-width: 0; overflow: hidden; color: var(--muted); font: 500 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.storage-item-state { min-width: 0; overflow: hidden; color: var(--muted-2); font: 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.storage-item-size { color: #bac5c0; font: 600 11px var(--mono); white-space: nowrap; }

.storage-items-empty { padding: 26px 16px; color: var(--muted); font-size: 12px; text-align: center; }

/* The button holds the right edge whether or not the selection line is there
   to sit opposite it — space-between put it back on the left the moment the
   line was hidden, which is most of the time. */
.storage-items-footer { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 16px; }
.storage-items-selection { margin: 0; color: var(--muted); font: 500 11.5px var(--mono); }
/* The one destructive button in this dialog, so it says so in colour as well
   as in its label. */
.button.primary.danger { border-color: color-mix(in srgb, var(--crit) 45%, transparent); background: color-mix(in srgb, var(--crit) 16%, transparent); color: #ffd7de; }
.button.primary.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--crit) 26%, transparent); }

@media (max-width: 720px) {
  .storage-items-head,
  .storage-items-row { grid-template-columns: minmax(0, 1fr) auto; }
  .storage-items-head .col-benchmark,
  .storage-items-head .col-state,
  .storage-item-benchmark,
  .storage-item-state { display: none; }
}

/* Nothing reclaimable: every byte is pinned by something running, so the row
   reports the weight that brought someone here but is not offered as a
   choice. Same inert treatment a review task gets in Compare's task list. */
.storage-items-row.pinned { cursor: default; }
.storage-items-row.pinned:hover { background: transparent; }
.storage-items-row.pinned .storage-item-identity strong { color: var(--muted); }
.storage-items-row.pinned .storage-item-benchmark,
.storage-items-row.pinned .storage-item-state,
.storage-items-row.pinned .storage-item-size { opacity: .6; }

/* What the click would free, opposite the button that would do it. */
.storage-items-footer .storage-items-selection { margin-right: auto; }

/* The same provider tiles the setup modal draws, on the machine page and
   carrying one thing more: where this runner found the key, which is where
   someone goes to change it. The tile claims presence, never that the key
   works — the runner reports the variable is set, and nothing has called the
   provider with it. */
.runner-provider-list li { width: 118px; }
.runner-provider-list li > small { color: var(--muted-2); font-size: 9px; line-height: 1.35; }
/* The dot's ring is the surface it sits on, and this card is darker than the
   modal the tiles came from. */
.runner-provider-list .connected-provider-mark::after { border-color: #0b1012; }
.runner-provider-list [data-credential-state="rejected"] .connected-provider-mark::after { background: var(--crit); }
/* A rejected key is the one tile worth finding without reading every label,
   and the only verdict the runner's report can carry. */
.runner-provider-list [data-credential-state="rejected"] { border-color: rgba(255,92,122,.3); background: rgba(255,92,122,.05); }
.runner-provider-list [data-credential-state="rejected"] > small { color: var(--crit); }
.runner-provider-card .credential-unavailable { margin: 0; font-size: 10px; line-height: 1.5; }
.runner-provider-add { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.runner-provider-command { margin-top: 16px; }
.runner-provider-action { display: grid; gap: 7px; }
.runner-provider-action > strong { color: var(--muted); font-size: 10px; }
.runner-provider-remove-list { display: grid; gap: 12px; margin-top: 14px; }
.runner-cloud-page { margin-top: 0; }


/* Machine-level decisions live apart from storage tuning; nothing here is
   undoable. */
.runner-danger-zone { margin: 0; padding: 0; border: 1px solid var(--border-soft); background: var(--panel); }

/* One grid for every block in the card: the name of the thing and the control
   that does it share a line, and the sentence explaining it runs the full
   width underneath rather than being squeezed into the column beside a link
   that is three words long. Auto-placement does the work — mark, then title
   and action, then the paragraph and any command block spanning both. */
.runner-danger-block { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; row-gap: 12px; }
.runner-danger-block-text { display: grid; gap: 7px; }
.runner-danger-block-text > strong { font-size: 11px; letter-spacing: -.01em; }
.runner-danger-block-text > p { margin: 0; color: var(--muted-2); font-size: 11px; line-height: 1.55; }
/* The link answers the whole block, not its title line, so it centres against
   the mark, the heading and the sentence together. */
.runner-danger-block > .runner-danger-actions { justify-self: end; align-self: center; }
.runner-danger-block > .runner-install-command { grid-column: 1 / -1; }
.runner-danger-block > .runner-install-command code { font-size: 10px; }
.runner-removal-step-mark { color: var(--muted-2); font: 700 8px var(--mono); letter-spacing: .09em; text-transform: uppercase; }

/* The steps and the workspace action are one column of decisions, divided by
   hairlines rather than boxed apart. */
.runner-removal-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.runner-danger-zone .runner-numbered-body > * + *,
.runner-removal-steps > li + li { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-soft); }

/* Destructive actions read in the critical colour throughout this card, and
   brighten rather than turning accent-green on hover the way a neutral text
   button does. */
.runner-danger-zone .text-button.danger { color: var(--crit); }
.runner-danger-zone .text-button.danger:hover { color: #ff879e; }
.runner-danger-zone .text-button.danger:focus-visible { outline: 2px solid var(--crit); outline-offset: 3px; border-radius: 3px; }

@media (max-width: 720px) {
  /* Stacked, the control drops under the title it belongs to and holds the
     left edge with it, rather than floating out at the far margin. */
  .runner-danger-block { grid-template-columns: minmax(0, 1fr); }
  .runner-danger-block > .runner-danger-actions { justify-self: start; }
}
.runner-danger-actions { display: flex; align-items: center; gap: 12px; flex: none; }

/* A scope's own resources, nested under it. Indented rather than flattened:
   three scope rows are the shape of the question someone came with, and 247
   cache records sitting alongside eight task environments is the shape of
   nothing. */
.storage-item-toggle {
  flex: none; width: 18px; height: 18px; display: grid; place-items: center;
  margin-right: 2px; padding: 0; border: 0; border-radius: 5px;
  background: transparent; color: var(--muted-2); cursor: pointer;
  transition: color .14s ease, background .14s ease;
}
.storage-item-toggle:hover { color: var(--text); background: rgba(255,255,255,.07); }
.storage-item-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.storage-item-toggle i {
  width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translate(-1px, -2px) rotate(-45deg); transition: transform .18s cubic-bezier(.2,.7,.3,1);
}
.storage-item-toggle.open i { transform: translate(-1px, -1px) rotate(45deg); }
.storage-items-row .storage-item-identity { display: flex; align-items: center; gap: 6px; }

/* The rail is the indent: a hairline down the left of every child says which
   parent they belong to without spending a column on it. */
.storage-items-row.child { padding-left: 46px; position: relative; }
.storage-items-row.child::before {
  content: ""; position: absolute; left: 30px; top: 0; bottom: 0;
  border-left: 1px solid rgba(255,255,255,.07);
}
.storage-items-row.child .storage-item-identity strong { font-weight: 500; }
.storage-items-row.child .storage-item-identity strong,
.storage-items-row.child .storage-item-size { font-family: var(--mono); font-size: 10.5px; }

@media (prefers-reduced-motion: reduce) {
  .storage-item-toggle i { transition: none; }
}

/* ================================================================== */
/* Select Repositories — status, not guesswork.

   Three different situations drew the same centred box here: a list still
   loading, a list that came back empty, and a list waiting on something the
   customer has to do somewhere else. So the panel's answer to "what now" had
   the same shape as its answer to "nothing yet", and a grid of cards with a
   tinted border for the chosen one never said the cards were choosable at all.

   The states below answer each of those separately and quietly: the
   placeholders take the card's own geometry so a list still coming cannot be
   read as one that came back empty, and the pick marker is an empty ring
   until it isn't. */

/* Placeholders in the card's own geometry: same height, same identity block,
   same four-column stats rule. A list that arrives replaces them in place
   instead of shoving the panel around, and a list still coming can no longer
   be read as a list that came back empty. */
.repo-skeleton {
  position: relative; overflow: hidden;
  min-height: 128px; display: flex; flex-direction: column;
  padding: 16px; border: 1px solid var(--border-soft); border-radius: 13px;
}
.repo-skeleton span { display: block; border-radius: 4px; background: rgba(255,255,255,.055); }
.repo-skeleton .sk-owner { width: 36%; height: 7px; }
.repo-skeleton .sk-name { width: 68%; height: 13px; margin-top: 9px; }
.repo-skeleton .sk-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px;
  margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.055);
}
.repo-skeleton .sk-stats span { height: 7px; }
/* One sweep travelling across the grid rather than each card blinking on its
   own — the stagger is what makes it read as one list loading. */
.repo-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 22%, color-mix(in srgb, var(--accent) 7%, transparent) 50%, transparent 78%);
  background-size: 220% 100%;
  animation: repo-skeleton-sweep 1.6s ease-in-out infinite;
}
.repo-skeleton:nth-child(3n+2)::after { animation-delay: .12s; }
.repo-skeleton:nth-child(3n)::after { animation-delay: .24s; }
/* The sweep moves the gradient rather than the layer holding it: a transform
   that slides a full-bleed pseudo-element off its own card is the one thing
   the rail's own tests forbid anywhere in this sheet. */
@keyframes repo-skeleton-sweep { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* A value that is still coming, told apart from a value that does not exist.
   The catalog's snapshots predate two of the four columns, so both cases are
   real on the same card. */
.stat-pending {
  display: inline-block; width: 32px; height: 7px; vertical-align: middle;
  border-radius: 3px; background: rgba(255,255,255,.075);
  animation: repo-stat-pulse 1.5s ease-in-out infinite;
}
@keyframes repo-stat-pulse { 50% { opacity: .22; } }

/* The card said "selected" with a border tint and said nothing at all about
   being selectable, so a full grid read as a report rather than a choice. An
   empty ring at rest is the entire affordance; hover warms it, the pick fills
   it. Scoped to this list — the benchmark and comparison grids reuse
   .repo-row and get no marker. */
/* Scoped to the marker rather than to #repoList: the benchmark and comparison
   grids reuse .repo-row and simply do not render one, so carrying the element
   is what opts a card in. An id would have left an unstyled SVG behind
   anywhere the card is reused with a marker in it. */
.repo-row:has(.repo-pick) .repo-identity { padding-right: 26px; }
.repo-row .repo-pick {
  position: absolute; top: 15px; right: 15px;
  width: 19px; height: 19px; display: grid; place-items: center;
  border: 1px solid #33413b; border-radius: 50%;
  color: transparent; background: transparent;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.repo-row .repo-pick svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.repo-row:hover .repo-pick,
.repo-row:focus-visible .repo-pick { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: color-mix(in srgb, var(--accent) 55%, transparent); }
.repo-row.selected .repo-pick { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.repo-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The empty states carry real sentences now, so they wrap. The nowrap here was
   sized to one specific line and clipped anything longer. */
.empty-state.repo-empty-state span { max-width: 46ch; white-space: normal; text-wrap: balance; }
.empty-state.repo-empty-state .button { margin-top: 20px; }
/* A wait wears a spinner, an instruction wears a glyph. The orbit ring is the
   same either way, so the two states stay recognisably the same component. */
.repo-empty-waiting { border-style: solid; border-color: #2c3a35; color: var(--accent); }
.repo-empty-waiting .mini-spinner { width: 15px; height: 15px; border-width: 1.5px; }

@media (prefers-reduced-motion: reduce) {
  .repo-skeleton::after { animation: none; }
  .stat-pending { animation: none; }
}