/* Player dashboards: /qb, /wr, /rb (templates/qb.html, templates/position.html).
   Stat cards with rank context, the air-yards grid, the summary strip, the
   season trend and the league table. Moved out of qb.html so every position
   page shares one look. */
#chips{margin-bottom:18px}
.stat .v{font-family:var(--display);font-size:32px}
.trend{min-height:60px}
/* stat cards with rank context */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;margin-bottom:20px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px}
.stat .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.stat .v{font-size:26px;font-weight:700;line-height:1.15;margin-top:5px;
  font-variant-numeric:tabular-nums}
.stat .v small{font-size:13px;font-weight:500;color:var(--muted);margin-left:3px}
.stat .rk{font-size:12px;color:var(--muted);margin-top:3px}
.stat.hi{border-left:3px solid var(--pos)}
.stat.md{border-left:3px solid var(--warn)}
.stat.lo{border-left:3px solid var(--neg)}
.stat.ctx{border-left:3px solid var(--line-2)}
/* ---------- the hero: the passing grid ---------- */
.grid{display:grid;grid-template-columns:112px repeat(3,1fr) 104px;
  gap:7px;padding:18px 18px 8px}
.grid .band{display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;
  text-align:center;line-height:1.25}
.grid .dir{text-align:center;font-size:12px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.4px;padding-bottom:2px}
.cell{border:1px solid var(--line);border-radius:9px;padding:11px 12px;
  display:flex;flex-direction:column;gap:2px;min-height:84px;justify-content:center}
.cell .att{font-weight:700;font-size:17px;letter-spacing:-.2px}
.cell .att em{font-style:normal;font-weight:500;color:var(--ink-2);font-size:13px}
.cell .yds{font-size:12px;color:var(--ink-2)}
.cell .epa{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cell.empty{opacity:.28}
/* marginal totals -- the row and the column, which is what makes a grid
   readable as a whole instead of as 15 separate numbers */
.tot{border:1px dashed var(--line);border-radius:9px;padding:11px 12px;
  display:flex;flex-direction:column;gap:2px;justify-content:center;
  background:var(--surface-2);min-height:84px}
.tot .att{font-weight:600;font-size:15px}
.tot .att em{font-style:normal;font-weight:500;color:var(--muted);font-size:12px}
.tot .yds{font-size:12px;color:var(--muted)}
.tot .epa{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.tot .cap{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.legend{display:flex;align-items:center;gap:10px;padding:2px 18px 18px;
  font-size:12px;color:var(--muted);flex-wrap:wrap}
.scale{display:flex;height:12px;border-radius:3px;overflow:hidden;border:1px solid var(--line)}
.scale i{display:block;width:34px}

/* summary strip under the grid, mirroring the source chart's box */
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:1px;background:var(--line);border-top:1px solid var(--line)}
.summary div{background:var(--surface-2);padding:10px 13px}
.summary dt{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.summary dd{margin:3px 0 0;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
tr.me{background:var(--stripe-soft)}
tr.me td:first-child::before{content:"\25B8 ";color:var(--stripe)}
.tblwrap{overflow:auto;max-height:56vh}
.trend{padding:14px 18px 6px}
.trend svg{width:100%;height:auto;display:block;overflow:visible}
.trend .ax{stroke:var(--line-2);stroke-width:1}
.trend text{fill:var(--muted);font-size:11px}
.thin{font-size:12px;color:var(--warn);padding:0 18px 14px}

/* running backs: carry outcomes as labelled bars (text wears text tokens) */
.outcomes{display:grid;gap:10px;padding:18px}
.outcome{display:grid;grid-template-columns:120px minmax(0,1fr) 230px;gap:12px;align-items:center}
.outcome .lab{font-size:13px;color:var(--ink-2)}
.outcome .bar{height:22px;background:var(--sunk);border-radius:5px;overflow:hidden}
.outcome .bar i{display:block;height:100%;border-radius:5px}
.outcome .num{font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.outcome .num small{color:var(--muted)}
@media (max-width:560px){
  .outcome{grid-template-columns:92px minmax(0,1fr);}
  .outcome .num{grid-column:2}
}