/* The answers to the night's RSVP, days before anybody can sign up.
   Deliberately the roster row's shape — the same claim tag, the same rank
   cells on the right — because it becomes that list once sign-ups open, and
   two drawings of the same people would read as two different claims. */

.mix-rsvps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.mix-rsvps__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-smd);
  padding: 10px var(--space-md);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  font-size: var(--text-base);
  transition: var(--transition-control);
}

.mix-rsvps__item:hover {
  border-color: var(--border-strong);
}

/* Somebody we cannot put a name to. A dashed hairline on the sunken surface
   rather than coral: they have done nothing wrong and nothing has been lost —
   there is simply a step missing, and coral means a result here. */
.mix-rsvps__item--unknown {
  background: var(--surface-sunk);
  border-style: dashed;
  box-shadow: none;
}

.mix-rsvps__player {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.mix-rsvps__name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The same person under the name Discord knows them by. */
.mix-rsvps__aka {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
}

/* Answered and turned up, which is the pair of things a seat needs. */
.mix-rsvps__here {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-win);
}

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

.mix-rsvps__elo {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.mix-rsvps__note {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* On a phone the row has more in it than a line will hold: a claim, a name,
   two names where they differ, and three labelled figures. Side by side they
   squeezed the name down to one letter and broke the Discord name mid-word —
   so the figures drop to a line of their own underneath, which is the order
   somebody reads them in anyway. */
@media (max-width: 640px) {
  .mix-rsvps__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--space-smd);
    row-gap: var(--space-sm);
    align-items: center;
  }

  .mix-claim {
    grid-column: 1;
    grid-row: 1;
  }

  .mix-rsvps__player {
    grid-column: 2;
    grid-row: 1;
  }

  .mix-rsvps__here,
  .mix-rsvps__missing {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  /* Riot rank, solo queue and the rating, in that order across the second
     line — the same order they sit in on a wide screen. */
  .mix-rsvps__item .rank-cell {
    grid-row: 2;
    align-items: flex-start;
  }

  /* The rating stays at the right-hand end whether or not there is a solo
     queue reading to put between it and the tier. */
  .mix-rsvps__item .rank-cell--league {
    grid-column: 3;
    align-items: flex-end;
  }
}