/* /preview/arena — overlay on top of dashboard.css. Just the row-movement
   glyph colors and the top-of-ladder accent. The table itself uses
   .dash-table from dashboard.css. */

.arena-table td:first-child {
  font-variant-numeric: tabular-nums;
  width: 4ch;
}

.arena-table .arena-row--top td {
  color: var(--accent, #F16C0A);
  font-weight: 600;
}

.arena-dir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

.arena-dir--up   { color: #6EC36E; }
.arena-dir--down { color: #D27272; }
.arena-dir--new  { color: var(--accent, #F16C0A); }
.arena-dir--same { color: color-mix(in oklab, var(--text, #ebe9e4) 35%, transparent); }

.arena-footnote {
  margin-top: 1rem;
  color: var(--text-muted, color-mix(in oklab, #ebe9e4 65%, transparent));
  font-size: 0.9rem;
}