/* fret-chords: chord charts for guitar, ukulele, banjo, bass, mandolin */
#fret-chords .fc-roots { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-top: 12px; }
#fret-chords .fc-roots .chip, #fret-chords .fc-types .chip { min-height: 44px; justify-content: center; padding: 6px 8px; }
#fret-chords .fc-types { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#fret-chords .fc-types .chip { padding: 6px 12px; }
#fret-chords .fc-head { margin: 14px 0 10px; }
#fret-chords .fc-sym { font: 400 34px/1 var(--serif); color: var(--ink); letter-spacing: -.02em; }
#fret-chords .fc-name { color: var(--body); font-weight: 500; }
#fret-chords .fc-diagrams { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
#fret-chords .diagram { font: inherit; color: inherit; }
#fret-chords .diagram[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
#fret-chords .diagram svg { max-width: 150px; display: block; margin: 0 auto; }
#fret-chords .cd .fc-barre, .fc-chart-tool .cd .fc-barre { fill: var(--primary); }
.fc-shape { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
#fret-chords .fc-actions { margin-top: 12px; }
#fret-chords .fc-fb { margin-top: 8px; }
.fc-chart-tool .fc-chart-h { margin: 0; font-size: 26px; }
.fc-chart-tool h3 { margin: 18px 0 8px; }
.fc-chart-tool .fc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.fc-chart-tool .fc-cell { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px 4px 4px; text-align: center; cursor: pointer; font: inherit; color: var(--ink); min-height: 44px; }
.fc-chart-tool .fc-cell:hover { border-color: var(--line-strong); }
.fc-chart-tool .fc-cell b { display: block; font-size: 14px; }
.fc-chart-tool .fc-cell svg { width: 100%; max-width: 110px; height: auto; display: block; margin: 0 auto; }
@media (max-width: 640px) {
  #fret-chords .fc-roots { grid-template-columns: repeat(6, 1fr); }
  #fret-chords .fc-types { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  #fret-chords .fc-types .chip { flex: none; }
  #fret-chords .fc-diagrams { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .fc-chart-tool .fc-grid { grid-template-columns: repeat(3, 1fr); }
}
#fret-chords select { max-width: 100%; min-width: 0; }
#fret-chords label.field { max-width: 100%; min-width: 0; }
#fret-chords .fc-roots .chip { min-width: 0; }