/* The scale explorer.
 *
 * Structure from the music-toolkit page (github.com/pouriaseyfi/music-toolkit,
 * scales.html); the keyboard and the chips are the shared furniture in
 * learn.css, since the chord explorer draws the same ones.
 */

.scl {
  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) {
  .scl { grid-template-columns: 1fr; }
}
.scl-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.scale-list { display: flex; flex-wrap: wrap; gap: 8px; }
.scale-list .chipbtn { font-size: 0.9rem; }

.scale-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.scale-head .name { font-size: 1.9rem; font-weight: 800; line-height: 1.2; }
.scale-head .full { color: var(--muted); font-size: 0.95rem; }

/* Every note is a button here — tapping one plays it — so it needs to look
   pressable, which the chip in learn.css does not assume. */
.scl .note-chip {
  min-width: 62px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}
.scl .note-chip:hover { border-color: var(--brass); }
.scl .note-chip:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* The pattern of whole and half steps, which is the scale itself — the notes
   are only where it happens to start. */
.steps {
  margin-inline-start: auto;
  color: var(--muted);
  font-size: 0.82rem;
}
.steps b { color: var(--accent); font-weight: 700; letter-spacing: 0.06em; }