/* The accuracy-and-cost scatter's rules, moved VERBATIM from the benchmarks
   Worker's reviewer.css (plan 2026-09-20 §1.2) so the graph on an agent page is
   the graph on /benchmarks. The Worker serves a generated copy of this file;
   its page defines the six variables on :root. A host that does not (the web
   app) wraps the graph in `.benchmark-scatter-theme`, which declares the same
   six values. */
.benchmark-scatter-theme {
  --line: #2b3b53;
  --radius: 12px;
  --panel: #0f1828;
  --muted: #aebbd0;
  --mint: #8ad4c0;
  --lavender: #9caeff;
}
.scatter-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 18px;
  overflow-x: auto;
}
.scatter-legend {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}
.scatter-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.legend-dot {
  width: 8px;
  height: 8px;
  background: var(--mint);
  border-radius: 50%;
}
.legend-app {
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--lavender);
  transform: rotate(45deg);
}
.scatter-card svg {
  width: 100%;
  height: auto;
  min-width: 630px;
  display: block;
}
.scatter-card svg text {
  fill: var(--muted);
  font-size: 12px;
  font-family: inherit;
}
.scatter-card svg a text {
  fill: #dce5f5;
  font-size: 12px;
}
.grid-line {
  stroke: #2b354a;
  stroke-dasharray: 3 6;
}
.point-label-link {
  stroke: var(--muted);
  stroke-opacity: 0.45;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.model-dot {
  fill: var(--mint);
  stroke: var(--panel);
  stroke-width: 2;
}
.app-dot {
  fill: var(--panel);
  stroke: var(--lavender);
  stroke-width: 2;
}
.scatter-card svg a:hover text,
.scatter-card svg a:focus text {
  fill: white;
}
.scatter-card svg a:hover .model-dot,
.scatter-card svg a:focus .model-dot,
.scatter-card svg a:hover .app-dot,
.scatter-card svg a:focus .app-dot {
  stroke: white;
  stroke-width: 3;
}
.app-range {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
}
@media (max-width: 760px) {
  .scatter-card {
    padding: 12px;
  }
  .scatter-legend {
    gap: 16px;
  }
}