/* fret-chord-finder: scoped under #fret-chord-finder */
#fret-chord-finder .fcf-top { display: grid; grid-template-columns: 1fr 170px; gap: 12px; margin: 12px 0 8px; align-items: stretch; }
#fret-chord-finder .fcf-display { padding: 16px 12px; display: flex; flex-direction: column; justify-content: center; min-height: 150px; }
#fret-chord-finder .fcf-sym { word-break: break-word; }
#fret-chord-finder .fcf-quality { font-size: 16px; margin-top: 6px; }
#fret-chord-finder .fcf-notes { margin-top: 4px; letter-spacing: .04em; }
#fret-chord-finder .fcf-box { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 8px 8px 4px; text-align: center; }
#fret-chord-finder .fcf-box svg { width: 100%; height: auto; max-height: 220px; }
#fret-chord-finder .fcf-cap { margin: 0; font-variant-numeric: tabular-nums; }
#fret-chord-finder .fcf-strings { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#fret-chord-finder .fcf-str { min-height: 44px; min-width: 52px; justify-content: center; font-variant-numeric: tabular-nums; }
#fret-chord-finder .fcf-str[aria-pressed="false"] { color: var(--muted); }
#fret-chord-finder .fcf-shape { margin-top: 12px; }
#fret-chord-finder .fcf-shape input { flex: 1 1 140px; min-width: 0; min-height: 44px; font-variant-numeric: tabular-nums; }
#fret-chord-finder .fcf-h { margin: 12px 0 6px; }
#fret-chord-finder .chips .chip { min-height: 40px; }
@media (max-width: 640px) {
  #fret-chord-finder .fcf-top { grid-template-columns: 1fr 118px; gap: 8px; }
  #fret-chord-finder .display .big.fcf-sym { font-size: 44px; }
  #fret-chord-finder .fcf-quality { font-size: 14px; }
  #fret-chord-finder .display .mid.fcf-notes { font-size: 20px; }
  #fret-chord-finder label.field { width: 100%; justify-content: space-between; }
  #fret-chord-finder label.field select { flex: 1; min-width: 0; }
}
#fret-chord-finder .fb .dot { pointer-events: none; } /* dots sit over the tap targets; let taps through */