@charset "UTF-8";.evals-empty[data-astro-cid-uqo5cbuz]{border:1px dashed var(--neutral-outline-3);padding:var(--s10) var(--s6);text-align:center;display:flex;flex-direction:column;gap:var(--s2);align-items:center}.evals-empty[data-astro-cid-uqo5cbuz] p[data-astro-cid-uqo5cbuz]{margin:0}.evals-empty[data-astro-cid-uqo5cbuz] .subtitle-m[data-astro-cid-uqo5cbuz]{color:var(--neutral-fg-1)}.evals-empty[data-astro-cid-uqo5cbuz] .body-s[data-astro-cid-uqo5cbuz]{color:var(--neutral-fg-3);max-width:480px}.eval-changelog__layout[data-astro-cid-utrvhzci]{--gap: calc(var(--s8) * 2);align-items:flex-start;justify-content:space-between;flex-wrap:nowrap}.eval-changelog__intro[data-astro-cid-utrvhzci]{flex:0 1 360px;width:100%;max-width:360px}.eval-changelog__releases[data-astro-cid-utrvhzci]{--timeline-gutter: var(--s8);flex:1 1 552px;width:100%;max-width:552px;box-sizing:border-box;padding-left:var(--timeline-gutter)}.eval-changelog__release[data-astro-cid-utrvhzci]{position:relative}.eval-changelog__release[data-astro-cid-utrvhzci]:not(:last-child){padding-bottom:var(--s14)}.eval-changelog__release[data-astro-cid-utrvhzci]{}.eval-changelog__release[data-astro-cid-utrvhzci]::before{content:"";position:absolute;z-index:1;top:2px;left:calc(var(--timeline-gutter) * -1);width:var(--s4);height:var(--s4);box-sizing:border-box;border:1px solid var(--primary-badge-outline);border-radius:50%;background:radial-gradient(circle,var(--primary-fg) 0 var(--s1),transparent var(--s1)),var(--blue-badge-bg)}.eval-changelog__release[data-astro-cid-utrvhzci]{}.eval-changelog__release[data-astro-cid-utrvhzci]:not(:last-child)::after{content:"";position:absolute;top:10px;bottom:-10px;left:calc(var(--s2) - var(--timeline-gutter));width:1px;background:var(--neutral-outline-2)}.eval-changelog__release-link[data-astro-cid-utrvhzci]{display:block;color:inherit;text-decoration:none}.eval-changelog__release-link[data-astro-cid-utrvhzci]:hover,.eval-changelog__release-link[data-astro-cid-utrvhzci]:focus-visible{text-decoration:none}.eval-changelog__release-link[data-astro-cid-utrvhzci]:hover .eval-changelog__release-meta[data-astro-cid-utrvhzci],.eval-changelog__release-link[data-astro-cid-utrvhzci]:focus-visible .eval-changelog__release-meta[data-astro-cid-utrvhzci]{color:var(--primary-fg)}.eval-changelog__release-meta[data-astro-cid-utrvhzci]{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);color:var(--neutral-fg-3);text-transform:uppercase;transition:color 0.2s ease}.eval-changelog__tag[data-astro-cid-utrvhzci]{color:var(--primary-fg);text-transform:none}.eval-changelog__arrow[data-astro-cid-utrvhzci]{display:inline-flex}.eval-changelog__arrow[data-astro-cid-utrvhzci] svg{width:var(--s4);height:var(--s4)}.eval-changelog__title[data-astro-cid-utrvhzci]{margin-top:var(--s4)}.eval-changelog__description[data-astro-cid-utrvhzci]{margin-top:var(--s1);color:var(--neutral-fg-2)}@media (max-width: 60rem){.eval-changelog__layout[data-astro-cid-utrvhzci]{flex-direction:column;--gap: var(--s6)}.eval-changelog__intro[data-astro-cid-utrvhzci],.eval-changelog__releases[data-astro-cid-utrvhzci]{flex-basis:auto}}@media (max-width: 1024px){.eval-changelog__github-link[data-astro-cid-utrvhzci]{display:none}}
/* Global, and scoped by `.evals-page` rather than by Astro.
 *
 * This overrides `page.scss`'s shared `main > section { margin: 200px 0; }`
 * to bring the page onto a denser rhythm; `/pricing` overrides the same
 * default the same way. See the comment on `.evals-hero.hero` above for the
 * measurements.
 *
 * It was a scoped block, and that silently half-worked. Astro scoping only
 * reaches elements this file renders, so the three sections written here
 * moved to 96px while `<EvalChangelog />` — whose root `<section>` lives in
 * its own component file — kept the shared 200px. The result was a page with
 * two rhythms: 96px from the counters to Results, 200px from Results to the
 * changelog, which reads as an accident because it was one.
 *
 * `.evals-page > section` catches both, since every section is a direct child
 * of `main`, and the class keeps it off every other page. Any future section
 * extracted into a component inherits the rhythm rather than falling back to
 * the default the way that one did.
 *
 * The hero's own top-of-page padding and its `.hero + section { margin-top:
 * 0 }` are untouched: this only changes the margin `page.scss` leaves at
 * 200px, not the parts other rules already own. */
