/* ---- Key Finder ---- */
.tool-page:has(.kf-container) { max-width: 100%; }
.kf-container { display: flex; flex-direction: column; align-items: center; max-width: 960px; width: 100%; margin: 0 auto; gap: 18px; }
.kf-results-wrap { width: 100%; }

.kf-input-area { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* Unified box — chord bar + builder in one card */
.kf-unified-box {
  width: 100%; background: #10121a; border: 1.5px solid #2a2d3a; border-radius: 10px;
  overflow: hidden;
}
.kf-unified-divider { height: 1.5px; background: #2a2d3a; }

/* Chord bar — shows entered chords */
.kf-chord-bar {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  min-height: 48px; width: 100%; padding: 12px 16px;
  background: transparent; border: none; border-radius: 0;
  align-items: center;
}
.kf-empty-hint { color: #444; font-size: 0.8rem; }
/* Unified chord chip (used by KF, PF, BT) */
.kf-chord-chip {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 0; padding: 8px 8px 4px; border-radius: 10px;
  font-weight: 700; color: #e0e0e0;
  background: #1e2a40; border: 1px solid #3a6ea5;
  cursor: grab; transition: all 0.15s;
  position: relative; width: 76px; text-align: center;
  box-sizing: border-box;
}
.kf-chip-degree { font-size: 0.82rem; font-weight: 700; }
.kf-chip-name { font-size: 0.78rem; font-weight: 600; opacity: 0.7; white-space: nowrap; line-height: 1; height: 0.78rem; display: flex; align-items: center; justify-content: center; }
.kf-chip-function { font-size: 0.5rem; opacity: 0.5; font-style: italic; letter-spacing: 0.02em; }
.kf-chip-bars { font-size: 0.48rem; opacity: 0.45; cursor: pointer; letter-spacing: 0.02em; }
.kf-chord-chip:hover .kf-chip-bars { opacity: 0.7; }
.kf-chord-chip .kf-chip-remove {
  cursor: pointer; opacity: 0.4; font-size: 0.65rem; padding: 1px 3px; border-radius: 50%;
  transition: opacity 0.15s, background 0.15s; margin-top: 2px;
}
.kf-chord-chip .kf-chip-remove:hover { opacity: 1; background: rgba(255,255,255,0.1); }
.kf-chord-chip.is-playing { background: #3a5020; border-color: #80b040; color: #d0f0a0; }

/* Builder area */
.kf-builder {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px; background: transparent; border: none; border-radius: 0;
}

/* Root note selector */
.kf-root-row {
  display: flex; gap: 4px; flex-wrap: wrap; justify-content: center;
}
.kf-root-btn {
  min-width: 44px; height: 36px; padding: 0 8px; border-radius: 10px;
  border: 1.5px solid #2a2d3a; background: #13151f; color: #aaa;
  font-size: 0.78rem; font-weight: 700; cursor: pointer;
  transition: all 0.15s; display: flex; align-items: center; justify-content: center;
  white-space: nowrap;
}
.kf-root-btn:hover { background: #1e2030; border-color: #3a3d4a; color: #fff; }
.kf-root-btn.active { background: #2a2d3a; border-color: #3a3d4a; color: #fff; }

/* Chord type selector */
.kf-type-row {
  display: flex; gap: 4px; flex-wrap: wrap; justify-content: center;
}
.kf-type-btn {
  min-width: 44px; height: 36px; padding: 0 8px; border-radius: 10px;
  border: 1.5px solid #2a2d3a; background: #13151f; color: #888;
  font-size: 0.75rem; font-weight: 600; cursor: pointer;
  transition: all 0.15s; display: flex; align-items: center; justify-content: center;
  white-space: nowrap;
}
.kf-type-btn:hover { background: #1e2030; border-color: #3a3d4a; color: #ccc; }
.kf-type-btn.active { background: #2a2d3a; border-color: #3a3d4a; color: #fff; }

/* Add row — add + play + backing buttons */
.kf-add-row {
  display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; justify-content: center;
}
.kf-btn-add {
  padding: 8px 20px; border-radius: 10px;
  border: 1.5px solid #2a2d3a; background: #1a1d27; color: #c0c0c0;
  font-size: 0.8rem; font-weight: 600; cursor: pointer;
  transition: all 0.15s;
}
.kf-btn-add:hover { background: #252838; border-color: #555; color: #fff; }
.kf-btn-flash { background: #252838 !important; border-color: #555 !important; }

/* Action buttons */
.kf-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.kf-btn {
  padding: 8px 18px; border-radius: 10px;
  border: 1.5px solid #2a2d3a; background: #1a1d27; color: #c0c0c0;
  font-size: 0.8rem; font-weight: 600; cursor: pointer;
  transition: all 0.15s;
}
.kf-btn:hover { background: #252838; border-color: #555; color: #fff; }
.kf-btn-accent { border-color: #2a2d3a; color: #c0c0c0; }
.kf-btn-accent:hover { border-color: #555; color: #fff; }
.kf-btn-backing { border-color: #2a2d3a; color: #c0c0c0; }
.kf-btn-backing:hover { border-color: #555; color: #fff; }
.kf-btn-stop { border-color: #2a2d3a; color: #c0c0c0; }
.kf-btn-stop:hover { background: #252838; border-color: #555; color: #fff; }

/* Results */
.kf-results { width: 100%; }
.kf-no-results { text-align: center; color: #444; font-size: 0.82rem; padding: 20px 0; }
.kf-results-columns {
  display: flex; gap: 20px; align-items: flex-start;
}
.kf-results-col-keys { flex: 1 1 50%; min-width: 0; }
.kf-results-col-songs { flex: 1 1 50%; min-width: 0; }

/* Hidden cards + show more */
.kf-hidden { display: none; }
.kf-show-more {
  display: block; width: 100%; margin-top: 10px; padding: 8px 0;
  border: 1.5px solid #2a2d3a; border-radius: 10px; background: #13151f;
  color: #888; font-size: 0.75rem; font-weight: 600; cursor: pointer;
  text-align: center; transition: all 0.15s; letter-spacing: 0.03em;
}
.kf-show-more:hover { background: #2a2d3a; border-color: #555; color: #ccc; }

/* Section title */
.kf-section-title {
  font-size: 0.72rem; font-weight: 700; color: #888;
  margin-top: 0; margin-bottom: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 2px solid #2a2d3a; padding-bottom: 6px;
}

/* Shared card grid */
.kf-results-grid,
.kf-songs-grid {
  display: flex; flex-direction: column; gap: 10px;
}

/* Shared card base */
.kf-card {
  background: #181b28; border: 1.5px solid #2a2d3a; border-radius: 10px;
  padding: 12px 14px; transition: border-color 0.2s;
  display: flex; flex-direction: column; gap: 6px;
}
.kf-card:hover { border-color: #444; }
.kf-card.exact { border-color: #408840; background: #141e14; }
.kf-card.best { border-color: #d08020; background: #1e1a14; }

/* Shared card internals */
.kf-card-header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kf-card-title { font-size: 0.82rem; font-weight: 700; color: #e0e0e0; }
.kf-card-pct { margin-left: auto; font-size: 0.68rem; color: #666; font-weight: 600; white-space: nowrap; }
.kf-card-sub { font-size: 0.68rem; color: #888; }
.kf-card-section { font-size: 0.68rem; color: #7a8a9a; font-weight: 600; white-space: nowrap; }
.kf-chord-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kf-card-detail { font-size: 0.68rem; color: #777; line-height: 1.5; }
.kf-card-actions { display: flex; gap: 6px; margin-top: auto; flex-wrap: wrap; }
.kf-card-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 12px; border-radius: 10px;
  font-size: 0.78rem; font-weight: 600; text-decoration: none;
  background: #1a1d2e; border: 1.5px solid #2a2d3a; color: #c0c0c0;
  transition: all 0.15s; cursor: pointer;
}
.kf-card-link:hover { background: #252838; border-color: #555; color: #fff; }

/* Chord match chips */
.kf-result-chords { display: flex; gap: 4px; flex-wrap: wrap; }
.kf-result-chord { padding: 2px 7px; border-radius: 10px; font-size: 0.62rem; font-weight: 600; }
.kf-rc-match { background: #1c3a1c; border: 1px solid #408840; color: #a0e0a0; }
.kf-rc-miss { background: #3a1c1c; border: 1px solid #884040; color: #e0a0a0; }

/* Song key label */
.kf-card-key { font-size: 0.68rem; color: #7a8a9a; margin-top: 4px; font-weight: 600; }

/* Chord and roman numeral displays on song cards */
.kf-card-chords { font-size: 0.7rem; color: #b0c0d0; font-weight: 600; margin-top: 2px; line-height: 1.5; }
.kf-card-roman { font-size: 0.65rem; color: #8a7ab0; font-weight: 600; font-style: italic; }
.kf-card-key-inline { font-size: 0.65rem; color: #7a8a9a; font-weight: 600; white-space: nowrap; }

/* ---- Jazz Standards section header ---- */
.kf-jazz-header {
  font-size: 0.68rem; color: #7cb8ff; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 8px; padding-top: 4px;
  border-bottom: 2px solid #2a2d3a; padding-bottom: 6px;
}

/* ---- Drag-drop states ---- */
.kf-chord-bar.drag-over { border-color: #3a3d4a; background: rgba(58,61,74,0.1); }
.kf-chord-chip.drag-over-left { border-left: 3px solid #7cb8ff !important; }
.kf-chord-chip.drag-over-right { border-right: 3px solid #7cb8ff !important; }
.kf-chord-chip.dragging { opacity: 0.4; }
.kf-diatonic-btn.dragging { opacity: 0.4; }
.kf-chord-chip { cursor: grab; }
.kf-chord-chip:active { cursor: grabbing; }

/* ---- From Key builder ---- */
.kf-key-builder { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; background: #10121a; border: 1.5px solid #2a2d3a; border-radius: 10px; }
.kf-key-context { display: flex; gap: 8px; align-items: center; }
.kf-key-select { padding: 8px 32px 8px 12px; border: 1.5px solid #2a2d3a; border-radius: 10px; background: #1a1d27; color: #ccc; font-size: 0.8rem; font-weight: 600; appearance: none; -webkit-appearance: none; cursor: pointer; }
.kf-key-select:focus { border-color: #3a3d4a; outline: none; }
.kf-diatonic-palette { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.kf-diatonic-btn { padding: 8px 14px; border-radius: 10px; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: all 0.15s; user-select: none; text-align: center; line-height: 1.3; }
.kf-diatonic-btn:hover { transform: scale(1.06); }
.kf-diatonic-btn.q-major { border: 1px solid #2a6cb0; background: #1a2a3c; color: #7cb8ff; }
.kf-diatonic-btn.q-minor { border: 1px solid #7a2ab0; background: #3a1a4c; color: #c88aff; }
.kf-diatonic-btn.q-dim { border: 1px solid #a03030; background: #3a1a1a; color: #ff8a8a; }
.kf-diatonic-btn.q-aug { border: 1px solid #b08a2a; background: #3a3a1a; color: #ffd080; }
.kf-btn-nondiatonic { padding: 6px 14px; border: 1px dashed #333; border-radius: 10px; background: transparent; color: #666; font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.kf-btn-nondiatonic:hover { border-color: #555; color: #ccc; }
.kf-nondiatonic-builder { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px; border: 1.5px solid #2a2d3a; border-radius: 10px; background: #13151f; }

/* ---- Chord Quality Popup (shared: KF, PF, BT) ---- */
.kf-quality-popup {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: #1a1d27;
  border: 1px solid #3a3d4a;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  min-width: 260px;
  max-width: 320px;
  cursor: default;
}
.kf-quality-popup-cat {
  font-size: 0.58rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin: 6px 0 3px 0;
}
.kf-quality-popup-cat:first-child { margin-top: 0; }
.kf-quality-popup-grid { display: flex; flex-wrap: wrap; gap: 3px; }
.kf-quality-popup-btn {
  padding: 4px 8px;
  border: 1.5px solid #2a2d3a;
  border-radius: 10px;
  background: #13151f;
  color: #999;
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
  font-family: inherit;
}
.kf-quality-popup-btn:hover { border-color: #555; color: #ddd; background: #1e2a40; }
.kf-quality-popup-btn.active { border-color: #4a8cd0; color: #7cb8ff; background: #1e3050; }

/* Bar length section (BT only) */
.kf-quality-popup-bars {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 2px solid #2a2d3a;
}
.kf-quality-popup-bars-row { display: flex; gap: 4px; justify-content: center; }
.kf-quality-popup-bars-btn {
  padding: 5px 12px;
  border: 1.5px solid #2a2d3a;
  border-radius: 10px;
  background: #13151f;
  color: #999;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  font-family: inherit;
}
.kf-quality-popup-bars-btn:hover { border-color: #555; color: #ddd; }
.kf-quality-popup-bars-btn.active { border-color: #4a8cd0; color: #7cb8ff; background: #1e3050; }

/* Hint text + cross-links */
.kf-chip-hint {
  font-size: 0.68rem;
  color: #555;
  text-align: center;
  font-style: italic;
  margin-top: 4px;
}
.kf-crosslink {
  font-size: 0.72rem;
  color: #666;
  text-align: center;
  margin-top: 2px;
}
.kf-crosslink a { color: #7cb8ff; text-decoration: none; font-weight: 600; }
.kf-crosslink a:hover { text-decoration: underline; color: #a0d0ff; }

/* ---- Responsive ---- */
@media (max-width: 800px) {
  .kf-results-columns { flex-direction: column; }
}
@media (max-width: 600px) {
  .kf-root-btn { min-width: 38px; height: 32px; font-size: 0.68rem; padding: 0 5px; }
  .kf-type-btn { padding: 5px 8px; font-size: 0.68rem; }
  .kf-chord-chip { font-size: 0.8rem; padding: 5px 6px; width: 66px; }
  .kf-add-row { flex-direction: column; gap: 8px; }
  .kf-actions { flex-wrap: wrap; justify-content: center; }
  .kf-quality-popup { min-width: 220px; max-width: 280px; }
  .kf-quality-popup-btn { padding: 3px 6px; font-size: 0.6rem; }
}