/* brass fingering and slide charts */
#brass-chart .bc-opts { display: flex; flex-wrap: wrap; gap: 6px; }
#brass-chart .bc-opts .chips { display: inline-flex; }
#brass-chart .bc-main { display: flex; gap: 16px; align-items: center; margin-top: 12px; }
#brass-chart .bc-card { flex: 0 0 auto; min-width: 96px; text-align: center; background: var(--strong); border-radius: 16px; padding: 12px 10px; }
#brass-chart .bc-name { font: 600 34px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
#brass-chart .bc-name2 { margin-top: 6px; min-height: 1.2em; }
#brass-chart .bc-right { flex: 1 1 auto; min-width: 0; }
#brass-chart .bc-diagram { min-height: 72px; display: flex; align-items: center; }
#brass-chart .bc-diagram svg { width: 100%; max-width: 300px; height: auto; display: block; }
#brass-chart .bc-fing { margin: 4px 0 0; font-weight: 600; color: var(--ink); }
#brass-chart .bc-none { margin: 0; color: var(--muted); }
#brass-chart .bc-alts { margin-top: 10px; align-items: center; }
#brass-chart .bc-txt { margin: 6px 0 0; color: var(--body); }
#brass-chart .bc-txt.muted { color: var(--muted); }
#brass-chart .bc-tip:empty { display: none; }
#brass-chart .bc-scroll { overflow-x: auto; overscroll-behavior-x: contain; margin-top: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 4px 0; }
#brass-chart .bc-staff { display: block; height: auto; width: 100%; }
#brass-chart .bc-line, #brass-chart .bc-ledger { stroke: var(--ink); stroke-width: 1; }
#brass-chart .bc-clef { stroke: var(--ink); }
#brass-chart .bc-ink { fill: var(--ink); }
#brass-chart .bc-head { fill: var(--ink); }
#brass-chart .bc-acc { stroke: var(--ink); stroke-width: 1.2; fill: none; }
#brass-chart .bc-acc-h { stroke-width: 2.4; }
#brass-chart .bc-hit { fill: transparent; cursor: pointer; }
#brass-chart .bc-hit:hover { fill: var(--strong); }
#brass-chart .bc-staff .bc-note { pointer-events: none; }
#brass-chart .bc-na { opacity: .3; }
#brass-chart .bc-sel .bc-head { fill: var(--ok); }
#brass-chart .bc-lbl { fill: var(--muted); font: 600 8.5px var(--sans); text-anchor: middle; pointer-events: none; }
#brass-chart .bc-lbl.on { fill: var(--ink); }
#brass-chart .bc-piano .kb { margin-top: 10px; }
#brass-chart .bc-foot { margin-top: 10px; gap: 8px; }
#brass-chart .bc-keys { margin: 0; }
/* diagrams */
#brass-chart .bc-v circle, #brass-chart .bc-v rect { fill: var(--card); stroke: var(--ink); stroke-width: 2; }
#brass-chart .bc-v.on circle, #brass-chart .bc-v.on rect { fill: var(--primary); stroke: var(--primary); }
#brass-chart .bc-v text { font: 600 16px var(--sans); text-anchor: middle; dominant-baseline: central; fill: var(--ink); }
#brass-chart .bc-v.on text { fill: var(--on-primary); }
#brass-chart .bc-tube { fill: var(--strong); stroke: var(--line-strong); }
#brass-chart .bc-slidebar { fill: var(--line-strong); }
#brass-chart .bc-hand { fill: var(--primary); }
#brass-chart .bc-tick { stroke: var(--muted); stroke-width: 1.5; }
#brass-chart .bc-tick.on { stroke: var(--ink); stroke-width: 3; }
#brass-chart .bc-pnum { font: 500 13px var(--sans); text-anchor: middle; fill: var(--muted); }
#brass-chart .bc-pnum.on { fill: var(--ink); font-weight: 700; }
#brass-chart .bc-short { font: 600 11px var(--sans); text-anchor: middle; fill: var(--warn); }
#brass-chart .bc-trig circle { fill: var(--card); stroke: var(--ink); stroke-width: 1.5; }
#brass-chart .bc-trig.on circle { fill: var(--primary); stroke: var(--primary); }
#brass-chart .bc-trig text { font: 600 12px var(--sans); text-anchor: middle; dominant-baseline: central; fill: var(--ink); }
#brass-chart .bc-trig.on text { fill: var(--on-primary); }
/* quiz */
#brass-chart .bc-qdiagram { max-width: 300px; margin: 14px auto 0; }
#brass-chart .bc-qdiagram svg { width: 100%; height: auto; display: block; }
#brass-chart .bc-qfing { text-align: center; font-weight: 600; color: var(--ink); margin: 4px 0 0; }
#brass-chart .bc-qtext { text-align: center; font-weight: 600; color: var(--ink); font-size: 17px; margin: 8px 0; min-height: 1.5em; }
#brass-chart .bc-qtext.ok { color: var(--ok); } #brass-chart .bc-qtext.bad { color: var(--bad); }
#brass-chart .bc-qopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 480px; margin: 0 auto; }
#brass-chart .bc-qa { min-width: 0; padding: 10px 8px; }
#brass-chart .bc-qa.ok { background: var(--ok); border-color: var(--ok); color: #fff; opacity: 1; }
#brass-chart .bc-qa.bad { background: var(--bad); border-color: var(--bad); color: #fff; opacity: 1; }
#brass-chart .bc-qscore, #brass-chart .bc-qhelp { text-align: center; margin: 8px 0 0; }
@media (max-width: 560px) {
  #brass-chart .bc-main { gap: 10px; }
  #brass-chart .bc-card { min-width: 76px; padding: 10px 6px; }
  #brass-chart .bc-name { font-size: 26px; }
}