/* Similar Players' own parts. Everything else (colours, type, buttons,
   cards, tables) comes from site.css; the accent is data-feature="similar". */

/* "Compare [whole career] against [whole careers]", above the result. */
.compare { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 24px 0 12px; font-size: 0.9rem; }
.compare label { display: flex; align-items: center; gap: 8px; color: var(--muted); }

.result { position: relative; }
.result .card-body { padding-right: 52px; }
.summary { font-weight: 600; }
.how { margin-top: 4px; color: var(--muted); font-size: 0.8rem; }

/* A match's name: opens that player's own twins. */
td.name button, td.name a {
  font: inherit; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px;
}
td.name button:hover, td.name a:hover { text-decoration-color: currentColor; }
/* The similarity score: the column that matters most. */
table.data td.score { font-weight: 600; color: var(--accent); }