/*
 * scales.css — Companion stylesheet for scales.js / ChartInator
 * Sourced from the original scale browser implementation, adapted for RiffLab integration.
 */

:root {
  --main-bg-color: #2b2b3b;
}

#controls_row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 16px;
}

#chartinator_tools {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 8px 14px;
  white-space: nowrap;
  align-items: center;
}

#chartinator_tools span:nth-child(odd) {
  text-align: right;
  color: #aac8e4;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#chartinator_tools select {
  background: #3a4a5a;
  color: white;
  padding: 4px 8px;
  border: 1px solid #556;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

#chartinator_tools select:focus {
  outline: none;
  border-color: #aac8e4;
}

/* ── History dropdown ──────────────────────────────────────────────────── */

#history_dropdown_wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 0.75rem;
  z-index: 200000;
}

#history_btn {
  background: #1e2e3e;
  color: #9ac4e0;
  border: 1px solid #2a4a6a;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
#history_btn:hover { background: #2a4a6a; color: #c8e4f8; }

#history_menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #1a2430;
  border: 1px solid #2a4a6a;
  border-radius: 6px;
  min-width: 340px;
  max-width: 420px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  overflow: hidden;
}
#history_menu.open { display: block; }

.history_item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid #1e3040;
  color: #9ac4e0;
  padding: 7px 14px;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
