/* ---- Bar under the neck: action · view · practice ---- */
.view-buttons { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.vb-group { display: flex; align-items: center; gap: 8px; padding-left: 22px; border-left: 1px solid var(--line); }
.vb-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-muted); }
.vb-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 3px; overflow: hidden; }
.vb-seg button { border: none; border-radius: 0; padding: 7px 12px; font-size: 11px; background: var(--surface-panel); color: var(--control-ink); }
.vb-seg button.on { background: var(--selected); color: var(--on-selected); }
.vb-chip, .vb-mode { padding: 7px 12px; font-size: 11px; background: var(--surface-panel); color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: 3px; }
.vb-chip.active { background: var(--selected); color: var(--on-selected); border-color: var(--selected); box-shadow: none; }
.vb-mode:hover, .vb-chip:hover { border-color: var(--action); color: var(--text-strong); }

/* ---- One bar under the neck: play & tempo · view ---- */
.view-buttons { white-space: nowrap; }
.play-group { border-left: none; padding-left: 0; gap: 6px; }
.view-bar .bpm-value { font-family: 'Oswald', sans-serif; font-size: 18px; color: var(--action); min-width: 82px; text-align: center; }
.tempo-step { padding: 7px 10px; font-weight: 800; }
.vb-chip.active { background: var(--selected); color: var(--on-selected); border-color: var(--selected); }
.pop-anchor { position: relative; display: inline-block; }
.rhythm-pop { left: 0; top: calc(100% + 6px); width: 340px; white-space: normal; }
.rhythm-pop .bpm-line { margin-bottom: 10px; }
.rhythm-pop .seg { margin-bottom: 6px; }
.view-bar .vb-chip, .view-bar .vb-seg button { white-space: nowrap; }
.rhythm-pop .pop-row { display: flex; gap: 8px; margin-top: 10px; }
.rhythm-pop .pop-row button { flex: 1; }
.rhythm-pop .pop-head { display: flex; align-items: center; justify-content: space-between; }
.rhythm-pop .pop-head h4 { margin-bottom: 10px; }
.pop-done { display: none; }
body.phone .pop-done { display: inline-block; padding: 8px 18px; font-weight: 800; background: var(--action); color: var(--on-action); border-color: var(--action); }
.rhythm-pop .bpm-line { display: flex; align-items: center; gap: 12px; }
.rhythm-pop .bpm-line input { flex: 1; }
.pop-bpm { font-family: 'Oswald', sans-serif; font-size: 16px; color: var(--action); min-width: 70px; }

/* patterns that only make sense on a scale */
#pattern button:disabled { opacity: 0.35; cursor: default; }
.pattern-note { margin: -2px 0 0; font-size: 11px; color: var(--ink-muted); text-align: right; }

/* ---- Chords as voicings: the bar under the neck ---- */
.voicing-bar { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 2px 0 14px; }
.voicing-bar[hidden] { display: none; }
.voicing-bar .vb-seg button { padding: 7px 12px; font-size: 11px; white-space: nowrap; }
.voicing-bar .vb-seg button:disabled { opacity: 0.4; cursor: default; }
.vc-nav { display: flex; align-items: center; gap: 8px; }
.vc-nav[hidden], .vc-sets[hidden] { display: none; }
.vc-arrow { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--action); }
.vc-label { display: flex; flex-direction: column; align-items: center; min-width: 250px; line-height: 1.25; }
.vc-label b { font-family: 'Oswald', sans-serif; font-size: 20px; letter-spacing: 1px; color: var(--text-strong); }
.vc-label span { font-size: 12.5px; font-weight: 700; color: var(--action); letter-spacing: 0.3px; }
.vc-label small { font-size: 10.5px; color: var(--ink-muted); letter-spacing: 0.5px; }
.vc-note { flex-basis: 100%; margin: 0; text-align: center; font-size: 11px; color: var(--ink-muted); }
/* on a phone the voicing arrows replace the fret arrows: the window follows the voicing */
body.voicing.phone-portrait .phone-nav { display: none; }
body.phone .voicing-bar { order: -9; width: 100%; gap: 10px; margin: 0; }
body.phone .vc-nav { width: 100%; justify-content: space-between; order: -1; }
body.phone .vc-arrow { width: 52px; height: 44px; }
body.phone .vc-label { min-width: 0; flex: 1; }
body.study .voicing-bar .vc-view { display: none; }
@media (max-width: 1249px) { .voicing-bar { order: -3; width: 100%; } }