.evals-page > section {
  margin: calc(var(--s1) * 24) 0;
}
/* ---------------------------------------------------------------------
 * `/evals` results section. Global (not scoped) because the table, the
 * segmented controls and the drill-down sheet are all rendered by the
 * `EvalsApp` React island — see `src/components/scenes/evals/` — and
 * Astro's scoped-style attribute is only applied to markup the Astro
 * compiler itself emits, not to elements React renders client-side.
 * Every rule below is prefixed by a class from that island, so nothing
 * here should leak into the rest of the site.
 * ------------------------------------------------------------------- */
/* The shared `.hero` reserves 200px beneath its content for media or CTAs.
 * This compact hero leads directly into the results table, so it uses a
 * smaller collapsing margin instead. */
.evals-hero.hero {
  position: relative;
  isolation: isolate;
  padding-bottom: 0;
}

.evals-hero__background {
  position: absolute;
  z-index: 0;
  top: calc(50% + var(--s10));
  left: 50%;
  width: calc(100% + var(--s12));
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: 0.65;
  mix-blend-mode: multiply;
  transform: translate(-50%, -50%);
}

.evals-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(50% + var(--s10));
  left: 50%;
  width: calc(100% + var(--s12));
  aspect-ratio: 1297/313;
  pointer-events: none;
  background: linear-gradient(to right, var(--tan-bg) 0%, color-mix(in srgb, var(--tan-bg) 50%, transparent) 24%, color-mix(in srgb, var(--tan-bg) 50%, transparent) 76%, var(--tan-bg) 100%);
  transform: translate(-50%, -50%);
}

.evals-hero > h1,
.evals-hero__copy {
  position: relative;
  z-index: 2;
}

html.dark .evals-hero__background {
  opacity: 0.4;
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: screen;
}

@media (max-width: 1024px) {
  .evals-hero__background {
    display: none;
  }
  .evals-hero::after {
    content: none;
  }
}
/* The copy column is itself a `.flex`, so its local `--gap` previously
 * changed the width calculation inherited from `.flex__half` and pushed it
 * onto a second row by two pixels. Size both hero children from the parent
 * gap explicitly so the copy remains beside the heading. */
.evals-hero > .flex__half {
  width: calc(50% - var(--s3));
}
@media (max-width: 1024px) {
  .evals-hero > .flex__half {
    width: 100%;
  }
}

/* Two columns at desktop — heading left, intro right, matching
 * Supabase's own hero — rather than the heading stacked full-width above
 * a measure-limited paragraph, which read as arbitrary truncation with
 * dead space beside it. `.flex__half` (`global.scss`) already stacks
 * these to full width at `$tablet_portrait`. */
.evals-intro {
  max-width: 640px;
  color: var(--neutral-fg-2);
}

.evals-intro__container {
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--s1);
}

.evals-section-description {
  max-width: 640px;
  color: var(--neutral-fg-2);
  margin: 0;
}

.evals-results {
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
}

.evals-results > astro-island {
  display: block;
  width: 100%;
  min-width: 0;
}

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

.truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Segmented control (group-by, experiment suite) */
.segmented-control {
  display: inline-flex;
  padding: var(--s1);
  gap: var(--s1);
  background: var(--bg-1);
  border: 1px solid var(--neutral-outline-1);
  border-radius: var(--radius-xl);
}

