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 owns its own canvas height now (a definite px value per
   breakpoint), with the mobile chip legend above and the gap note below it
   flowing at natural size. This box therefore only needs to not constrain
   that height — no fixed height, or the note would again eat the plot. */
.chartBox {
  min-height: 0;
}