/* A member's profile: identity, the five position tiles, champions, social
   stats, then the full ELO change history. */

.league-member {
  max-width: var(--measure-mid);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.league-member__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.league-member__identity {
  display: flex;
  align-items: baseline;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.league-member__nickname {
  margin: 0;
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.league-member__section-title {
  margin: 0 0 var(--space-smd);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.league-member__section-meta {
  margin: calc(-1 * var(--space-sm)) 0 var(--space-smd);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.league-member__empty {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-base);
}

/* --------------------------------------------------------- position tiles */

.posgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-smd);
}

.poscard {
  background: var(--surface-sunk);
  border-radius: var(--radius-md);
  padding: var(--space-smd) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.poscard--unplayed {
  opacity: 0.5;
}

/* The member's strongest played position — the only mint on the profile. */
.poscard--best {
  background: var(--surface-win);
  box-shadow: inset 0 0 0 1px var(--border-win);
}

.poscard__role {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
}

.poscard__rating {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}

.poscard__meta {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .posgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------------------------------------------------------------- history */

.history__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto auto auto 1fr auto auto auto;
  column-gap: var(--space-md);
  row-gap: var(--space-sm);
}

.history__head,
.history__item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
}

.history__head {
  padding: 0 var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-tertiary);
}

.history__item {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  transition: var(--transition-control);
}

.history__item:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

/* Decay is not a match — it recedes to the sunken ground and a dashed edge. */
.history__item--decay {
  background: var(--surface-sunk);
  border-style: dashed;
  padding: 10px var(--space-md);
  font-size: var(--text-base);
}

.history__item--decay:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-default);
}

.history__link {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  padding: 10px var(--space-md);
  font-size: var(--text-base);
}

.history__date {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.history__position {
  display: flex;
  align-items: center;
  font-weight: var(--weight-medium);
}

.history__col--rating {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 4ch;
  color: var(--text-tertiary);
}

/* The rating a match left behind is the one worth reading. */
.history__col--new {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.history__col--muted {
  color: var(--text-tertiary);
}

@media (max-width: 640px) {
  .history__list {
    grid-template-columns: auto auto auto 1fr auto auto;
    font-size: var(--text-sm);
  }

  .history__col--spacer {
    display: none;
  }
}