/* Standings page. Builds on styles.css: same palette, same two type roles,
   same hairline-not-boxes rule. */

.status { font-size: 12.5px; color: var(--muted); margin: 0 0 30px; }

.division-standings { margin-bottom: 56px; }
/* Borrows the week heading's look, but here it isn't a toggle. */
.division-standings .week-head { cursor: default; }
.division-standings .week-head::before { content: none; }
.division-standings.upper .week-no { color: var(--amber); }
.division-standings.lower .week-no { color: var(--slate); }

table.standings {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.standings th {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); text-align: left; padding: 0 8px 8px;
}
.standings td { padding: 9px 8px; border-top: 1px solid var(--line-soft); }
.standings .num { text-align: right; width: 1%; white-space: nowrap; }
.standings td.team { font-size: 21px; font-weight: 600; line-height: 1.15; }
.standings .rank { color: var(--muted); }
.standings .pts { font-weight: 600; }
.standings td.pts { font-size: 17px; }
.h2h {
  font-family: "IBM Plex Sans", sans-serif; font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  vertical-align: middle;
}

/* Playoff places, the user's pick: teams outside the top four fade back, and
   a golden line divides them from the top four, in both divisions. The line
   is drawn on the row below the cut — collapsed table borders let the 2px
   rule win over that row's 1px hairline. */
.standings tbody tr:not(.playoff) td { opacity: .45; }
.standings tr.playoff-cut + tr td { border-top: 2px solid var(--amber); }

@media (max-width: 560px) {
  .standings td.team { font-size: 17px; }
  .standings th, .standings td { padding-left: 5px; padding-right: 5px; }
}