/* One team's read on the other: what to ban, and who to worry about. Nothing
   here is private — it is all on the members' own pages — what the page adds
   is having it in one place at the moment somebody needs it. */
.scout {
  max-width: 48rem;
}

.scout__header {
  margin-bottom: var(--space-lg);
}

.scout__eyebrow {
  display: block;
  margin-bottom: var(--space-2xs);
  color: var(--text-tertiary);
}

.scout__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
}

.scout__meta {
  margin: var(--space-2xs) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* Two named facts rather than one blended figure: the highest rating and the
   best record are different claims, and when they are different people that is
   the most useful thing on the page. */
.scout__callouts {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.scout__callout {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-sm);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}

.scout__callout-label {
  color: var(--text-tertiary);
}

.scout__callout-name {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.scout__callout-value {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.scout__section {
  margin-bottom: var(--space-lg);
}

.scout__section-title {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.scout__hint,
.scout__empty {
  margin: 0 0 var(--space-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.scout__bans,
.scout__roster {
  margin: 0;
  padding: 0;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  list-style: none;
  overflow: hidden;
}

.scout__ban,
.scout__player {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-bottom: var(--border-width) solid var(--border-default);
}

.scout__ban:last-child,
.scout__player:last-child {
  border-bottom: none;
}

.scout__ban-champion {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.scout__ban-name {
  font-weight: var(--weight-medium);
}

.scout__ban-record {
  color: var(--text-tertiary);
  font-size: var(--text-2xs);
}

/* Coral because a ban is the destructive half of a draft, the same as the
   lock-in button while banning. */
.scout__ban-rate {
  color: var(--coral-700);
}

.scout__player-name {
  flex: 1;
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.scout__player-name:hover {
  text-decoration: underline;
}

.scout__player-record {
  flex: 0 0 7rem;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-align: right;
}

@media (max-width: 560px) {
  .scout__player {
    flex-wrap: wrap;
  }

  .scout__player-record {
    flex: 1;
    text-align: left;
  }
}