/* Family navigation keeps the diagram override compact as the catalog grows.
   Scale picker rules remain in styles.css and are deliberately unaffected. */
.harmony-picker-panel[data-kind='chord'] .harmony-picker-body {
  gap: 10px;
  padding-block: 10px 12px;
}
.harmony-picker-panel[data-kind='chord'] .harmony-picker-section-heading {
  min-height: 24px;
  margin-bottom: 5px;
}
.harmony-picker-families {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.harmony-picker-families > button {
  font-size: 12px;
  padding: 7px 3px;
}
.harmony-picker-panel[data-kind='chord'][data-layout][data-roomy] .harmony-picker-types {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 144px;
  align-content: start;
}
/* Reset the former flat catalog's nth-child centering rules. */
.harmony-picker-panel[data-kind='chord'][data-layout][data-roomy] .harmony-picker-types > button:nth-child(n) {
  grid-column: auto;
}
.harmony-picker-panel[data-kind='chord'] .harmony-picker-types > button {
  min-height: 44px;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.harmony-picker-panel[data-kind='chord'][data-layout='wide'] .harmony-picker-body {
  grid-template-columns: minmax(120px, .8fr) minmax(132px, .9fr) minmax(156px, 1.2fr);
  column-gap: 12px;
  align-items: start;
}
.harmony-picker-panel[data-kind='chord'][data-layout='wide'] .harmony-picker-roots {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.harmony-picker-panel[data-kind='chord'][data-layout='wide'] .harmony-picker-families {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.harmony-picker-panel[data-kind='chord'][data-layout='wide'][data-roomy='true'] .harmony-picker-body {
  grid-template-columns: minmax(176px, 1fr) minmax(156px, .95fr) minmax(216px, 1.3fr);
}
.harmony-picker-panel[data-kind='chord'][data-layout='wide'][data-roomy='true'] .harmony-picker-roots {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Keep full-size touch targets on short screens by reclaiming
   surrounding chrome rather than shrinking the controls. */
.harmony-picker-panel[data-kind='chord'][data-compact='true'] .harmony-picker-header,
.harmony-picker-panel[data-kind='chord'][data-compact='true'] .harmony-picker-footer {
  padding-block: 4px;
}
.harmony-picker-panel[data-kind='chord'][data-compact='true'] .harmony-picker-body {
  padding-block: 4px;
  gap: 6px;
}
.harmony-picker-panel[data-kind='chord'][data-compact='true'] .harmony-picker-section-heading {
  min-height: 18px;
  margin-bottom: 3px;
}
@media (max-width: 359px) {
  .harmony-picker-panel[data-kind='chord'] .harmony-picker-header,
  .harmony-picker-panel[data-kind='chord'] .harmony-picker-footer { padding: 10px 12px; }
  .harmony-picker-panel[data-kind='chord'] .harmony-picker-body { padding-inline: 12px; gap: 8px; }
  .harmony-picker-panel[data-kind='chord'] .harmony-picker-families { gap: 5px; }
  .harmony-picker-panel[data-kind='chord'] .harmony-picker-families > button { font-size: 11px; }
}