.report-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
  padding: .7rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.report-nav a,
.report-nav strong {
  display: grid;
  place-items: center;
  min-width: 34px;
  min-height: 34px;
  padding: 0 .4rem;
  border-radius: 8px;
  color: var(--green2);
  font-size: .82rem;
  font-weight: 900;
  text-decoration: none;
}

.report-nav a:hover {
  background: #eaf9f1;
}

.report-nav strong {
  background: var(--navy);
  color: #fff;
  font-size: 1.05rem;
}

.report-nav .wide {
  padding: 0 .8rem;
}

.standings-panel,
.score-grid-panel,
.picks-grid-panel {
  margin-bottom: 1rem;
}

.standings-panel table,
.score-grid,
.picks-grid {
  width: 100%;
  border-collapse: collapse;
}

.standings-panel th,
.standings-panel td,
.score-grid th,
.score-grid td,
.picks-grid th,
.picks-grid td {
  padding: .65rem;
  border: 1px solid var(--line);
  text-align: center;
}

.standings-panel th:nth-child(2),
.standings-panel td:nth-child(2),
.score-grid tbody th,
.picks-grid tbody th {
  text-align: left;
}

.report-scroll {
  overflow: auto;
  max-height: 72vh;
}

.score-grid,
.picks-grid {
  min-width: 1050px;
  font-size: .78rem;
}

.score-grid thead th,
.picks-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--navy);
  color: #fff;
}

.score-grid tbody th,
.picks-grid tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 150px;
  background: #f7f9fa;
}

.score-grid td:last-child {
  background: #eaf9f1;
  color: var(--green2);
}

.picks-grid thead th:not(:first-child) {
  min-width: 145px;
}

.picks-grid th span,
.picks-grid th small,
.picks-grid td small {
  display: block;
}

.picks-grid th span,
.picks-grid th small {
  color: #b9cad5;
  font-size: .65rem;
}

.picks-grid td small {
  margin-top: .2rem;
  color: inherit;
  opacity: .75;
}

.picks-grid td.correct {
  background: #dff6e9;
  color: #08613f;
  font-weight: 800;
}

.picks-grid td.wrong {
  background: #fff0ee;
  color: var(--danger);
  font-weight: 800;
}

.picks-grid td.push {
  background: #fff4db;
  color: #805b00;
  font-weight: 800;
}

.picks-grid td.not-started {
  background: #eef2f5;
}

@media (max-width: 720px) {
  .report-nav {
    gap: .2rem;
  }

  .report-nav a,
  .report-nav strong {
    min-width: 29px;
    min-height: 30px;
    font-size: .72rem;
  }
}

/* SU report scrolls with the page, without a nested viewport. */
.upset-summary { min-width: 0; width: max-content; }
.upset-summary th, .upset-summary td { white-space: nowrap; }

.upset-summary .report-sort { border: 0; background: transparent; color: inherit; font: inherit; padding: 0; cursor: pointer; }
.upset-summary .report-sort:hover { text-decoration: underline; }
.upset-summary .report-sort:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.head-to-head { width: max-content; border-collapse: separate; border-spacing: 0; font-size: .75rem; }
.head-to-head caption { text-align: left; padding: 12px 0; font-weight: 700; }
.head-to-head th, .head-to-head td { padding: 9px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; text-align: center; }
.head-to-head thead th { position: sticky; top: 0; z-index: 2; background: var(--navy); color: white; vertical-align: bottom; }
.head-to-head thead th span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); min-height: 145px; text-align: left; }
.head-to-head tbody th { position: sticky; left: 0; z-index: 1; background: #f7f9fa; text-align: left; }
.head-to-head .head-to-head-corner { left: 0; z-index: 3; }
.head-to-head .winning { background: #dff6e9; color: #08613f; }
.head-to-head .losing { background: #fff0ee; color: var(--danger); }
.head-to-head .tied { background: #fff4db; color: #805b00; }
.head-to-head .no-match { background: #eef2f5; color: var(--muted); }

.weekly-places { min-width: 0; width: max-content; }
.weekly-places th, .weekly-places td { white-space: nowrap; }
.weekly-places td:last-child { background: inherit; color: inherit; }
.weekly-places .report-sort { border: 0; background: transparent; color: inherit; font: inherit; padding: 0; cursor: pointer; }
.weekly-places .report-sort:hover { text-decoration: underline; }
.weekly-places .report-sort:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.divisive-games { min-width: 0; width: max-content; }
.divisive-games th, .divisive-games td { white-space: nowrap; }
.divisive-games td:last-child { background: inherit; color: inherit; }

.agreement-grid td small { display: block; margin-top: 3px; color: var(--muted); font-size: .65rem; }