.leaderboard {
  background-color: var(--spruce-base-color-surface);
  border: var(--spruce-border-width-base) solid var(--spruce-base-color-border);
  border-radius: var(--spruce-border-radius-lg);
  padding: 1.5rem;
}
.leaderboard > * {
  margin-block-end: 0;
  margin-block-start: 0;
}
.leaderboard > * + * {
  margin-block-start: 1.5rem;
}
.leaderboard__header > * {
  margin-block-end: 0;
  margin-block-start: 0;
}
.leaderboard__header > * + * {
  margin-block-start: 0.25rem;
}
.leaderboard__title {
  font-size: 1rem;
}
.leaderboard__metric {
  color: var(--spruce-base-color-muted);
  font-size: var(--spruce-font-size-sm);
}
.leaderboard__list {
  list-style: none;
  padding: 0;
}
.leaderboard__list > * {
  margin-block-end: 0;
  margin-block-start: 0;
}
.leaderboard__list > * + * {
  margin-block-start: 1rem;
}
.leaderboard__item {
  align-items: center;
  column-gap: 1rem;
  display: grid;
  grid-template-columns: 1.75rem auto minmax(0, 1fr) auto;
  row-gap: 0.25rem;
}
.leaderboard__rank {
  align-items: center;
  background-color: var(--spruce-base-color-surface-muted);
  block-size: 1.75rem;
  border-radius: var(--spruce-border-radius-pill);
  color: var(--spruce-base-color-muted);
  display: flex;
  font-size: var(--spruce-font-size-sm);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  justify-content: center;
}
.leaderboard__item--top .leaderboard__rank {
  background-color: color-mix(in srgb, var(--spruce-base-color-primary) 14%, transparent);
  color: var(--spruce-base-color-primary);
}
.leaderboard__person, .leaderboard__result {
  display: flex;
  flex-direction: column;
  line-height: var(--spruce-line-height-md);
  min-inline-size: 0;
}
.leaderboard__result {
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
}
.leaderboard__result strong {
  color: var(--spruce-base-color-heading);
}
.leaderboard__name {
  color: var(--spruce-base-color-heading);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leaderboard__team, .leaderboard__change {
  color: var(--spruce-base-color-muted);
  font-size: var(--spruce-font-size-sm);
}
.leaderboard__change--up {
  color: var(--spruce-alert-color-success);
}
.leaderboard__change--down {
  color: var(--spruce-alert-color-danger);
}
.leaderboard__bar {
  background-color: var(--spruce-base-color-surface-muted);
  block-size: 0.3rem;
  border-radius: var(--spruce-border-radius-pill);
  grid-column: 3/-1;
  overflow: hidden;
}
.leaderboard__bar::before {
  background-color: var(--spruce-base-color-primary);
  block-size: 100%;
  border-radius: inherit;
  content: "";
  display: block;
  inline-size: var(--value);
}