.segmented-control__option {
  white-space: nowrap;
}
.segmented-control__option.button--minimal {
  color: var(--neutral-fg-2);
}
.segmented-control__option.button--minimal:hover {
  background-color: transparent;
}
.segmented-control__option.button--secondary:hover {
  background-color: var(--bg-0);
}

/* Results app shell */
.evals-app {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  width: 100%;
  min-width: 0;
}

/* Results table */
.results-table__empty {
  padding: var(--s10) var(--s4);
  color: var(--neutral-fg-3);
  text-align: center;
}

/* The card: border, radius and background live here so the toolbar and the
 * (independently horizontal-scrolling) table sit inside one surface, the
 * two segmented controls at its top like Supabase's — not floating above
 * it as a separate row. */
.results-table {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.results-table__card {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  border-radius: var(--radius);
  background: var(--bg-0);
  box-shadow: var(--elevation-small);
  overflow: hidden;
}

.results-table__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s3);
  padding: var(--s4) var(--s4) 0;
}

.results-table__scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.results-table__scroll-shell {
  position: relative;
  width: 100%;
  min-width: 0;
}
.results-table__scroll-shell::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--s8);
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--bg-0));
  opacity: 0;
  transition: opacity 120ms ease;
}
.results-table__scroll-shell.has-right-overflow::after {
  opacity: 1;
}

/* Percentage summary table. The skills arm is filtered before it reaches
 * this component. The comparison columns pivot between journey stages and
 * models depending on the selected row grouping. */
.results-summary__table {
  --score-gap: var(--s2);
  --label-column-width: 360px;
  --score-column-width: 200px;
  width: 100%;
  min-width: var(--summary-table-min-width, 720px);
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: var(--neutral-fg-1);
}
.results-summary__table th {
  text-align: left;
  font-weight: 400;
}
.results-summary__table > thead > tr > th {
  padding: var(--s4) var(--s4) var(--s2);
  font-size: var(--s3-5);
  font-weight: 500;
  line-height: var(--s5);
  letter-spacing: 0.07px;
  color: var(--neutral-fg-2);
  border-bottom: 1px solid var(--neutral-outline-1);
}
.results-summary__table > thead > tr > th:not(:first-child) {
  text-align: center;
}
.results-summary__table > thead > tr > th:not(:first-child) .model-label {
  display: flex;
  justify-content: center;
  vertical-align: initial;
  white-space: nowrap;
}
.results-summary__table > tbody > tr > th,
.results-summary__table > tbody > tr > td {
  border-bottom: 1px solid var(--neutral-outline-1);
}
.results-summary__table > tbody > tr:last-child > th,
.results-summary__table > tbody > tr:last-child > td {
  border-bottom: none;
}

.results-summary__label-column {
  width: var(--label-column-width);
}

.results-summary__score-column {
  width: var(--score-column-width);
}

.results-summary__table > thead > tr > th:not(:first-child),
.results-summary__score-cell {
  min-width: var(--score-column-width);
}

.results-summary__table > thead > tr > th:first-child,
.results-summary__row > th:first-child {
  min-width: var(--label-column-width);
  position: sticky;
  left: 0;
  z-index: 2;
}

.results-summary__table > thead > tr > th:first-child {
  z-index: 3;
  background: var(--bg-0);
}

.results-summary__row > th:first-child {
  background: inherit;
}

.results-summary__row {
  cursor: pointer;
  background: var(--bg-0);
  transition: background-color 150ms ease;
}
.results-summary__row:hover, .results-summary__row.is-expanded {
  background: var(--bg-1);
}

.results-summary__row.is-expanded > th,
.results-summary__row.is-expanded > td {
  border-bottom: none;
}

.results-summary__row-heading {
  padding: var(--s2) var(--s4);
  vertical-align: middle;
}