.history_item:last-child { border-bottom: none; }
.history_item:hover { background: #2a4a6a; }
.history_item:hover .hi_primary   { color: #c8e4f8; }
.history_item:hover .hi_secondary { color: #a0c4d8; }
.history_item.current { background: #1a3a5a; cursor: default; }
.history_item.current .hi_primary   { color: #c8e4f8; font-weight: bold; }
.history_item.current .hi_secondary { color: #88b0c8; }

.hi_primary {
  font-size: 0.80rem;
  color: #9ac4e0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hi_secondary {
  font-size: 0.70rem;
  color: #5a8aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* ── Saxophone display ─────────────────────────────────────────────────── */

.sax_range {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 10px 0 6px;
  align-items: flex-start;
}
.sax_note { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.sax_note.sax_out { opacity: 0.3; }
.sax_btn {
  min-width: 40px;
  padding: 5px 5px 4px;
  border-radius: 4px;
  border: 1px solid #3a4a5a;
  background: #2a3a4a;
  color: #6a9ab0;
  font-size: 0.73rem;
  cursor: pointer;
  text-align: center;
}
.sax_btn:hover      { background: #3a4a5a; }
.sax_in_scale       { background: #1e3a5a; border-color: #4a7aaa; color: #aac8e4; }
.sax_in_scale:hover { background: #2a4a6a; }
.sax_root           { background: #bb1818; border-color: #ee2020; color: #ffcccc; }
.sax_root:hover     { background: #d11e1e; }
.sax_dim            { background: #1e252e; border-color: #2a3a4a; color: #3a5a70; }

.sax_diagram { display:flex; flex-direction:column; align-items:center; background:#0d1418; border-radius:6px; padding:5px 5px 4px; gap:2px; }
.sax_oct { width:9px; height:9px; border-radius:2px; border:1.5px solid #3a5060; background:transparent; }
.sax_oct.pressed { background:#c4a200; border-color:#907600; }
.sax_hole { width:16px; height:16px; border-radius:50%; border:2px solid #3a5060; background:#131e24; }
.sax_hole.pressed { background:#7ddc9a; border-color:#4aaa6a; }
.sax_aux_hole { width:11px; height:11px; border-radius:50%; border:1.5px solid #3a5060; background:#131e24; }
.sax_aux_hole.pressed { background:#7ddc9a; border-color:#4aaa6a; }
.sax_joint { width:80px; height:2px; background:#2a3c48; border-radius:1px; margin:1px 0; }
.sax_row { display:flex; flex-direction:row; align-items:center; gap:2px; }
.sax_col_l { width:28px; display:flex; align-items:center; justify-content:flex-end; }
.sax_col_c { width:20px; display:flex; align-items:center; justify-content:center; }
.sax_col_r { width:28px; display:flex; align-items:center; justify-content:flex-start; }
.sax_skey { width:9px; height:9px; border-radius:50%; border:1.5px solid #2a3c48; background:#131e24; }
.sax_skey.active { background:#c8880a; border-color:#f0a830; }
.diag_cl2 { display:flex; flex-direction:row; gap:2px; }
.diag_cl3 { display:flex; flex-direction:row; gap:2px; }
.diag_cl5 { display:flex; flex-wrap:wrap; width:28px; gap:2px; }
.diag_ckey { width:8px; height:8px; border-radius:2px; border:1.5px solid #2a3c48; background:#131e24; }
.diag_ckey.active { background:#c8880a; border-color:#f0a830; }
.sax_split { width:20px; height:20px; border-radius:50%; border:1.5px solid #3a5060; margin-top:3px; display:flex; overflow:hidden; background:#131e24; }
.sax_half { flex:1; }
.sax_split_div { width:1px; background:#3a5060; flex-shrink:0; }
.sax_half.active { background:#7ddc9a; }
.sax_info {
  font-size: 0.68rem;
  color: #4a6a7a;
  margin-top: 6px;
  letter-spacing: 0.3px;
}

/* ── Trumpet display ───────────────────────────────────────────────────── */

.trumpet_range {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 10px 0 6px;
  align-items: flex-start;
}
.trumpet_note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #0d1418;
  border: 1px solid #1e2e3a;
  border-radius: 6px;
  padding: 6px 6px 5px;
}
.trumpet_note.trumpet_out { opacity: 0.35; }
.trumpet_btn {
  min-width: 42px;
  padding: 6px 6px 5px;
  border-radius: 4px;
  border: 1px solid #3a4a5a;
  background: #2a3a4a;
  color: #6a9ab0;
  font-size: 0.75rem;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
}
.trumpet_btn:hover      { background: #3a4a5a; }
.trumpet_in_scale       { background: #1e3a5a; border-color: #4a7aaa; color: #aac8e4; }
.trumpet_in_scale:hover { background: #2a4a6a; }
.trumpet_root           { background: #bb1818; border-color: #ee2020; color: #ffcccc; }
.trumpet_root:hover     { background: #d11e1e; }
.trumpet_dim            { background: #1e252e; border-color: #2a3a4a; color: #4a6a80; }
.trumpet_valves {
  display: flex;
  gap: 5px;
  align-items: center;
  height: 16px;
}
.trumpet_valve_dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid #3a5a7a;
  background: transparent;
}
.trumpet_valve_dot.pressed { background: #7ddc9a; border-color: #4aaa6a; }
.trumpet_open_lbl { font-size: 1rem; color: #4a7a9a; line-height: 1; }
.trumpet_valves_open .trumpet_open_lbl { color: #7ddc9a; }
.trumpet_written_note {
  font-size: 0.68rem;
  color: #4a6a7a;
  margin-top: 6px;
  letter-spacing: 0.3px;
}
.horn_side_lbl { font-size:0.55rem; letter-spacing:0.2px; margin-top:2px; }
.horn_f  { color:#7daadc; }
.horn_bb { color:#e8a020; }

/* ── Harmonica display ─────────────────────────────────────────────────── */

.harp_range {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 12px 4px 4px;
  overflow-x: auto;
}
.harp_hole {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.harp_hole_num {
  font-size: 0.65rem;
  color: #5a7a9a;
  padding: 2px 0;
  text-align: center;
  line-height: 1.4;
}
.harp_note_btn {
  min-width: 44px;
  padding: 6px 4px;
  border: 1px solid #3a4a5a;
  border-radius: 4px;
  background: #232d3a;
  color: #8aaccc;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s;
}
.harp_note_btn:hover { background: #2e3e50; }
.harp_blow { border-top: 3px solid #3a6a8a; border-radius: 4px 4px 2px 2px; }
.harp_draw { border-bottom: 3px solid #6a4a8a; border-radius: 2px 2px 4px 4px; }

.harp_blow.harp_in_scale {
  background: #1a3a5a; color: #aad4f4;
  border-color: #4a8ab4; border-top-width: 3px;
}
.harp_draw.harp_in_scale {
  background: #3a2800; color: #1a1000;
  border-color: #8a7000; border-bottom-width: 3px;
}
.harp_blow.harp_root {
  background: #1a4a2a; color: #7afa9a;
  border-color: #4aaa6a; border-top-width: 3px; font-weight: 700;
}
.harp_draw.harp_root {
  background: #3a2800; color: #e0c000;
  border-color: #9a7e00; border-bottom-width: 3px; font-weight: 700;
}
.harp_dim { color: #4a5a6a; border-color: #2a3340; }
.harp_legend {
  margin-top: 8px;
  font-size: 0.70rem;
  color: #4a6a8a;
  display: flex;
  gap: 16px;
  padding-left: 4px;
}
.harp_legend_blow { color: #4a8aaa; }
.harp_legend_draw { color: #a89000; }
.harp_info {
  font-size: 0.68rem;
  color: #4a6a7a;
  margin-top: 4px;
  letter-spacing: 0.3px;
  padding-left: 4px;
}

/* ── Flute display ─────────────────────────────────────────────────────── */

.flute_range {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 10px 0 6px;
  align-items: flex-start;
}
.flute_note { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.flute_btn {
  min-width: 40px;
  padding: 5px 5px 4px;
  border-radius: 4px;
  border: 1px solid #3a4a5a;
  background: #2a3a4a;
  color: #6ab0b0;
  font-size: 0.73rem;
  cursor: pointer;
  text-align: center;
}
.flute_btn:hover      { background: #3a4a5a; }
.flute_in_scale       { background: #1e3a5a; border-color: #4a7aaa; color: #aac8e4; }
.flute_in_scale:hover { background: #2a4a6a; }
.flute_root           { background: #bb1818; border-color: #ee2020; color: #ffcccc; }
.flute_root:hover     { background: #d11e1e; }
.flute_dim            { background: #1e252e; border-color: #2a3a4a; color: #3a5a70; }

.flute_diagram { display:flex; flex-direction:column; align-items:center; background:#0d1418; border-radius:6px; padding:5px 5px 4px; gap:2px; }
.flute_thumb { width:9px; height:9px; border-radius:2px; border:1.5px solid #3a5060; background:transparent; }
.flute_thumb.pressed { background:#c4a200; border-color:#907600; }
.flute_hole { width:16px; height:16px; border-radius:50%; border:2px solid #3a5060; background:#131e24; }
.flute_hole.pressed { background:#7ddc9a; border-color:#4aaa6a; }
.flute_joint { width:80px; height:2px; background:#2a3c48; border-radius:1px; margin:1px 0; }
.flute_row { display:flex; flex-direction:row; align-items:center; gap:2px; }
.flute_col_l { width:28px; display:flex; align-items:center; justify-content:flex-end; }
.flute_col_c { width:20px; display:flex; align-items:center; justify-content:center; }
.flute_col_r { width:28px; display:flex; align-items:center; justify-content:flex-start; }
.flute_skey { width:9px; height:9px; border-radius:50%; border:1.5px solid #2a3c48; background:#131e24; }
.flute_skey.active { background:#c4a200; border-color:#907600; }
.flute_endcap { width:16px; height:6px; border-radius:2px; background:#2a3c48; margin-top:1px; }
.flute_info {
  font-size: 0.68rem;
  color: #4a6a7a;
  margin-top: 6px;
  letter-spacing: 0.3px;
}

/* ── Clarinet display ──────────────────────────────────────────────────── */

.clar_range { display:flex; flex-wrap:wrap; gap:7px; padding:12px; align-items:flex-start; }
.clar_alt_row { display:flex; align-items:center; gap:3px; justify-content:center; margin-top:1px; }
.clar_alt_btn { background:none; border:none; color:#4a7a9a; font-size:0.6rem; cursor:pointer; padding:1px 3px; line-height:1; }
.clar_alt_btn:hover { color:#7aaabf; }
.clar_alt_count { font-size:0.58rem; color:#4a7a9a; min-width:20px; text-align:center; }
.clar_alt_lbl { font-size:0.55rem; color:#3a6a8a; white-space:nowrap; max-width:58px; overflow:hidden; text-overflow:ellipsis; }
.clar_note { display:flex; flex-direction:column; align-items:center; gap:4px; }
.clar_note.clar_out             { opacity:0.30; }
.clar_note.clar_throat          { opacity:0.80; }
.clar_note.clar_throat.clar_out { opacity:0.22; }
.clar_btn {
  min-width: 40px; padding: 5px 4px; border-radius: 6px;
  border: 1px solid #2a3a4a; background: #1e252e; color: #6a8a9a;
  font-size: 0.72rem; cursor: pointer; line-height: 1.2;
}
.clar_btn:hover      { background: #3a4a5a; }
.clar_in_scale       { background: #1e3a5a; border-color: #4a7aaa; color: #aac8e4; }
.clar_in_scale:hover { background: #2a4a6a; }
.clar_root           { background: #bb1818; border-color: #ee2020; color: #ffcccc; }
.clar_root:hover     { background: #d11e1e; }
.clar_dim            { background: #1e252e; border-color: #2a3a4a; color: #4a6a80; }

.clar_diagram {
  display: flex; flex-direction: column; align-items: center;
  background: #0d1418; border-radius: 6px; padding: 5px 7px 4px; gap: 2px;
}
.clar_diagram_fiati { min-height: 44px; justify-content: center; }
.clar_fiati_glyph {
  font-family: Fiati, 'Bravura Text', 'Noto Music', serif;
  font-size: 34px; line-height: 1; color: #b8d0e0; user-select: none;
}
.clar_fiati_glyph_missing { font-family: ui-monospace, monospace; font-size: 1rem; color: #4a5a60; }
.clar_reg { width:9px; height:9px; border-radius:2px; border:1.5px solid #3a5060; background:transparent; margin-bottom:1px; }
.clar_reg.pressed { background:#e8a020; border-color:#c07010; }
.clar_thumb { width:13px; height:13px; border-radius:50%; border:1.5px dashed #2a4050; background:#131e24; }
.clar_thumb.pressed { background:#7ddc9a; border-color:#4aaa6a; border-style:solid; }
.clar_hole { width:16px; height:16px; border-radius:50%; border:2px solid #3a5060; background:#131e24; }
.clar_hole.pressed { background:#7ddc9a; border-color:#4aaa6a; }
.clar_aux_hole { width:11px; height:11px; border-radius:50%; border:1.5px solid #3a5060; background:#131e24; }
.clar_aux_hole.pressed { background:#7ddc9a; border-color:#4aaa6a; }
.clar_joint { width:64px; height:2px; background:#2a3c48; border-radius:1px; margin:1px 0; }
.clar_row { display:flex; flex-direction:row; align-items:center; gap:2px; }
.clar_col_l { width:22px; display:flex; justify-content:center; align-items:center; }
.clar_col_c { width:20px; display:flex; justify-content:center; align-items:center; }
.clar_col_r { width:22px; display:flex; justify-content:center; align-items:center; }
.clar_skey { width:9px; height:9px; border-radius:50%; border:1.5px solid #2a3c48; background:#131e24; }
.clar_skey.active { background:#c8880a; border-color:#f0a830; }
.clar_cluster { display:flex; flex-wrap:wrap; width:20px; gap:2px; justify-content:center; }
.clar_ckey { width:8px; height:8px; border-radius:2px; border:1.5px solid #2a3c48; background:#131e24; }
.clar_ckey.active { background:#c8880a; border-color:#f0a830; }
.clar_info { font-size:0.68rem; color:#4a6a7a; margin-top:6px; letter-spacing:0.3px; }

/* ── Fingering legend ──────────────────────────────────────────────────── */

#fingering_legend {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #0d1418;
  border: 1px solid #2a3c48;
  border-radius: 6px;
  padding: 7px 10px 8px;
}
#fingering_legend:empty { display: none; }

.fleg_title {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #5a8aaa;
  margin-bottom: 5px;
}
.fleg_row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  min-height: 20px;
}
.fleg_l { width:24px; display:flex; align-items:center; justify-content:flex-end; gap:2px; }
.fleg_c { width:20px; display:flex; align-items:center; justify-content:center; }
.fleg_r { width:24px; display:flex; align-items:center; justify-content:flex-start; gap:2px; }
.fleg_lbl { font-size:0.72rem; color:#7aaabf; white-space:nowrap; padding-left:5px; }
.fleg_sub {
  display: flex; align-items: center; gap: 3px;
  padding-left: 50px; min-height: 14px; margin-bottom: 1px;
}
.fleg_sub_txt { font-size:0.63rem; color:#4a7a8a; white-space:nowrap; }
.fleg_joint { width:100%; height:2px; background:#2a3c48; border-radius:1px; margin:3px 0; }

/* ── Trombone display ──────────────────────────────────────────────────── */

.trombone_range {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px;
  align-items: flex-start;
}
.trombone_note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: #0d1418;
  border: 1px solid #1e2e3a;
  border-radius: 6px;
  padding: 6px 6px 5px;
}
.trombone_note.trombone_out { opacity: 0.35; }
.trombone_btn {
  min-width: 42px;
  padding: 6px 6px 5px;
  border-radius: 7px;
  border: 1px solid #2a3a4a;
  background: #1e252e;
  color: #6a8a9a;
  font-size: 0.75rem;
  cursor: pointer;
  line-height: 1.2;
}
.trombone_btn:hover      { background: #3a4a5a; }
.trombone_in_scale       { background: #1e3a5a; border-color: #4a7aaa; color: #aac8e4; }
.trombone_in_scale:hover { background: #2a4a6a; }
.trombone_root           { background: #bb1818; border-color: #ee2020; color: #ffcccc; }
.trombone_root:hover     { background: #d11e1e; }
.trombone_dim            { background: #1e252e; border-color: #2a3a4a; color: #4a6a80; }
.trombone_slide_wrap { display:flex; align-items:center; gap:4px; }
.trombone_pos_num { font-size:0.65rem; color:#7ddc9a; min-width:10px; text-align:center; font-weight:bold; }
.trombone_slide_track { width:48px; height:5px; background:#1a2430; border-radius:3px; overflow:hidden; }
.trombone_slide_fill { height:100%; background:#7ddc9a; border-radius:3px; }
.trombone_trigger_lbl { font-size:0.58rem; color:#e8a020; letter-spacing:0.2px; text-align:center; }
.trombone_info { font-size:0.68rem; color:#4a6a7a; margin-top:6px; letter-spacing:0.3px; }

/* ── Tuner ─────────────────────────────────────────────────────────────── */

#tuner_strings {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.tuner_str {
  background: #1a2a3a;
  color: #6a9ab0;
  border: 1px solid #2a4a6a;
  border-radius: 4px;
  padding: 3px 7px;
  font-size: 0.78rem;
  min-width: 32px;
  text-align: center;
}
.tuner_str.closest { background: #1e3a5a; border-color: #4a7aaa; color: #aac8e4; }
.tuner_str.in_tune  { background: #1a3a22; border-color: #3a9a5a; color: #7ddc9a; }

#tuner_note {
  text-align: center;
  font-size: 3.2rem;
  font-weight: 700;
  color: #aac8e4;
  line-height: 1;
  min-height: 3.6rem;
  letter-spacing: -1px;
}
#tuner_note.in_tune { color: #7ddc9a; }

#tuner_hz {
  text-align: center;
  font-size: 0.72rem;
  color: #4a7a9a;
  min-height: 1.1rem;
  margin-top: 2px;
}

#tuner_hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
#tuner_hdr_title { font-size:0.7rem; color:#5a8ab0; text-transform:uppercase; letter-spacing:1px; }
#tuner_close_btn { background:none; border:none; color:#5a8ab0; font-size:1rem; cursor:pointer; line-height:1; padding:0 2px; }
#tuner_close_btn:hover { color:#aac8e4; }

#tuner_meter { position:relative; height:28px; margin:10px 0 4px; }
#tuner_track {
  position: absolute;
  top: 50%; left: 20px; right: 20px;
  height: 3px;
  background: #1e2e3e;
  border-radius: 2px;
  transform: translateY(-50%);
}
#tuner_center_tick {
  position: absolute;
  top: 20%; left: 50%;
  width: 2px; height: 60%;
  background: #2a4a6a;
  transform: translateX(-50%);
}
#tuner_needle {
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  background: #4a7a9a;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: left 0.1s ease-out, background 0.2s, box-shadow 0.2s;
}
#tuner_needle.in_tune { background: #7ddc9a; box-shadow: 0 0 7px #7ddc9a88; }

.tuner_flat_sharp { position:absolute; top:50%; transform:translateY(-50%); font-size:0.68rem; color:#3a6a8a; }
.tuner_flat_sharp.flat  { left:2px; }
.tuner_flat_sharp.sharp { right:2px; }
#tuner_cents { text-align:center; font-size:0.72rem; color:#4a7a9a; min-height:1.1rem; }
#tuner_status { text-align:center; font-size:0.68rem; color:#3a6a8a; margin-top:8px; }

/* ── Scale info ────────────────────────────────────────────────────────── */

#scale_info {
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: #aaa;
}
#scale_info strong { color: #ddd; margin-left: 6px; }

/* ── Chord voicing list ────────────────────────────────────────────────── */

#horizontal_neck { overflow-x: auto; padding-bottom: 8px; }

#chord_voicing_list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  min-height: 0;
}
#chord_voicing_list button {
  background: #3a4a5a;
  color: #ccc;
  border: 1px solid #556;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: monospace;
  letter-spacing: 0.5px;
}
#chord_voicing_list button:hover { background: #4a6080; color: #fff; }
#chord_voicing_list button.active { background: #3a6ea8; color: #fff; border-color: #aac8e4; }
#chord_voicing_list button.preferred { border-color: #4a9a4a; color: #9ddc9a; }
#chord_voicing_list button.preferred.active { background: #3a6ea8; color: #fff; border-color: #4a9a4a; }
#chord_voicing_list button.barre { background: #1a3a4a; color: #7ad4e8; border-color: #2a6a80; }
#chord_voicing_list button.full_barre { background: #1a3080; color: #aac8ff; border-color: #4a6ac0; }
#chord_voicing_list button.full_barre.active { background: #2a50c0; color: #fff; border-color: #6a8ae0; }
#chord_voicing_list button.main { background: #3a2e00 !important; color: #ffffff !important; border: 2px solid #e8bc00 !important; font-weight: bold; }
#chord_voicing_list button.main.active { background: #544400 !important; color: #ffffff !important; }
#chord_voicing_list button.beginner { background: #1c1238; color: #c0a0f0; border-color: #6a3ab8; }
#chord_voicing_list button.beginner.active { background: #3a2888; color: #ffffff; border-color: #9a7ae0; }
#chord_voicing_list button.beginner:hover { background: #2a1a58; color: #d8c0ff; }

/* ── Finder results ────────────────────────────────────────────────────── */

.finder_result {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  background: #2a3a1e;
  color: #7ddc9a;
  border: 1px solid #27ae60;
}
.finder_result.partial { background: #3a3a1a; color: #cccc7d; border-color: #9a9a2e; }
#finder_no_match { font-size: 0.8rem; color: #888; font-style: italic; }

/* ── Fretboard ─────────────────────────────────────────────────────────── */

.fretboard button {
  font-size: 0.65rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.1s;
  height: 30px;
  width: 30px;
  border: 2px solid #c07010;
  background: #e8a020;
  color: #111111;
  border-radius: 50%;
  z-index: 100000;
  position: relative;
}
.fretboard button.dimmed { background: #2a2418; color: #8a7850; border-color: #5a4a30; }
.fretboard button.highlight.dimmed { background: #4a1818; color: #b06060; border-color: #7a3030; }
.fretboard button:hover { background: #f0b030; color: #111111; border-color: #d09020; }
.fretboard button.highlight { background: #c0392b; color: #e0e0e0; border-color: #e04030; }
.fretboard button.highlight:hover { background: #d94030; }
.fretboard button.chord_voicing { background: #e8a020; color: #111111; border-color: #c07010; font-size: 0.8rem; }
.fretboard button.chord_voicing:hover { background: #f0b030; }
.fretboard button.highlight.chord_voicing { background: #c0392b; border-color: #e8a020; box-shadow: 0 0 0 2px #e8a020; }
.fretboard button.finder_selected { background: #1a6030; color: #80f0a0; border-color: #30a050; }
.fretboard button.finder_selected:hover { background: #208040; color: #b0ffcc; }

.fretboard .fret_number {
  color: #3a2008;
  position: relative;
  height: 22px;
  background: #c8b098;
  text-align: center;
  font-size: 0.72rem;
  line-height: 22px;
}
.fretboard .fret_marker_row {
  position: relative;
  height: 18px;
  background: #c8b098;
  text-align: center;
  line-height: 18px;
  color: #2a1408;
  font-size: 0.68rem;
}
.fretboard .fret {
  background: #ede0c8;
  border-left: 2px solid #6a4820;
  position: relative;
  height: 34px;
  text-align: center;
}
.fretboard .fret_void { background: #c8b098; height: 34px; }
.fretboard .fret_spacer {
  background: #ede0c8;
  height: 8px;
  border-right: 9px solid #5a3810;
  border-left: 9px solid transparent;
}
.fretboard .fret_spacer.fret_spacer_fret { border-left: 2px solid #6a4820; border-right: none; }
.fretboard .open_string {
  border-right: 9px solid #5a3810;
  border-left: 9px solid transparent;
  position: relative;
  height: 34px;
  background: #c8b098;
}
.fretboard .headstock { background: #c8b098 !important; }
.fretboard .string-line {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #3a2810;
  pointer-events: none;
}

/* ── Bass neck override ─────────────────────────────────────────────────
   Applied when a bass instrument is selected (class added by scales.js).
   All original .fretboard rules above are untouched — remove this block to revert.
   ─────────────────────────────────────────────────────────────────────── */

/* Neck body — dark rosewood */
.fretboard.bass-neck {
  background: #1c0e07 !important;
}

/* Headstock / open-string area */
.fretboard.bass-neck .headstock,
.fretboard.bass-neck .fret_void {
  background: #120a04 !important;
}

/* Fret number strip */
.fretboard.bass-neck .fret_number {
  background: #120a04;
  color: #c8a870;
  height: 24px;
  line-height: 24px;
  font-size: 0.75rem;
}

/* Inlay dot strip — larger, pearloid-gold */
.fretboard.bass-neck .fret_marker_row {
  background: #120a04;
  color: #d4b86a;
  font-size: 0.95rem;
  height: 20px;
  line-height: 20px;
}

/* Fret cells — nickel fret wire */
.fretboard.bass-neck .fret {
  background: #1c0e07;
  border-left: 3px solid #a89878;
  height: 36px; /* rollback: was 50px */
}

/* Void frets (above capo) */
.fretboard.bass-neck .fret_void {
  height: 36px; /* rollback: was 50px */
}

/* Spacer row (nut gap) */
.fretboard.bass-neck .fret_spacer {
  background: #1c0e07;
  border-right: 12px solid #e8ddb8; /* bone nut */
  height: 12px;
}
.fretboard.bass-neck .fret_spacer.fret_spacer_fret {
  border-left: 3px solid #a89878;
  border-right: none;
}

/* Open-string column — bone nut */
.fretboard.bass-neck .open_string {
  background: #120a04;
  border-right: 12px solid #e8ddb8;
  height: 36px; /* rollback: was 50px */
}

/* Strings — wound metal look (gradient: bright-center, dark-edge) */
.fretboard.bass-neck .string-line {
  background: linear-gradient(
    to bottom,
    #706050 0%,
    #c8b488 30%,
    #e0cc98 50%,
    #c8b488 70%,
    #706050 100%
  );
  border-radius: 50%;
}

/* ── Piano keyboard ────────────────────────────────────────────────────── */

.piano_keyboard { position: relative; user-select: none; margin: 16px auto; }
.piano_white {
  position: absolute;
  background: #fffff5;
  border: 1px solid #999;
  border-top: none;
  border-radius: 0 0 5px 5px;
  cursor: pointer;
  font-size: 0.6rem;
  font-weight: bold;
  color: #888;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  box-sizing: border-box;
}
.piano_white:hover                { background: #e8d090; }
.piano_white.in_scale             { background: #d08030; color: #1a0800; border-color: #a06020; }
.piano_white.in_scale:hover       { background: #e09040; }
.piano_white.is_root              { background: #d08030; color: #1a0800; border: 3px solid #ff2828; }
.piano_white.is_root:hover        { background: #e09040; }
.piano_white.finder_selected      { background: #27ae60; color: white; border-color: #1a7a40; }
.piano_white.finder_selected:hover{ background: #2ecc71; color: #111; }
.piano_white.chord_voicing        { background: #d08030; color: #1a0800; border-color: #a06020; }
.piano_white.is_root.chord_voicing{ background: #d08030; color: #1a0800; border: 3px solid #ff2828; box-shadow: 0 0 0 2px #ff2828; }
.piano_white.piano_pressed        { background: #f0e8b0 !important; transition: background 0s; }

.piano_black {
  position: absolute;
  background: #1a1a1a;
  border: 1px solid #000;
  border-top: none;
  border-radius: 0 0 4px 4px;
  cursor: pointer;
  z-index: 2;
  font-size: 0.5rem;
  color: #777;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
  box-sizing: border-box;
}
.piano_black:hover                { background: #2a2a2a; }
.piano_black.in_scale             { background: #a06020; color: #f0e0c0; border-color: #c07830; }
.piano_black.in_scale:hover       { background: #b07030; }
.piano_black.is_root              { background: #a06020; color: #f0e0c0; border: 2px solid #ff2828; }
.piano_black.is_root:hover        { background: #b07030; }
.piano_black.finder_selected      { background: #1a6a3a; color: #afc; }
.piano_black.chord_voicing        { background: #a06020; color: #f0e0c0; border-color: #c07830; }
.piano_black.piano_pressed        { background: #6a6020 !important; transition: background 0s; }

/* ── Related Chords panel ──────────────────────────────────────────────── */

#related_chords { margin-top: 18px; }
.rc_section { margin-bottom: 8px; border: 1px solid #3a4a5a; border-radius: 6px; overflow: hidden; }
.rc_section_hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  background: #1e2a3a;
  color: #aac8e4;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-sizing: border-box;
}
.rc_section_hdr:hover { background: #243040; }
.rc_section_hdr .rc_arrow { font-size: 0.7rem; transition: transform 0.15s; }
.rc_section_hdr.collapsed .rc_arrow { transform: rotate(-90deg); }
.rc_section_body { padding: 10px 12px; background: #141e28; }

.rc_row { margin-bottom: 10px; }
.rc_row:last-child { margin-bottom: 0; }
.rc_row_label { font-size:0.72rem; color:#7a8fa0; margin-bottom:5px; text-transform:uppercase; letter-spacing:0.5px; }
.rc_btns { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }

.rc_chord_btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 8px;
  background: #1e3050;
  color: #cde;
  border: 1px solid #3a5a7a;
  border-radius: 4px;
  cursor: pointer;
  min-width: 46px;
}
.rc_chord_btn:hover  { background: #2a4060; }
.rc_chord_btn.active { background: #3a6ea8; border-color: #5a9ed8; color: #fff; }
.rc_chord_btn.active .rcb_sub { color: #cde; }
.rc_chord_btn.unavailable { opacity: 0.35; cursor: default; }
.rcb_roman { font-weight: bold; font-size: 0.78rem; }
.rcb_sub   { font-size: 0.62rem; color: #7a9ab0; white-space: nowrap; }

.rc_prog_name { font-size:0.72rem; color:#7a8fa0; margin-bottom:5px; text-transform:uppercase; letter-spacing:0.5px; }

.rc_play_btn {
  width: 22px; height: 22px; border-radius: 50%;
  background: #2a5a2a; color: #7ddc9a; border: 1px solid #3a8a3a;
  font-size: 0.6rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; flex-shrink: 0;
}
.rc_play_btn:hover { background: #3a7a3a; }
.rc_stop_btn {
  width: 22px; height: 22px; border-radius: 50%;
  background: #5a1a1a; color: #dc7d7d; border: 1px solid #8a3a3a;
  font-size: 0.55rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; flex-shrink: 0;
}
.rc_stop_btn:hover { background: #7a2a2a; }
.rc_chord_btn.rc_playing { background: #d4a800; border-color: #e8bc00; color: #fff; box-shadow: 0 0 7px #e8bc00; }
.rc_chord_btn.rc_playing .rcb_sub { color: #1a1000; }

/* ── Triads toggle ─────────────────────────────────────────────────────── */

#triads_toggle { display:flex; align-items:center; gap:7px; cursor:pointer; font-size:0.78rem; color:#7ddc9a; user-select:none; }
#triads_only_cb { display:none; }
.toggle_track { width:32px; height:18px; background:#2a3a4a; border:1px solid #3a6a7a; border-radius:9px; position:relative; flex-shrink:0; transition:background 0.2s, border-color 0.2s; }
#triads_only_cb:checked + .toggle_track { background:#1a5a3a; border-color:#3a9a5a; }
.toggle_thumb { width:14px; height:14px; background:#5a8a9a; border-radius:50%; position:absolute; top:1px; left:1px; transition:left 0.2s, background 0.2s; }
#triads_only_cb:checked + .toggle_track .toggle_thumb { left:15px; background:#7ddc9a; }