/* Role cards (components/role-cards.js) — Train's "Know the roles" and
 * Welcome's "Ways to help" are the same cards, so this is one stylesheet.
 * Moved out of `screens/train.css` on 2026-08-06 when the second screen
 * appeared; the rules are unchanged, only the prefix. */

.rolecards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-2);
}

.rolecard-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  align-items: center;
  margin: 0 0 var(--space-1);
  font-size: var(--size-body);
  font-weight: var(--weight-normal);
}

.rolecard-emoji { flex: none; font-size: var(--size-h3); line-height: 1; }

.rolecard-heading { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }

.rolecard-name {
  font-size: var(--size-body);
  font-weight: var(--weight-semibold);
  min-width: 0;
}

.rolecard-terr {
  font-size: var(--size-kicker);
  /* Half the kicker's tracking: this one sits under a name rather than over a
   * block, and `--track-kicker` at this size pushed a long territory name onto
   * a second line. Carried over verbatim from train.css. */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft);
}

.rolecard-meta {
  font-size: var(--size-micro);
  font-weight: var(--weight-semibold);
  color: var(--soft);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rolecard-body {
  font-size: var(--size-small);
  color: var(--soft);
  line-height: 1.45;
  margin: 0;
}