.results-summary__row-toggle {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-width: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.results-summary__row-toggle:hover {
  background: transparent;
}

.results-summary__chevron {
  width: var(--s6);
  height: var(--s6);
  flex: none;
  color: var(--neutral-fg-2);
  transform: rotate(-90deg);
  transition: transform 150ms ease;
}

.results-summary__row-toggle[aria-expanded=true] .results-summary__chevron {
  transform: rotate(0deg);
}

.results-summary__identity {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
  flex: 1;
}

.results-summary__rank {
  width: var(--s5);
  flex: none;
  color: var(--neutral-fg-2);
  text-align: center;
}

.results-summary__label {
  min-width: 0;
  font-size: var(--s4);
  font-weight: 500;
}

.results-summary__average {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: var(--s6);
  padding: 0 var(--s1);
  border: 1px solid;
  border-radius: var(--radius-s);
}

.results-summary__score-cell {
  padding-block: var(--s2);
  padding-inline: calc(var(--score-gap) / 2);
  vertical-align: middle;
}

.results-summary__score-cell:first-of-type {
  padding-left: var(--score-gap);
}

.results-summary__score-cell:last-child {
  padding-right: var(--score-gap);
}

.results-summary__score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  width: 100%;
  padding: var(--s1-5) var(--s3);
  border: 1px solid;
  border-radius: var(--radius);
  box-shadow: none;
  font-family: JetBrains Mono, monospace;
  cursor: inherit;
}

.results-summary__score-value {
  grid-column: 2;
}

.results-summary__delta {
  grid-column: 3;
  justify-self: end;
  font-size: 12px;
  line-height: 100%;
  white-space: nowrap;
}

.results-summary__average.result--pass,
.results-summary__score.result--pass {
  color: var(--color-success);
  border-color: var(--color-success-outline);
  background: var(--color-success-surface);
}

.results-summary__average.result--warn,
.results-summary__score.result--warn {
  color: var(--neutral-fg-1);
  border-color: var(--color-warning-outline);
  background: var(--color-warning-surface);
}

.results-summary__average.result--fail,
.results-summary__score.result--fail {
  color: var(--color-danger);
  border-color: var(--color-danger-outline);
  background: var(--color-danger-surface);
}

.results-summary__not-run {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s1-5) var(--s3);
  color: var(--neutral-fg-3);
  border: 1px solid transparent;
}

.results-summary__identity .model-label__icon-img {
  width: var(--s5);
  height: var(--s5);
}

.results-summary__expanded-row > td {
  padding: 0;
  background: var(--bg-1);
}

.results-expanded {
  margin: 0 var(--s4) var(--s4);
  border: 1px solid var(--neutral-outline-1);
  border-radius: var(--radius);
  background: var(--bg-0);
  overflow: hidden;
}

.results-expanded__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.results-expanded__table th,
.results-expanded__table td {
  padding: var(--s3) var(--s4);
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid var(--neutral-outline-1);
}
.results-expanded__table th:first-child {
  width: 36%;
}
.results-expanded__table.is-single-column th:first-child {
  width: 100%;
}
.results-expanded__table thead th {
  padding-block: var(--s2);
  font-size: var(--s3-5);
  font-weight: 500;
  line-height: var(--s5);
  letter-spacing: 0.07px;
  color: var(--neutral-fg-2);
  background: var(--bg-1);
}
.results-expanded__table tbody th {
  color: var(--neutral-fg-1);
}
.results-expanded__table tbody td {
  color: var(--neutral-fg-2);
}
.results-expanded__table > tbody > tr:last-child > th,
.results-expanded__table > tbody > tr:last-child > td {
  border-bottom: none;
}

.results-expanded__row {
  cursor: pointer;
  transition: background-color 150ms ease;
}
.results-expanded__row:hover, .results-expanded__row.is-expanded {
  background: var(--bg-1);
}

.results-expanded__row.is-expanded > th,
.results-expanded__row.is-expanded > td {
  border-bottom: none;
}

.results-expanded__row-heading {
  padding: 0 !important;
}

.results-expanded__row-toggle {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-width: 0;
  padding: var(--s3) var(--s4);
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  font-family: inherit;
  font-size: var(--s4);
  line-height: var(--s6);
  letter-spacing: 0.08px;
  cursor: pointer;
}
.results-expanded__row-toggle:hover {
  background: transparent;
}

.results-expanded__row-toggle[aria-expanded=true] .results-summary__chevron {
  transform: rotate(0deg);
}

.results-expanded__detail-row > td {
  padding: 0 var(--s4) var(--s4);
  background: var(--bg-1);
}

.results-expanded__details {
  padding: var(--s4);
  border: 1px solid var(--neutral-outline-1);
  border-radius: var(--radius);
  background: var(--bg-1);
}

.results-product__evals,
.results-agent__evals {
  overflow: hidden;
  border: 1px solid var(--neutral-outline-1);
  border-radius: var(--radius);
  background: var(--bg-0);
}

