/* The chord explorer: two columns of choices, and the chord they make.
 *
 * Structure from the music-toolkit page (github.com/pouriaseyfi/music-toolkit,
 * chords.html), in this site's colours. The keyboard and the note chips it
 * shares with the scale explorer live in learn.css.
 */

.chd {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
  gap: clamp(18px, 3vw, 36px);
  align-items: start;
}
@media (max-width: 880px) {
  .chd { grid-template-columns: 1fr; }
}
.chd-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.quals { display: flex; flex-wrap: wrap; gap: 8px; }
.quals .chipbtn { font-size: 0.95rem; }

.chord-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.chord-head .name { font-size: 2.2rem; font-weight: 800; line-height: 1.15; }
.chord-head .full { color: var(--muted); font-size: 0.98rem; }

.chd .note-row .note-chip { min-width: 68px; }