school_compare/nextjs-app/components/compare/TrendsExplorer.module.css

.explore {
  margin-top: 1rem;
}

.explore summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent-coral-dark);
  padding: 0.85rem 1.1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
}

.explore[open] summary {
  border-radius: 8px 8px 0 0;
}

.inner {
  border: 1px solid var(--border-light);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: var(--bg-card);
  padding: 1.25rem 1.5rem;
}

.picker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.picker label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.picker select {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-primary);
  max-width: 100%;
}

.desc {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.progressNote {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

/* ComparisonChart runs Chart.js with maintainAspectRatio:false, so it fills
   its container's height — which must be *definite*. A min-height alone does
   not resolve the chart wrapper's height:100%, leaving Chart.js to fall back
   to its ~150px default (a squashed sliver). Give it a real height. */
.chartBox {
  height: 420px;
}

@media (max-width: 640px) {
  /* Taller on mobile: the mobile-only school chips sit above the canvas and
     wrap to two rows for 3+ schools, so the plot keeps a usable height. */
  .chartBox {
    height: 360px;
  }
}