.results-expanded__performance {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
  flex: 1;
}

.results-expanded__label {
  min-width: 0;
}

@media (max-width: 744px) {
  .evals-hero > h1,
  .evals-intro {
    text-align: center;
  }
  .evals-intro__container {
    align-items: center;
    justify-content: center;
  }
  .results-table__toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-inline: var(--s3);
  }
  .segmented-control {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    width: 100%;
  }
  .segmented-control__option {
    justify-content: center;
    width: 100%;
    text-align: center;
  }
  .results-summary__table {
    min-width: max-content;
    table-layout: auto;
  }
  .results-summary__table > thead > tr > th:first-child,
  .results-summary__row > th:first-child {
    position: static;
  }
  .results-summary__label {
    flex: none;
    overflow: visible;
    text-overflow: clip;
  }
  .results-summary__row-heading {
    padding: var(--s3);
  }
  .results-summary__rank {
    display: none;
  }
}
.results-table__table {
  /* `width: 100%` plus every column below sized in `%` (via `<colgroup>`
   * in `ResultsTable.tsx`) rather than a fixed pixel count: percentages
   * always sum to the full table width regardless of how many columns the
   * current pivot has, so the table fills the card instead of stopping
   * partway across it. `table-layout: fixed` still matters — it's what
   * stops a column resizing when the pivot, the suite or the selection
   * changes, since the `<colgroup>` widths are the only thing that decide
   * layout rather than each cell's content.
   *
   * `border-collapse: separate` (not `collapse`) is also deliberate: cells
   * only ever declare a border on their own right/bottom edge (never
   * left/top), so two adjoining cells still render a single 1px seam
   * either way and it looks identical — but `collapse` computes a shared
   * border grid that sits outside any one cell's box, which measurably
   * added a few px to the table beyond the colgroup sum and landed all of
   * it on one column.
   */
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 13px;
}

.results-table__row-header {
  text-align: left;
  vertical-align: top;
  padding: var(--s3) var(--s4);
  font-weight: 500;
  color: var(--neutral-fg-1);
  border-right: 1px solid var(--neutral-outline-1);
  border-bottom: 1px solid var(--neutral-outline-1);
}

thead .results-table__row-header {
  font-family: JetBrains Mono, monospace;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--neutral-fg-3);
}

tbody .results-table__row-header {
  cursor: pointer;
}

.results-table__family-row th {
  padding-bottom: var(--s1);
  border-bottom: none;
}

.results-table__family {
  text-align: left;
  vertical-align: bottom;
  padding: var(--s3) var(--s2) var(--s1);
  /* Never wrap: this cell can be as narrow as one data column (a family
   * with only one arm), and a two-line family header pushes the column
   * header row beneath it out of alignment with every other column. A
   * badge here used to force exactly that wrap, which is why nothing but
   * the label goes in this cell. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.results-table__family-label {
  font-weight: 500;
  color: var(--neutral-fg-1);
  margin-right: var(--s2);
}

.results-table__legend {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  padding: var(--s2) var(--s4);
  text-align: center;
  color: var(--neutral-fg-3);
  background: var(--bg-1);
  border: 1px solid var(--neutral-outline-1);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}
.results-table__legend::before {
  position: absolute;
  top: calc(-1 * var(--radius));
  right: -1px;
  left: -1px;
  height: var(--radius);
  content: "";
  pointer-events: none;
  background: var(--bg-1);
  border-right: 1px solid var(--neutral-outline-1);
  border-left: 1px solid var(--neutral-outline-1);
}
.results-table__legend p {
  margin: 0;
  color: var(--neutral-fg-3);
}
.results-table__legend p a {
  color: inherit;
}

/* Column and cell hover: a faint tint only, on the button inside rather
 * than a border — see the button rules below for why a border ever
 * appeared here at all. Matches Supabase's own restraint: hovering their
 * table does nothing more than this. */
.results-table__column {
  padding: 0;
  border-right: 1px solid var(--neutral-outline-1);
  border-bottom: 1px solid var(--neutral-outline-1);
}
.results-table__column.is-hovered {
  background: var(--bg-1);
}

.results-table__column-button {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  background: none;
  border: none;
  /* `box-shadow: none` and `border-radius: 0` undo the site-wide `button`
   * rule (`global.site.scss`), which gives every unstyled `<button>` a
   * blue `--button-primary-shadow` (an inset highlight plus a 1px
   * `#0036a3` outer ring) and a rounded corner. Applied to a button that
   * fills an entire table cell, that ring reads as a heavy blue border
   * around every header, and adjacent cells' rounded corners show through
   * as small diamond gaps where two rings meet. Neither is a hover
   * effect — both were present at rest — hovering just added a solid
   * `--primary-blue-bg-hover` fill (see `:hover` below) on top of it,
   * which is what made the header text unreadable. */
  box-shadow: none;
  border-radius: 0;
  text-align: left;
  padding: var(--s2) var(--s3);
  font-family: inherit;
}
.results-table__column-button:hover {
  background-color: transparent;
}

.results-table__column-label {
  width: 100%;
  font-family: JetBrains Mono, monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--neutral-fg-2);
}

