/* The league roster: a dense list, plus the add-member form for admins. */

.members,
.members-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Wider than the app's reading measure: this is a six-column table, and at
   --measure-mid the record, the tier and the rating end up shoulder to shoulder
   on the right with a hole between them and the name. */
.members-page {
  max-width: var(--measure-wide);
  margin: 0 auto;
}

/* The form underneath is one field, so it keeps the reading measure rather than
   stretching to the width of the table. */
.members__form {
  max-width: var(--measure-mid);
}

.members__title,
.members-page__title {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  display: flex;
  align-items: baseline;
  gap: var(--space-smd);
}

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

.members__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* The roster is a leaderboard — ordered by rating — so it is laid out as a
   table rather than a list of sentences. Six columns: position, player, record,
   the two figures, and the admin's actions. The column template lives on the
   wrapper so the heading row and every member row cannot drift apart. */
/* The record and tier columns get a floor rather than hugging their contents,
   so the figures sit at steady positions down the page instead of shuffling
   left and right with the longest win rate or the widest tier name. */
.members__table {
  /* Every column is a fixed size apart from the player's name. The heading row
     and the member rows are separate grids — a row needs its own box for the
     hover and the rule under it — so they only line up while each column
     resolves to the same width in both. An `auto` column does not: the heading's
     actions cell is empty and a member's holds "Edit Remove", which made the
     name column wider in the heading and shunted every label right of it along
     by one column. */
  --members-actions: 6.5rem;
  --members-cols: 3ch minmax(0, 1fr) 13ch 13ch 10ch;
  display: flex;
  flex-direction: column;
}

.members__table--managed {
  --members-cols: 3ch minmax(0, 1fr) 13ch 13ch 10ch var(--members-actions);
}

.members__head,
.members__item {
  display: grid;
  grid-template-columns: var(--members-cols);
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-smd) var(--space-smd);
  margin: 0 calc(-1 * var(--space-smd));
}

.members__head {
  padding-top: 0;
  padding-bottom: var(--space-sm);
  border-bottom: var(--border-width) solid var(--border-strong);
}

.members__head-cell {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.members__head-cell--record,
.members__head-cell--figure {
  text-align: right;
}

.members__item {
  border-radius: var(--radius-sm);
  border-bottom: var(--border-width) solid var(--border-default);
  transition: background var(--dur) var(--ease-out);
}

.members__item:hover {
  background: var(--surface-hover);
}

.members__item:last-child {
  border-bottom: none;
}

/* Quiet: the standing is context for the rating, not a trophy. */
.members__pos {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-align: right;
}

.members__record {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
  text-align: right;
  white-space: nowrap;
}

.members__rank {
  display: flex;
  justify-content: flex-end;
}

/* Bare, not a tier chip: a bordered box around a dash reads as a tier of its own. */
.members__rank-missing {
  font-family: var(--font-mono);
  color: var(--text-tertiary);
}

/* The rating is the thing the page is sorted by, so it is the one figure on the
   row with the display face and full contrast. */
.members__elo {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  color: var(--text-primary);
  text-align: right;
}

/* The name and its op.gg link share the player column. */
.members__player {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  min-width: 0;
}

.members__nickname {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Same reason as the mix roster: the op.gg link beside it will not shrink, so
     without a floor the name takes the whole squeeze and vanishes. */
  min-width: 5ch;
}


.members__nickname:hover {
  text-decoration: underline;
}

.members__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-md);
}

/* Quiet text actions — the app's destructive controls are never buttons. */
.members__action {
  /* "Edit" sits on its line box and "Remove" inside a button inside a form;
     without a shared line-height the two are a couple of pixels out of line. */
  line-height: 1;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--dur) var(--ease-out);
}

.members__action:hover {
  color: var(--text-primary);
}

.members__action--destructive:hover {
  color: var(--action-destructive-fg);
}

.members__actions form {
  margin: 0;
  display: flex;
  align-items: center;
}

.members__form {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-smd);
}

/* Under 768px the columns stack, which takes the heading row away with them.
   The two figures then sit next to each other unlabelled — exactly the thing
   `rank-cell` exists to prevent — so each one carries its own caption here. */
@media (max-width: 767px) {
  .members__head {
    display: none;
  }

  .members__item,
  .members__table--managed .members__item {
    grid-template-columns: 3ch minmax(0, 1fr) auto;
    grid-template-areas:
      "pos name   name"
      "pos record record"
      "pos rank   elo";
    gap: var(--space-xs) var(--space-md);
  }

  .members__table--managed .members__item {
    grid-template-areas:
      "pos name    name"
      "pos record  record"
      "pos rank    elo"
      "pos actions actions";
  }

  .members__pos      { grid-area: pos; align-self: start; }
  .members__player   { grid-area: name; }
  .members__record   { grid-area: record; text-align: left; }
  .members__rank     { grid-area: rank; }
  .members__elo      { grid-area: elo; }
  .members__actions  { grid-area: actions; margin-top: var(--space-xs); }

  .members__rank {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
  }

  .members__rank::before,
  .members__elo::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-2xs);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
}

/* The rank dropdown is the tier chip: it carries `rank-tag` and its tier
   modifier, so the metal colours and the size come from rank_tag.css and
   picking a tier recolours it in place. Only the select-specific parts live
   here. */
.members__rank-form {
  display: flex;
  margin: 0;
}

.members__rank-select {
  appearance: none;
  cursor: pointer;
  /* Room on the right for the caret, which is drawn rather than loaded — the
     design system has no icon set. */
  padding-right: calc(var(--space-md) + var(--space-2xs));
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    right var(--space-sm) center,
    right calc(var(--space-sm) - 3px) center;
  background-size: 3px 3px, 3px 3px;
  background-repeat: no-repeat;
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.members__rank-select:hover {
  border-color: var(--border-strong);
}

.members__rank-select:focus-visible {
  outline: none;
  border-color: var(--border-selected);
  box-shadow: var(--shadow-xs);
}

/* The page does not reload on save, so this is the only thing that says the
   change landed. Mint is allowed here because it is status rather than an
   action or decoration — the same sense `--border-win` carries elsewhere. It
   has to differ from :focus-visible, because the select is focused anyway
   straight after you have picked from it. */
.members__rank-form--saved .members__rank-select {
  border-color: var(--border-win);
  box-shadow: 0 0 0 3px var(--surface-win);
}

/* The ladder: same table, no admin column, and a second rating beside the
   first. */
.members__table--ladder {
  --members-cols: 3ch minmax(0, 1fr) 13ch 13ch 10ch;
}

/* Still ranked, but their rating is a record rather than a reading. */
.members__item--dormant {
  opacity: 0.55;
}

.members__item--dormant:hover {
  opacity: 1;
}

.members__dormant {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

@media (max-width: 767px) {
  .members__table--ladder .members__item {
    grid-template-areas:
      "pos name   name"
      "pos record record"
      "pos rank   elo";
  }
}