/* flagship_compare — (A) JustAsk-vs-baselines matrix + (B) UCB self-evolution curve.
   Tokens come from justask.css (:root). Same design rule: SIMPLE + CLEAR — flat
   surfaces, 1px borders, ONE cyan accent, legible type. NO glow / gradient / shadow. */

/* ---- (A) comparison matrix ---- */
.fc-scroll { overflow-x: auto; }

.fc-matrix {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.fc-matrix th,
.fc-matrix td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.fc-th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.fc-th--hero { color: var(--accent); font-weight: 700; }

.fc-agent {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
}

.fc-td { min-width: 108px; }
.fc-cell { display: flex; align-items: center; gap: 9px; }

/* thin proportional bar: width = sim * 100% (set inline by JS) */
.fc-bar {
  flex: 1;
  min-width: 44px;
  height: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.fc-bar i { display: block; height: 100%; background: var(--muted-2); border-radius: 999px; }

/* hero column (JustAsk, autonomous) carries the one accent; baselines stay muted */
.fc-td--hero .fc-bar i { background: var(--accent); }

.fc-num {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  min-width: 34px;
  text-align: right;
}
.fc-num.fc-max { font-weight: 700; color: var(--fg); }   /* per-row winner — wherever it lands */
.fc-td--hero .fc-num { color: var(--accent); }

.fc-null { font-family: var(--mono); font-size: 12.5px; color: var(--muted-2); }

.fc-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 14px 0 0;
  max-width: 76ch;
}

/* ---- (B) self-evolving search curve ---- */
#evolve-pick {
  width: auto;
  min-width: 240px;
  display: block;
  margin: 0 0 14px;
}

.fc-chart { display: block; width: 100%; height: auto; }

.fc-grid { stroke: var(--border); stroke-width: 1; }
.fc-ylab,
.fc-xlab {
  font-family: var(--mono);
  font-size: 10px;
  fill: var(--muted-2);
}
.fc-line { fill: none; stroke: var(--muted-2); stroke-width: 1.5; }
.fc-dot { fill: var(--muted); }
.fc-dot--peak { fill: var(--accent); }
.fc-peaklab {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  fill: var(--accent);
}

.fc-caption {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 10px 0 0;
  max-width: 76ch;
}

@media (max-width: 720px) {
  .fc-matrix th,
  .fc-matrix td { padding: 8px; }
}