/* Arm labels are values, not column names: "+skills" is how the experiment
 * is written everywhere else, and uppercasing it here made the same label
 * read differently between the Journey view and the others. */
.results-table__column-label.is-arm {
  text-transform: none;
  letter-spacing: normal;
}

.results-table__column-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.results-table__column-meta .mono-xs {
  color: var(--neutral-fg-3);
}
.results-table__column-meta .body-xs {
  color: var(--neutral-fg-3);
  font-weight: 400;
}

.results-table__cell {
  padding: 0;
  border-right: 1px solid var(--neutral-outline-1);
  border-bottom: 1px solid var(--neutral-outline-1);
}
.results-table__cell.is-hovered {
  background: var(--bg-1);
}

.results-table__cell-button {
  cursor: pointer;
  display: block;
  width: 100%;
  background: none;
  border: none;
  /* See `.results-table__column-button` above — same site-wide leak, same
   * fix. */
  box-shadow: none;
  border-radius: 0;
  text-align: left;
  padding: var(--s3);
  font-family: inherit;
}
.results-table__cell-button:hover {
  background-color: transparent;
}

.results-table__total-header {
  text-align: left;
  vertical-align: top;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--neutral-outline-1);
  font-family: JetBrains Mono, monospace;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--neutral-fg-3);
  /* An arm label in the Total column is the same label as in the data
     columns, so it has to look the same. It did not: uppercased, letter-
     spaced, a step lighter, and sitting 9px higher because this cell aligns
     to the top while the data headers align to the middle. Four small
     differences that together read as a different kind of thing.
     "Total" itself still uppercases — that is a column name, not a value. */
}
.results-table__total-header.is-arm {
  vertical-align: middle;
  text-transform: none;
  letter-spacing: normal;
  color: var(--neutral-fg-2);
}

.results-table__total-cell {
  padding: var(--s3);
  border-bottom: 1px solid var(--neutral-outline-1);
  white-space: nowrap;
}

/* Subordinate to the fraction: the percentage is for scanning down a column,
   the fraction is the claim. */
.results-table__total-rate {
  opacity: 0.7;
}

/* The skills arm beside a model name on the row axis. Quiet: the model name
 * is the subject and the arm is which of its two runs this is. */
.results-table__row-arm {
  color: var(--neutral-fg-3);
  font-family: JetBrains Mono, monospace;
  font-size: 11px;
}

.results-table__row {
  cursor: pointer;
  background: var(--bg-0);
  transition: background-color 150ms;
}
.results-table__row:hover {
  background: var(--bg-1);
}
.results-table__row:last-child th,
.results-table__row:last-child td {
  border-bottom: none;
}

/* Result states (pass / fail / contaminated pass / not-run): coloured
 * text, no pill. A 15x6 grid of bordered, backgrounded badges reads as
 * noise before it reads as data — Supabase's own table carries the same
 * information as plain `Pass`/`Fail`/percentage text, colour-coded and
 * nothing else. */
.result {
  font-family: JetBrains Mono, monospace;
  font-size: 12px;
}

.result--pass {
  color: var(--color-success);
}

.result--warn {
  color: var(--color-warning);
}

.result--fail {
  color: var(--color-danger);
}

.result--not-run {
  color: var(--neutral-fg-3);
  font-style: italic;
}

.result__asterisk {
  color: var(--color-warning);
  font-weight: 700;
  cursor: help;
  margin-left: 1px;
}

