/* The shape of a league's membership. Two chart shapes, both deliberately
   plain: a vertical histogram for the ratings, because a distribution is a
   shape; horizontal bars for the categorical counts, because those are read
   as a ranked list. */
.player-base {
  max-width: 54rem;
}

.player-base__headline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.player-base__section {
  margin-bottom: var(--space-xl);
}

.histogram {
  display: flex;
  align-items: flex-end;
  gap: var(--space-xs);
  height: 190px;
  padding: var(--space-md) 0 0;
}

.histogram__col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2xs);
  height: 100%;
  min-width: 0;
}

.histogram__count {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* The bar grows from the baseline, so the column justifies to the end and the
   bar's own height is the only thing that varies. */
/* The metal is set per bar from the tier its rating band belongs to — see
   `fill` in the view. This is the fallback. */
.histogram__bar {
  width: 100%;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background: var(--line-strong);
}

.histogram__col--empty .histogram__bar {
  background: var(--border-default);
}

.histogram__label {
  padding-top: var(--space-2xs);
  border-top: var(--border-width) solid var(--border-default);
  width: 100%;
  text-align: center;
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
}

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

.distribution__item {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) 2.5rem 3rem;
  align-items: center;
  gap: var(--space-sm);
}

.distribution__label {
  font-size: var(--text-sm);
}

.distribution__bar {
  height: 10px;
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
  overflow: hidden;
}

/* The fill is a flex row so a banded bar can carry its segments. Unbanded it
   is empty and the background shows through as one block — a rank row's own
   metal, or the default for the rows that have no tier of their own. */
.distribution__fill {
  display: flex;
  height: 100%;
  background: var(--line-strong);
}

.distribution__band {
  display: block;
  height: 100%;
}

/* What the colours mean, once, under both role charts. */
.band-key {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
}

.band-key {
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.band-key__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.band-key__name {
  color: var(--text-tertiary);
}

.band-key__swatch {
  width: 12px;
  height: 10px;
  border-radius: 1px;
}

.distribution__count,
.distribution__share {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

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

/* A role nobody mains is the thing worth noticing, so it is dimmed rather
   than hidden — an absent row reads as a rendering bug. */
.distribution__item--empty .distribution__label,
.distribution__item--empty .distribution__count {
  color: var(--text-tertiary);
}

.player-base__roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-lg);
}

@media (max-width: 640px) {
  .distribution__item {
    grid-template-columns: 6rem minmax(0, 1fr) 2rem 2.75rem;
  }

  .histogram__label {
    font-size: 9px;
  }
}

/* Every bar opens into the names behind it, so each one is a link that still
   reads as part of a chart rather than as a row of blue text. */
.distribution__row {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.distribution__item {
  padding: 2px var(--space-xs);
  margin: 0 calc(var(--space-xs) * -1);
  border-radius: var(--radius-xs);
  transition: background var(--dur-fast) var(--ease-out);
}

.distribution__item:has(a):hover {
  background: var(--surface-sunken);
}

a.histogram__col {
  color: inherit;
  text-decoration: none;
}

a.histogram__col:hover .histogram__bar {
  filter: brightness(0.94);
}

/* The way back, plus which bar you are in. Both halves matter: a filtered
   list that doesn't name its filter is just a shorter list. */
.crumb {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.crumb__back {
  font-size: var(--text-sm);
}

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

.crumb__here {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
}

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

.crumb__value {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

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

.player-base__member {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 7rem 7rem;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-top: var(--border-width) solid var(--border-subtle, var(--border-default));
}

.player-base__member-name {
  font-weight: var(--weight-medium);
  color: inherit;
  text-decoration: none;
}

.player-base__member-name:hover {
  text-decoration: underline;
}

.player-base__member-roles {
  color: var(--text-tertiary);
}

@media (max-width: 640px) {
  .player-base__member {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}