/* Copyright (c) 2026 Brownie, LLC. All rights reserved. */

/*
 * The Compare view (views/compare.ts): a program's teams, grades and
 * schools side by side. Builds on the shared pieces in styles.css, team.css,
 * team-roster.css, team-progress.css (charts) and team-season.css (tables).
 */

.compare-sections {
  display: grid;
  gap: inherit;
  min-width: 0;
}

/* The team's school, under its name. */
.compare-school {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 400;
}

/* What each short team still needs, under the table. */
.compare-notes {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: 0.85rem;
}

.compare-chart,
.compare-chart-area {
  display: grid;
  gap: 8px;
  min-width: 0;
}

/* Which groups the chart shows, when there are more than it can tell apart. */
.compare-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--control-radius);
}

.compare-picker legend {
  padding-inline: 4px;
  font-size: 0.85rem;
  font-weight: 600;
}

.compare-picker .checkbox-label {
  margin-top: 0;
  color: var(--color-text);
}