/* League tables and playoff series, favourite teams highlighted. */

.standings table {
  font-size: var(--font-size-small);
  margin-block-end: var(--space-l);
}

.standings caption {
  font-size: var(--font-size-base);
}

.standings th[scope="row"] {
  font-weight: var(--font-weight-normal);
}

.standings td,
.standings th[scope="col"]:not(:nth-child(2)) {
  text-align: end;
}

/* The streak (last column) reads like text: W2, OTL1. */
.standings td:last-child,
.standings th[scope="col"]:last-child {
  text-align: start;
}

.standings .favourite {
  background: var(--color-highlight);
}

/* Playoff and relegation places: a coloured edge on the row. Cut-off lines after the last place in a zone. */
.standings tr.zone-playoff td:first-child {
  box-shadow: inset var(--zone-edge) 0 0 var(--color-accent);
}

.standings tr.zone-relegation td:first-child {
  box-shadow: inset var(--zone-edge) 0 0 var(--color-live);
}

.standings tr.cut td,
.standings tr.cut th {
  border-bottom: var(--cut-width) solid var(--color-text-muted);
}

.standings tr.section th {
  padding-block-start: var(--space-s);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
  text-align: start;
}

.standings .legend {
  display: flex;
  gap: var(--space-m);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.standings .legend span {
  padding-inline-start: var(--space-s);
}

.standings .legend .zone-playoff {
  box-shadow: inset var(--zone-edge) 0 0 var(--color-accent);
}

.standings .legend .zone-relegation {
  box-shadow: inset var(--zone-edge) 0 0 var(--color-live);
}

.standings .series {
  list-style: none;
  padding: 0;
}

.standings .series li {
  padding-block: var(--space-xs);
}

.standings .marker {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* Tables stack, one after another; a 10-column table stays narrow enough to read across. */
.standings table {
  max-inline-size: var(--narrow-width);
}