/* progressions: scoped under #progressions */
#progressions .pg-h { margin: 12px 0 6px; }
#progressions .pg-dia, #progressions .pg-prog { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
#progressions .pg-prog { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); margin-top: 12px; min-height: 84px; background: var(--display); border-radius: 20px; padding: 10px; }
#progressions .pg-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 8px 4px; border-radius: 14px;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); cursor: pointer; font: inherit; min-width: 0; }
#progressions .pg-card:hover { border-color: var(--ink); }
#progressions .pg-num { font-size: 12px; color: var(--muted); font-weight: 600; }
#progressions .pg-sym { font-size: 18px; font-weight: 600; line-height: 1.1; word-break: break-word; }
#progressions .pg-notes { font-size: 11px; color: var(--muted); line-height: 1.2; }
#progressions .pg-step { background: transparent; border-color: #44403c; color: #fff; }
#progressions .pg-step .pg-num, #progressions .pg-step .pg-notes { color: #a8a29e; }
#progressions .pg-step.on { background: #fff; color: #0c0a09; border-color: #fff; }
#progressions .pg-step.on .pg-num, #progressions .pg-step.on .pg-notes { color: #57534e; }
#progressions .pg-empty { color: #a8a29e; grid-column: 1 / -1; margin: 18px 8px; text-align: center; }
#progressions .pg-pick, #progressions .pg-play { margin-top: 12px; }
#progressions .pg-bpm { min-width: 64px; font-variant-numeric: tabular-nums; color: var(--ink); }
#progressions .chip { min-height: 40px; }
#progressions .btn { min-height: 44px; }
#progressions .pg-out { margin-top: 12px; }
#progressions .pg-shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin: 10px 0 12px; }
#progressions .pg-shapes[hidden] { display: none; }
#progressions .pg-shape { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 14px;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); cursor: pointer; font: inherit; min-width: 0; }
#progressions .pg-shape:hover { border-color: var(--ink); }
#progressions .pg-shape.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink) inset; }
#progressions .pg-shape .cd { width: 100%; max-width: 120px; height: auto; }
@media (max-width: 640px) {
  #progressions .pg-shapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #progressions .pg-dia { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #progressions .pg-prog { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px; }
  #progressions .pg-sym { font-size: 16px; }
  #progressions label.field { flex-wrap: wrap; }
  #progressions .pg-pick label.field select { max-width: 200px; }
}