/* The Indigo Series Scouting Guide (/indigo-scouting): football's guide for baseball's draft challenge. scouting.css
   does the work (the look, the chart, phones); this is the little baseball adds: the two tables in the builder's colors
   (the lineup gold, the pitching staff blue: baseball.js BAT_COLOR and ARM_COLOR), "Indigo" in the challenge's indigo
   (indigo/indigo.css --indigo), and the WEIGHT cells that say which way wins. */

.hero h1 .ni { color: #8f9bff; }

.chart.bat { --star: var(--gold); }
.chart.arm { --star: var(--def); }
.side.bat { color: var(--gold); border-color: var(--gold); }
.side.arm { color: var(--def); border-color: var(--def); }
.arm .tag { color: var(--on-def); background: var(--def); }
/* one Type bonus width in both tables (three badges a line), so the staff's five don't push its stars out of line with
   the lineup's */
@media (min-width: 820px) {
  .chart .types { width: 180px; }
}

/* under a WEIGHT cell's stars, lighter or heavier: weight is power one way and quickness the other, so the stars alone
   can't say which a spot wants (narrow enough for a phone's eighth of the row); and under the catcher's HEIGHT, shorter
   (a sturdy build: heavy for his height) */
.chart td .dir {
  display: block;
  margin-top: 2px;
  font-family: var(--rc);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
/* a phone's eighth of the row is about as wide as a seven-letter word: the catcher's two side by side (SHORTER HEAVIER)
   get a little air between them */
@media (max-width: 819px) {
  .chart td .dir { font-size: 9.5px; letter-spacing: 0; }
}