/* Model label (agent icon + model name) */
.model-label {
  display: inline-flex;
  align-items: center;
  gap: var(--s1-5);
  vertical-align: middle;
}

.model-label__icon {
  display: inline-flex;
  flex: none;
}

.model-label__icon-img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.model-label__icon-img--light {
  display: inline-block;
}

.model-label__icon-img--dark {
  display: none;
}

html.dark .model-label__icon-img--light {
  display: none;
}

html.dark .model-label__icon-img--dark {
  display: inline-block;
}

.model-label__agent {
  color: var(--neutral-fg-1);
}

.model-label__model {
  color: var(--neutral-fg-2);
}

/* Selection sheet */
.eval-sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.eval-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 18, 0.32);
}

.eval-sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(720px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--bg-0);
  box-shadow: var(--elevation-xl);
  border-left: 1px solid var(--neutral-outline-1);
}

.eval-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s6);
  border-bottom: 1px solid var(--neutral-outline-1);
}

.eval-sheet__title {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-width: 0;
}

.eval-sheet__eyebrow {
  color: var(--neutral-fg-3);
}

.eval-sheet__summary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: none;
}

.eval-sheet__rate {
  font-family: JetBrains Mono, monospace;
}
.eval-sheet__rate.is-pass {
  color: var(--color-success);
}
.eval-sheet__rate.is-warn {
  color: var(--color-warning);
}
.eval-sheet__rate.is-fail {
  color: var(--color-danger);
}

/* The skills arm, in the sheet header and its table. Written the way it is
   everywhere else on the page — `+skills`, `-no-skills` — and subordinate to
   the model name it qualifies. */
/* Baseline-aligned, which needs the row to be a flex container. `.model-label`
   is `inline-flex` with `vertical-align: middle` because it carries an icon,
   so a plain inline sibling aligns to a different reference and sits 4px
   high. Flex with `align-items: baseline` puts both on the text baseline,
   which is what two runs of type on one line should share. */
.eval-sheet__title .title-s {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
}

.eval-sheet__arm {
  color: var(--neutral-fg-3);
  font-weight: 400;
}

.eval-sheet__arm-cell {
  color: var(--neutral-fg-2);
  white-space: nowrap;
}

.eval-sheet__close {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--s7);
  height: var(--s7);
  font-size: 20px;
  line-height: 1;
  background: none;
  /* Same site-wide `button` leak as the table's own buttons — see
   * `.results-table__column-button` — undone here too, even though its
   * own explicit border mostly hid the effect. */
  box-shadow: none;
  border: 1px solid var(--neutral-outline-1);
  border-radius: var(--radius-s);
  color: var(--neutral-fg-2);
}
.eval-sheet__close:hover {
  background: var(--bg-2);
  color: var(--neutral-fg-1);
}

.eval-sheet__body {
  flex: 1;
  overflow: auto;
}

.eval-sheet__empty {
  padding: var(--s10) var(--s6);
  text-align: center;
  color: var(--neutral-fg-3);
}

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

.eval-sheet__table thead {
  position: sticky;
  top: 0;
  background: var(--bg-1);
}

/* `thead th` specifically, not every `th` in this table: a row's own
 * header (`th[scope="row"]`, the agent-name cell) is data, not a column
 * label, and inheriting this rule's uppercase mono treatment made agent
 * names ("CLAUDE CODE / SONNET 5") render shouty and harder to scan than
 * the same name in normal case in the main table above. */
.eval-sheet__table thead th {
  text-align: left;
  padding: var(--s2) var(--s3);
  font-family: JetBrains Mono, monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: var(--neutral-fg-3);
  border-bottom: 1px solid var(--neutral-outline-1);
}

.eval-sheet__table td,
.eval-sheet__table th[scope=row] {
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--neutral-outline-1);
  font-weight: 400;
  color: var(--neutral-fg-1);
  text-align: left;
  vertical-align: top;
}

.eval-sheet__row {
  cursor: pointer;
}
.eval-sheet__row:hover {
  background: var(--bg-1);
}

.eval-sheet__status {
  font-family: JetBrains Mono, monospace;
  font-size: 12px;
}
.eval-sheet__status.is-pass {
  color: var(--color-success);
}
.eval-sheet__status.is-fail {
  color: var(--color-danger);
}

.eval-sheet__detail-row td {
  background: var(--bg-1);
  padding: var(--s5) var(--s6);
}

