/* Курс beatbox harmonica: поверх css/beatbox.css (полосы, фишки удара, лента). */

/* Режимы и вид (какие карточки видны). */
body.beatharp:not(.mode-grooves) .grooves-only { display: none; }

/* Карточка «что слышу»: нота и удар рядом. */
.beatharp .b-heard .heard { min-width: 120px; }
.heard-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.heard-hit { font-size: 1.5rem; font-weight: 700; line-height: 1.3; min-height: 1.3em; color: var(--muted); }
.heard-hit.low, .heard-hit.mid, .heard-hit.high { color: var(--cls); }

/* Полоска «тон → шум»: слева чистый тон, справа шум. */
.level.tone { background: linear-gradient(90deg, var(--draw-soft), var(--bg) 40%, var(--bg) 60%, var(--blow-soft)); }
.tone-fill { height: 100%; width: 0; background: var(--muted); transition: width .06s linear; }
.tone-fill.tone { background: var(--draw); }
.tone-fill.noise { background: var(--blow); }

/* Фишка ноты гармошки в легенде: как фишка удара, но цвет стороны дыхания. */
.bh-note { display: inline-flex; flex-direction: column; align-items: center; min-width: 56px; padding: 6px 8px; border-radius: 10px; border: 2px solid transparent; background: var(--bg); }
.bh-note b { font: 800 1.3rem ui-monospace, Consolas, monospace; line-height: 1; }
.bh-note small { font-size: .7rem; color: var(--text); white-space: nowrap; }
.bh-note.blow { background: var(--blow-soft); }
.bh-note.blow b { color: var(--blow); }
.bh-note.draw { background: var(--draw-soft); }
.bh-note.draw b { color: var(--draw); }

/* Библиотека звуков: ноты окрашены по стороне дыхания. */
.beatharp .b-sound-grid button.blow { --cls: var(--blow); --cls-soft: var(--blow-soft); }
.beatharp .b-sound-grid button.draw { --cls: var(--draw); --cls-soft: var(--draw-soft); }

/* Счётчик атак нот во фристайле. */
.bx-counts span.note { --cls: var(--heard); --cls-soft: var(--scale); }

/* Лента грува: ячейка с ударом и нотой — цвет удара, нота подписью; лига — бледнее. */
.beatharp .lane-note.blow { background: var(--blow); }
.beatharp .lane-note.draw { background: var(--draw); }
.beatharp .lane-note.low, .beatharp .lane-note.mid, .beatharp .lane-note.high { background: var(--cls); }
.beatharp .lane-note.low.blow, .beatharp .lane-note.low.draw,
.beatharp .lane-note.mid.blow, .beatharp .lane-note.mid.draw,
.beatharp .lane-note.high.blow, .beatharp .lane-note.high.draw { background: linear-gradient(135deg, var(--cls) 50%, var(--blow) 50%); }
.beatharp .lane-note.low.draw, .beatharp .lane-note.mid.draw, .beatharp .lane-note.high.draw { background: linear-gradient(135deg, var(--cls) 50%, var(--draw) 50%); }
.beatharp .lane-note.tie { opacity: .7; }
.beatharp .b-tabrow input { letter-spacing: .05em; }