/* ── Startlist-mutations history page ──
   .page / .hero / .card / .back-btn come from base.css. The row/list
   component classes below (.top-list, .top-rank incl. .mut-added/.mut-removed,
   .top-info, .top-name, .top-sub, .top-score) mirror the ones in index.css
   (homepage "Laatste startlijst-wijzigingen" widget) so a row looks identical
   whether it's in the sidebar widget or on this full history page — kept as a
   separate copy here (rather than importing index.css) so this page stays
   self-contained per-page, like the rest of the site's templates/css.
*/

.mutation-history { padding: .75rem 1rem 1rem; }

.result-date-heading {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding-bottom: .4rem;
  margin-top: 1.4rem;
  margin-bottom: .3rem;
}
.result-date-heading:first-child { margin-top: 0; }
.no-results { font-size: .85rem; color: var(--muted); padding: .5rem 0; }
.empty-state { padding: 2rem; text-align: center; color: var(--muted); font-size: .9rem; }

/* ── Row list (same visual language as the homepage widget) ── */
.top-list { list-style: none; }
.top-list-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .3rem; border-radius: 4px; transition: background .1s; min-height: 44px;
  border-bottom: 1px solid var(--border);
}
.top-list-item:last-child { border-bottom: none; }
.top-list-item:hover { background: var(--surface2); }
.top-rank { font-size: .7rem; font-weight: 900; width: 18px; text-align: center; flex-shrink: 0; color: var(--muted); }
.top-rank.mut-added, .top-rank.mut-removed {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 900; color: #fff;
}
.top-rank.mut-added   { background: var(--darkgreen); }
.top-rank.mut-removed { background: var(--red); }
.top-info { flex: 1; min-width: 0; }
.top-name { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-sub  { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-score { text-align: right; flex-shrink: 0; }
.top-score-val   { font-size: .85rem; font-weight: 800; color: var(--accent); }
.top-score-label { font-size: .6rem; color: var(--muted); display: block; }