/* Run details, inside an expanded sheet row */
.eval-run-details {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  align-items: start;
  column-gap: var(--s4);
  row-gap: var(--s3);
  margin: 0;
}

.eval-run-details dt {
  color: var(--neutral-fg-2);
}

.eval-run-details dd {
  margin: 0;
  min-width: 0;
  color: var(--neutral-fg-1);
}

.eval-run-details__empty {
  margin: 0;
  color: var(--neutral-fg-2);
}

.eval-run-details__prompt {
  margin: 0;
  max-height: 224px;
  overflow: auto;
  font: inherit;
  letter-spacing: inherit;
  white-space: pre-wrap;
  color: var(--neutral-fg-1);
}

.eval-run-details__checks,
.eval-run-details__docs-calls {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.eval-run-details__checks {
  gap: var(--s1);
}

.eval-run-details__docs-calls {
  gap: var(--s2);
}

.eval-run-details__check-row {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
}

.eval-run-details__check-icon {
  display: inline-flex;
  flex: none;
}
.eval-run-details__check-icon.is-pass {
  color: var(--color-success);
}
.eval-run-details__check-icon.is-fail {
  color: var(--color-danger);
}

.eval-run-details__note {
  margin: var(--s1) 0 0 var(--s6);
  font: inherit;
  letter-spacing: inherit;
  color: var(--neutral-fg-2);
}

/* `<summary>` is a native interactive element, so browsers give it a
 * default focus ring of their own — the global `:focus-visible` rule
 * higher in this file only covers `textarea`/`input`/`button`/`a`, never
 * `summary`, so this fell through to the browser default. Chrome's is a
 * heavy solid-blue box, same complaint as the site-wide `button` leak
 * fixed elsewhere in this file even though the cause here is different:
 * explicitly matching `--focused-outline` is the fix either way. Shared
 * between both `<details>` uses in this island (a check's note, a docs
 * call's query) rather than styled per component. */
/* Both lists expand on click, so both say so. `cursor: pointer` used to sit
   only on the docs list, which left the checks — the ones people most want to
   open, since that is where a check's notes are — looking inert. The browser
   default for `<summary>` is an arrow, and there is a reasonable argument that
   pointer belongs to links; but the web has settled the other way, and having
   both conventions inside one panel is the one option with nothing to be said
   for it. */
.eval-run-details__checks summary,
.eval-run-details__docs-calls summary {
  cursor: pointer;
  outline: none;
  border-radius: var(--radius-s);
}
.eval-run-details__checks summary:focus-visible,
.eval-run-details__docs-calls summary:focus-visible {
  outline: 2px solid var(--focused-outline);
  outline-offset: 2px;
}

.eval-run-details__docs-calls summary {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  list-style: none;
}
.eval-run-details__docs-calls summary::-webkit-details-marker {
  display: none;
}

/* Quiet text, not a badge: a bordered, boxed, monospace pill floated
 * against variable-length query text made this list ragged and hard to
 * scan. A fixed-width label column left of the query — same principle as
 * the plain-text result cells and the weaker-model note — lines every
 * label and every query up on a common x instead. */
.eval-run-details__docs-label {
  flex: none;
  width: 3.25rem;
  color: var(--neutral-fg-3);
}

.eval-run-details__docs-query {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--neutral-fg-1);
}

/* Matched to its siblings rather than left at the `mono-xs` defaults.
   Everything else in this row is 13px; this was 14px on a 20px line, which
   made it the tallest item in the row and, through `align-items: baseline`,
   set the row's height. The docs list then ran at a 28px rhythm against the
   24px of the checks directly above it — visible as the block changing tempo
   partway down the panel. */
.eval-run-details__docs-size {
  flex: none;
  color: var(--neutral-fg-3);
  font-size: 13px;
  /* Explicit, because `normal` is font-dependent: the same 13px resolves to a
     16px line box in the sans face beside it and 18px in mono, which left the
     row 2px taller than the checks even after matching the size. */
  line-height: 16px;
}

.eval-run-details__docs-pages {
  margin-top: var(--s1);
  margin-left: var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.eval-run-details__docs-pages a {
  color: var(--neutral-fg-2);
}
.eval-run-details__docs-pages a:hover {
  color: var(--neutral-fg-1);
  text-decoration: underline;
}