/*
  Barely Harris lab suite overrides.
  This layer is intentionally route-scoped to the larger legacy worktrees.
*/

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) {
  --bh-lab-ink: #1f2428;
  --bh-lab-muted: #66707a;
  --bh-lab-line: #d8ddd8;
  --bh-lab-paper: #fbfaf6;
  --bh-lab-panel: #ffffff;
  --bh-lab-panel-soft: #f3f1eb;
  --bh-lab-teal: #1f766f;
  --bh-lab-teal-dark: #185f59;
  --bh-lab-red: #9f3d3d;
  --bh-lab-gold: #b2832e;
  --bh-lab-green-soft: #e7f2ed;
  --bh-lab-red-soft: #f5e8e5;
  --bh-lab-gold-soft: #f6efd9;
  --bh-lab-shadow: 0 14px 36px rgba(31, 36, 40, 0.08);
  --bh-lab-shell-h: 54px;
  --bh-lab-radius: 8px;

  --bg: var(--bh-lab-paper) !important;
  --bg-color: var(--bh-lab-paper) !important;
  --bg-dark: var(--bh-lab-paper) !important;
  --bg-medium: var(--bh-lab-panel-soft) !important;
  --bg-light: var(--bh-lab-panel) !important;
  --secondary-bg: var(--bh-lab-panel) !important;
  --card-bg: var(--bh-lab-panel) !important;
  --panel: var(--bh-lab-panel) !important;
  --panel-2: var(--bh-lab-panel-soft) !important;
  --panel-strong: var(--bh-lab-panel) !important;
  --surface: var(--bh-lab-panel) !important;
  --surface-2: var(--bh-lab-panel-soft) !important;
  --screen-bg: #f8f7f2 !important;
  --text: var(--bh-lab-ink) !important;
  --text-color: var(--bh-lab-ink) !important;
  --text-primary: var(--bh-lab-ink) !important;
  --text-secondary: var(--bh-lab-muted) !important;
  --text-muted: var(--bh-lab-muted) !important;
  --ink: var(--bh-lab-ink) !important;
  --muted: var(--bh-lab-muted) !important;
  --line: var(--bh-lab-line) !important;
  --line-2: #c7cec9 !important;
  --border: var(--bh-lab-line) !important;
  --border-color: var(--bh-lab-line) !important;
  --accent: var(--bh-lab-teal) !important;
  --accent-color: var(--bh-lab-teal) !important;
  --accent-hover: var(--bh-lab-teal-dark) !important;
  --accent-soft: #dbeee9 !important;
  --primary-color: var(--bh-lab-teal) !important;
  --good: #2f8f68 !important;
  --warn: var(--bh-lab-gold) !important;
  --danger: var(--bh-lab-red) !important;
  --radius: var(--bh-lab-radius) !important;
  --radius-sm: 6px !important;

  min-height: 100vh !important;
  margin: 0 !important;
  background: var(--bh-lab-paper) !important;
  background-image: none !important;
  color: var(--bh-lab-ink) !important;
  color-scheme: light !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) *,
body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) *::before,
body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) *::after {
  box-sizing: border-box;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(h1, h2, h3, h4, h5, h6, p, label, small, strong, span, div, button, select, input, textarea, summary, pre, code) {
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(h1, h2, h3, h4, h5, h6) {
  color: var(--bh-lab-ink) !important;
  line-height: 1.15 !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(p, small) {
  color: var(--bh-lab-muted) !important;
  line-height: 1.45 !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(button, input, select, textarea) {
  max-width: 100% !important;
  font: inherit !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(
  button,
  .nav-btn,
  .settings-btn,
  .utility-btn,
  .transport-btn,
  .mini-settings-btn,
  .instrument-strip-btn,
  .dim-btn,
  .modal-tab-button
) {
  min-height: 34px !important;
  border: 1px solid var(--bh-lab-line) !important;
  border-radius: var(--bh-lab-radius) !important;
  background: var(--bh-lab-panel) !important;
  background-image: none !important;
  color: var(--bh-lab-ink) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font-weight: 750 !important;
  line-height: 1.1 !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
  transform: none !important;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease !important;
  white-space: normal !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(
  button:hover,
  .nav-btn:hover,
  .settings-btn:hover,
  .utility-btn:hover,
  .transport-btn:hover,
  .mini-settings-btn:hover,
  .instrument-strip-btn:hover,
  .dim-btn:hover,
  .modal-tab-button:hover
) {
  border-color: rgba(31, 118, 111, 0.45) !important;
  background: var(--bh-lab-green-soft) !important;
  color: var(--bh-lab-ink) !important;
  transform: none !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(button:disabled, button[disabled]) {
  cursor: not-allowed !important;
  opacity: 0.52 !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(
  button.active,
  button.is-active,
  button[aria-pressed="true"],
  .nav-btn.active,
  .settings-btn.active,
  .utility-btn.active,
  .mini-settings-btn.is-active,
  .instrument-strip-btn.is-active,
  .transport-btn-primary,
  .dim-btn.active,
  .modal-tab-button.is-active
) {
  border-color: var(--bh-lab-teal) !important;
  background: var(--bh-lab-teal) !important;
  background-image: none !important;
  color: #ffffff !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(#btn-stop, .danger, button[data-action="delete"], button[data-action="remove"]) {
  border-color: rgba(159, 61, 61, 0.45) !important;
  color: var(--bh-lab-red) !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(#btn-stop:hover, .danger:hover, button[data-action="delete"]:hover, button[data-action="remove"]:hover) {
  background: var(--bh-lab-red-soft) !important;
  color: var(--bh-lab-red) !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(#btn-metronome-start, #metronome-start-stop, .metronome-btn) {
  border-color: rgba(178, 131, 46, 0.5) !important;
  color: #73531a !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(#btn-metronome-start:hover, #metronome-start-stop:hover, .metronome-btn:hover) {
  background: var(--bh-lab-gold-soft) !important;
  color: #73531a !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(#btn-metronome-start[aria-pressed="true"], #metronome-start-stop.active, .metronome-btn.active) {
  border-color: var(--bh-lab-gold) !important;
  background: var(--bh-lab-gold) !important;
  color: #ffffff !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(
  select,
  textarea,
  input[type="text"],
  input[type="number"],
  input[type="search"],
  input[type="email"],
  input[type="url"]
) {
  min-height: 34px !important;
  border: 1px solid var(--bh-lab-line) !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: var(--bh-lab-ink) !important;
  box-shadow: none !important;
  line-height: 1.2 !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(select option, select optgroup) {
  background: #ffffff !important;
  color: var(--bh-lab-ink) !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(input[type="range"]) {
  accent-color: var(--bh-lab-teal) !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--bh-lab-teal) !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible) {
  outline: 2px solid rgba(31, 118, 111, 0.4) !important;
  outline-offset: 2px !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(pre, code) {
  color: var(--bh-lab-ink) !important;
  white-space: pre-wrap !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(.status, #status, .audio-status, .info, .diagnostics-summary, .diagnostics-log) {
  color: var(--bh-lab-muted) !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(
  .desktop-nav-bar,
  .left-settings-panel,
  .right-settings-panel,
  .center-content,
  .app-left,
  .app-right,
  .horizontal-fretboard-section,
  .horizontal-fretboard-container,
  .transport,
  .panel,
  .panel-header-tool,
  .modifier-panel,
  .module-option,
  .ingredient-section,
  .context-card > div,
  .meta-card,
  .diagnostics-panel,
  .notation-frame,
  .guitar-tab-frame,
  .instrument-strip,
  .fretboard-shell,
  .piano-frame,
  .visualization,
  .whole-tone-group,
  .source-chords,
  .derived-chords,
  .chord-display,
  .chord-type,
  .chord-type-section,
  .chord-item,
  .derived-chord,
  .chord-result,
  .source-chord,
  .method-section,
  .chord-recipe,
  #instrument-selector-footer
) {
  border: 1px solid var(--bh-lab-line) !important;
  border-radius: var(--bh-lab-radius) !important;
  background: var(--bh-lab-panel) !important;
  background-image: none !important;
  color: var(--bh-lab-ink) !important;
  box-shadow: 0 1px 0 rgba(31, 36, 40, 0.04) !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(
  .settings-block,
  .settings-section,
  .setting-group,
  .field-grid,
  .transport-row,
  .transport-controls,
  .transport-actions,
  .transport-buttons,
  .nav-controls,
  .nav-utils,
  .notation-view-switch,
  .master-toggle-list,
  .generation-bias-toggles
) {
  min-width: 0 !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(.settings-block, .settings-section) {
  border-color: var(--bh-lab-line) !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(.settings-block h2, .settings-section h3, .meta-label, .context-label, .transport-label, .micro-label) {
  color: var(--bh-lab-teal) !important;
  font-size: 0.76rem !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(.bh-tool-shell) {
  border-bottom-color: var(--bh-lab-line) !important;
  background: rgba(251, 250, 246, 0.97) !important;
  color: var(--bh-lab-ink) !important;
  box-shadow: 0 8px 22px rgba(31, 36, 40, 0.07) !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(.bh-tool-brand-mark) {
  background: var(--bh-lab-ink) !important;
  color: #ffffff !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(.bh-tool-current, .bh-tool-nav a:hover, .bh-tool-nav a:focus-visible) {
  color: var(--bh-lab-teal) !important;
}

body:is(
  .bh-tool-barry-universe,
  .bh-tool-scales-of-chords,
  .bh-tool-soc-practice-tool,
  .bh-tool-barry-line-creator,
  .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
) :where(.bh-tool-nav a) {
  border-radius: var(--bh-lab-radius) !important;
}

/* Scales of Chords */

body.bh-tool-scales-of-chords.desktop-layout {
  height: auto !important;
  min-height: 100vh !important;
  overflow: auto !important;
}

body.bh-tool-scales-of-chords .desktop-app-container {
  height: auto !important;
  min-height: calc(100svh - var(--bh-lab-shell-h)) !important;
  overflow: visible !important;
  background: var(--bh-lab-paper) !important;
  background-image: none !important;
}

body.bh-tool-scales-of-chords .desktop-nav-bar {
  gap: 12px !important;
  padding: 10px 16px !important;
  flex-wrap: wrap !important;
  box-shadow: none !important;
}

body.bh-tool-scales-of-chords .nav-brand {
  min-width: 0 !important;
}

body.bh-tool-scales-of-chords .nav-brand h1 {
  margin: 0 !important;
  font-size: 1.18rem !important;
  font-weight: 850 !important;
  overflow-wrap: anywhere !important;
}

body.bh-tool-scales-of-chords .nav-controls,
body.bh-tool-scales-of-chords .nav-utils {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body.bh-tool-scales-of-chords .nav-btn {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

body.bh-tool-scales-of-chords .utility-btn {
  padding: 8px 11px !important;
}

body.bh-tool-scales-of-chords .desktop-main-layout {
  grid-template-columns: minmax(220px, 280px) minmax(360px, 1fr) minmax(220px, 280px) !important;
  align-items: start !important;
  gap: 12px !important;
  padding: 12px !important;
  overflow: visible !important;
  background: var(--bh-lab-paper) !important;
}

body.bh-tool-scales-of-chords .left-settings-panel,
body.bh-tool-scales-of-chords .right-settings-panel {
  max-height: none !important;
  overflow: visible !important;
  padding: 14px !important;
  scrollbar-color: rgba(31, 118, 111, 0.45) rgba(31, 36, 40, 0.06) !important;
}

body.bh-tool-scales-of-chords .settings-section {
  margin: 0 0 16px !important;
  padding: 0 0 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bh-lab-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.bh-tool-scales-of-chords .settings-section h3 {
  margin: 0 0 10px !important;
  padding: 0 0 6px !important;
  border-bottom: 1px solid var(--bh-lab-line) !important;
}

body.bh-tool-scales-of-chords .setting-group {
  margin-bottom: 10px !important;
}

body.bh-tool-scales-of-chords .setting-group label {
  color: var(--bh-lab-ink) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

body.bh-tool-scales-of-chords .setting-group small {
  color: var(--bh-lab-muted) !important;
}

body.bh-tool-scales-of-chords .center-content {
  min-width: 0 !important;
  overflow: hidden !important;
}

body.bh-tool-scales-of-chords #chart-wrapper,
body.bh-tool-scales-of-chords #scale-chart,
body.bh-tool-scales-of-chords .horizontal-fretboard-container,
body.bh-tool-scales-of-chords .piano-container {
  min-width: 0 !important;
}

body.bh-tool-scales-of-chords #note-names-container,
body.bh-tool-scales-of-chords #interval-names-container {
  color: var(--bh-lab-muted) !important;
}

body.bh-tool-scales-of-chords .note-item {
  border-color: var(--bh-lab-line) !important;
  background: #ffffff !important;
  color: var(--bh-lab-ink) !important;
}

body.bh-tool-scales-of-chords .note-item.root {
  border-color: var(--bh-lab-teal) !important;
  background: var(--bh-lab-teal) !important;
  color: #ffffff !important;
}

/* SOC Practice Tool */

body.bh-tool-soc-practice-tool {
  --right-w: 520px !important;
}

body.bh-tool-soc-practice-tool .app-shell {
  height: calc(100vh - var(--bh-lab-shell-h)) !important;
  grid-template-columns: minmax(360px, 1fr) minmax(420px, var(--right-w)) !important;
  background: var(--bh-lab-paper) !important;
}

body.bh-tool-soc-practice-tool.view-horizontal .app-shell {
  grid-template-columns: minmax(320px, 1fr) !important;
}

body.bh-tool-soc-practice-tool .app-left,
body.bh-tool-soc-practice-tool .app-right {
  height: 100% !important;
}

body.bh-tool-soc-practice-tool .app-left {
  border-width: 0 1px 0 0 !important;
  border-radius: 0 !important;
}

body.bh-tool-soc-practice-tool .app-left-top {
  padding: 16px !important;
  border-bottom: 1px solid var(--bh-lab-line) !important;
  background: var(--bh-lab-panel) !important;
}

body.bh-tool-soc-practice-tool .app-header h1 {
  margin: 0 !important;
  font-size: 1.16rem !important;
  font-weight: 850 !important;
}

body.bh-tool-soc-practice-tool .app-header p {
  margin-top: 5px !important;
  font-size: 0.84rem !important;
}

body.bh-tool-soc-practice-tool .transport {
  margin-top: 12px !important;
  padding: 10px !important;
}

body.bh-tool-soc-practice-tool .transport-row,
body.bh-tool-soc-practice-tool .transport-buttons {
  flex-wrap: wrap !important;
}

body.bh-tool-soc-practice-tool .transport-readouts {
  min-width: 120px !important;
  max-width: 100% !important;
}

body.bh-tool-soc-practice-tool .status {
  max-width: 100% !important;
  white-space: normal !important;
}

body.bh-tool-soc-practice-tool .settings-scroll {
  padding: 12px 16px 22px !important;
  scrollbar-color: rgba(31, 118, 111, 0.45) rgba(31, 36, 40, 0.06) !important;
}

body.bh-tool-soc-practice-tool .settings-block {
  padding: 13px 0 15px !important;
  border-bottom: 1px solid var(--bh-lab-line) !important;
}

body.bh-tool-soc-practice-tool .field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.bh-tool-soc-practice-tool label {
  color: var(--bh-lab-ink) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
}

body.bh-tool-soc-practice-tool .info,
body.bh-tool-soc-practice-tool .audio-status {
  padding: 10px !important;
  background: var(--bh-lab-panel-soft) !important;
}

body.bh-tool-soc-practice-tool .app-right {
  border-width: 0 0 0 1px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

body.bh-tool-soc-practice-tool .instrument-frame {
  height: 100% !important;
  justify-content: center !important;
  padding: 16px !important;
  background: var(--bh-lab-panel-soft) !important;
  background-image: none !important;
}

body.bh-tool-soc-practice-tool .fretboard-area {
  max-width: min(100%, calc(var(--right-w) - 28px)) !important;
  min-width: 0 !important;
}

body.bh-tool-soc-practice-tool .chord-display-box,
body.bh-tool-soc-practice-tool .chord-display-box:has(.chord-borrowed-display:not(:empty)) {
  max-width: 100% !important;
  margin: 0 auto 8px !important;
  padding: 8px 12px !important;
  background: var(--bh-lab-panel) !important;
  border: 1px solid var(--bh-lab-line) !important;
  border-radius: var(--bh-lab-radius) !important;
}

body.bh-tool-soc-practice-tool .chord-name-display {
  max-width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--bh-lab-ink) !important;
  font-size: 1.28rem !important;
  overflow-wrap: anywhere !important;
}

body.bh-tool-soc-practice-tool .chord-borrowed-display {
  color: var(--bh-lab-muted) !important;
}

/* Barry Line Creator */

body.bh-tool-barry-line-creator {
  overflow-x: hidden !important;
}

body.bh-tool-barry-line-creator .page-shell {
  width: min(1440px, calc(100% - 24px)) !important;
  padding-bottom: 36px !important;
}

body.bh-tool-barry-line-creator .transport-bar {
  top: var(--bh-lab-shell-h) !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--bh-lab-line) !important;
  border-top: 0 !important;
  border-radius: 0 0 var(--bh-lab-radius) var(--bh-lab-radius) !important;
  background: rgba(251, 250, 246, 0.98) !important;
  background-image: none !important;
  box-shadow: 0 8px 18px rgba(31, 36, 40, 0.06) !important;
}

body.bh-tool-barry-line-creator .transport-title {
  min-width: 0 !important;
  color: var(--bh-lab-teal) !important;
  font-size: 1rem !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

body.bh-tool-barry-line-creator .transport-controls,
body.bh-tool-barry-line-creator .transport-actions {
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body.bh-tool-barry-line-creator .transport-field {
  min-width: 0 !important;
}

body.bh-tool-barry-line-creator .transport-field select,
body.bh-tool-barry-line-creator .transport-field input[type="number"] {
  min-width: 72px !important;
}

body.bh-tool-barry-line-creator .transport-btn {
  padding: 8px 12px !important;
}

body.bh-tool-barry-line-creator .layout {
  gap: 12px !important;
  margin-top: 12px !important;
}

body.bh-tool-barry-line-creator .panel {
  box-shadow: none !important;
}

body.bh-tool-barry-line-creator .controls-panel,
body.bh-tool-barry-line-creator .output-panel {
  padding: 14px !important;
}

body.bh-tool-barry-line-creator .panel-header-tool,
body.bh-tool-barry-line-creator .modifier-panel,
body.bh-tool-barry-line-creator .ingredient-section,
body.bh-tool-barry-line-creator .module-option,
body.bh-tool-barry-line-creator .context-card > div,
body.bh-tool-barry-line-creator .meta-card,
body.bh-tool-barry-line-creator .diagnostics-panel,
body.bh-tool-barry-line-creator .instrument-strip,
body.bh-tool-barry-line-creator .notation-frame,
body.bh-tool-barry-line-creator .guitar-tab-frame,
body.bh-tool-barry-line-creator .piano-frame,
body.bh-tool-barry-line-creator .fretboard-shell {
  box-shadow: none !important;
}

body.bh-tool-barry-line-creator .modifier-panel::before {
  background: var(--bh-lab-teal) !important;
}

body.bh-tool-barry-line-creator .context-card {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
}

body.bh-tool-barry-line-creator .context-card strong {
  color: var(--bh-lab-ink) !important;
  font-family: inherit !important;
  overflow-wrap: anywhere !important;
}

body.bh-tool-barry-line-creator .notation-sticky-shell {
  top: calc(var(--bh-lab-shell-h) + 12px) !important;
  background: var(--bh-lab-panel) !important;
}

body.bh-tool-barry-line-creator .notation-view-switch {
  gap: 7px !important;
}

body.bh-tool-barry-line-creator .notation-toolbar-select {
  flex-wrap: wrap !important;
  min-width: 0 !important;
  color: var(--bh-lab-teal) !important;
}

body.bh-tool-barry-line-creator .notation-toolbar-select select {
  min-width: min(220px, 100%) !important;
}

body.bh-tool-barry-line-creator .screen-area,
body.bh-tool-barry-line-creator .output-main-column {
  min-width: 0 !important;
}

body.bh-tool-barry-line-creator .guitar-tab-pre {
  overflow-wrap: anywhere !important;
}

body.bh-tool-barry-line-creator .master-toggle-buckets,
body.bh-tool-barry-line-creator .master-toggle-list,
body.bh-tool-barry-line-creator .generation-bias-toggles {
  flex-wrap: wrap !important;
}

body.bh-tool-barry-line-creator .compact-toggle,
body.bh-tool-barry-line-creator .master-toggle-item {
  border-color: var(--bh-lab-line) !important;
  border-radius: 6px !important;
  background: var(--bh-lab-panel-soft) !important;
  color: var(--bh-lab-ink) !important;
}

/* Barry Universe */

body.bh-tool-barry-universe {
  overflow-x: hidden !important;
}

body.bh-tool-barry-universe #app {
  min-height: calc(100vh - var(--bh-lab-shell-h)) !important;
  background: var(--bh-lab-paper) !important;
}

body.bh-tool-barry-universe #app > header {
  width: min(1180px, calc(100% - 24px)) !important;
  margin: 18px auto 0 !important;
  padding: 18px !important;
  border: 1px solid var(--bh-lab-line) !important;
  border-radius: var(--bh-lab-radius) !important;
  background: var(--bh-lab-panel) !important;
  color: var(--bh-lab-ink) !important;
  text-align: left !important;
  box-shadow: none !important;
}

body.bh-tool-barry-universe #app > header h1 {
  margin: 0 0 6px !important;
  background: none !important;
  color: var(--bh-lab-ink) !important;
  font-size: 2rem !important;
  font-weight: 900 !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}

body.bh-tool-barry-universe #app > header p {
  max-width: 860px !important;
  margin: 0 0 14px !important;
  font-size: 0.95rem !important;
}

body.bh-tool-barry-universe #navigation {
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body.bh-tool-barry-universe .enharmonic-toggle {
  flex-wrap: wrap !important;
  margin-left: 0 !important;
}

body.bh-tool-barry-universe .toggle-label {
  color: var(--bh-lab-muted) !important;
}

body.bh-tool-barry-universe .toggle-track {
  border-color: var(--bh-lab-line) !important;
  border-radius: var(--bh-lab-radius) !important;
  background: var(--bh-lab-panel-soft) !important;
}

body.bh-tool-barry-universe .toggle-thumb {
  border-radius: 6px !important;
  background: var(--bh-lab-teal) !important;
  box-shadow: none !important;
}

body.bh-tool-barry-universe main {
  width: min(1180px, calc(100% - 24px)) !important;
  margin: 0 auto !important;
  padding: 14px 0 96px !important;
  overflow: visible !important;
}

body.bh-tool-barry-universe .view-header {
  max-width: 860px !important;
  margin-bottom: 18px !important;
  padding: 0 !important;
  text-align: left !important;
}

body.bh-tool-barry-universe .view-header h2 {
  margin: 0 0 6px !important;
  color: var(--bh-lab-teal) !important;
  font-size: 1.45rem !important;
}

body.bh-tool-barry-universe .view-header p {
  margin: 0 !important;
  font-size: 0.98rem !important;
}

body.bh-tool-barry-universe .visualization {
  min-height: 320px !important;
  padding: 16px !important;
}

body.bh-tool-barry-universe .whole-tone-group,
body.bh-tool-barry-universe .source-chords,
body.bh-tool-barry-universe .derived-chords,
body.bh-tool-barry-universe .chord-type,
body.bh-tool-barry-universe .chord-display,
body.bh-tool-barry-universe .source-chord,
body.bh-tool-barry-universe .method-section,
body.bh-tool-barry-universe .chord-item,
body.bh-tool-barry-universe .derived-chord,
body.bh-tool-barry-universe .chord-result,
body.bh-tool-barry-universe .chord-type-section {
  padding: 14px !important;
}

body.bh-tool-barry-universe .whole-tone-group h3,
body.bh-tool-barry-universe .source-chords h3,
body.bh-tool-barry-universe .derived-chords h3,
body.bh-tool-barry-universe .chord-type h4,
body.bh-tool-barry-universe .chord-item h5,
body.bh-tool-barry-universe .derived-chord h5,
body.bh-tool-barry-universe .chord-result-header h4 {
  color: var(--bh-lab-teal) !important;
}

body.bh-tool-barry-universe .diminished-selector,
body.bh-tool-barry-universe .chord-circle,
body.bh-tool-barry-universe .chord-notes,
body.bh-tool-barry-universe .chord-notes-mini,
body.bh-tool-barry-universe .chord-grid,
body.bh-tool-barry-universe .chord-results-grid {
  gap: 8px !important;
}

body.bh-tool-barry-universe .note-element,
body.bh-tool-barry-universe .chord-note,
body.bh-tool-barry-universe .note-pill,
body.bh-tool-barry-universe .note-mini {
  border-color: rgba(31, 36, 40, 0.18) !important;
  box-shadow: 0 1px 2px rgba(31, 36, 40, 0.12) !important;
}

body.bh-tool-barry-universe #instrument-selector-footer {
  position: static !important;
  width: min(1180px, calc(100% - 24px)) !important;
  margin: 24px auto 18px !important;
  padding: 10px 12px !important;
}

body.bh-tool-barry-universe .instrument-selector-container {
  max-width: 100% !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

body.bh-tool-barry-universe .instrument-selector-container label {
  color: var(--bh-lab-ink) !important;
}

body.bh-tool-barry-universe #instrument-selector {
  min-width: min(260px, 100%) !important;
}

body.bh-tool-barry-universe .notification {
  top: calc(var(--bh-lab-shell-h) + 14px) !important;
  right: 16px !important;
  z-index: 2147482990 !important;
  max-width: min(320px, calc(100vw - 32px)) !important;
  border: 1px solid var(--bh-lab-teal) !important;
  border-radius: var(--bh-lab-radius) !important;
  background: var(--bh-lab-panel) !important;
  color: var(--bh-lab-ink) !important;
  box-shadow: var(--bh-lab-shadow) !important;
}

/* Fretboard Framework landing */

body.bh-tool-fretboard-framework main,
body.bh-tool-livefrets-v2 main {
  width: min(980px, calc(100% - 24px)) !important;
  margin: 28px auto !important;
}

body.bh-tool-fretboard-framework .panel,
body.bh-tool-livefrets-v2 .panel {
  padding: 22px !important;
}

body.bh-tool-fretboard-framework a.card,
body.bh-tool-livefrets-v2 a.card {
  border-color: var(--bh-lab-line) !important;
  border-radius: var(--bh-lab-radius) !important;
  background: var(--bh-lab-panel-soft) !important;
}

body.bh-tool-fretboard-framework a.card strong,
body.bh-tool-livefrets-v2 a.card strong {
  color: var(--bh-lab-teal) !important;
}

/* LiveFrets */

body.bh-tool-livefrets-v2 {
  min-width: 0 !important;
  overflow-x: hidden !important;
  text-align: left !important;
}

body.bh-tool-livefrets-v2 > h1 {
  width: min(1440px, calc(100% - 24px)) !important;
  margin: 24px auto 18px !important;
  font-size: clamp(1.8rem, 2.6vw, 2.7rem) !important;
}

body.bh-tool-livefrets-v2 .main-container {
  display: grid !important;
  grid-template-columns: minmax(320px, 1fr) 185px 300px !important;
  align-items: start !important;
  gap: 16px !important;
  width: min(1440px, calc(100% - 24px)) !important;
  min-width: 0 !important;
  margin: 0 auto 32px !important;
  padding: 0 !important;
  justify-content: stretch !important;
}

body.bh-tool-livefrets-v2 #captured-chords-container,
body.bh-tool-livefrets-v2 .right-column,
body.bh-tool-livefrets-v2 .settings-panel {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.bh-tool-livefrets-v2 #captured-chords-container {
  width: 100% !important;
  order: 1 !important;
}

body.bh-tool-livefrets-v2 .right-column {
  position: sticky !important;
  top: calc(var(--bh-lab-shell-h) + 84px) !important;
  right: auto !important;
  width: 165px !important;
  order: 2 !important;
}

body.bh-tool-livefrets-v2 .settings-panel {
  position: sticky !important;
  top: calc(var(--bh-lab-shell-h) + 84px) !important;
  width: 300px !important;
  flex-basis: auto !important;
  order: 3 !important;
  background: var(--bh-lab-panel) !important;
  border-color: var(--bh-lab-line) !important;
  box-shadow: var(--bh-lab-shadow) !important;
}

body.bh-tool-livefrets-v2 .settings-panel-scroll {
  min-height: 0 !important;
  overflow-y: auto !important;
}

body.bh-tool-livefrets-v2 .export-options,
body.bh-tool-livefrets-v2 .captured-chords-actions,
body.bh-tool-livefrets-v2 .mode-toggle-row,
body.bh-tool-livefrets-v2 #capture-controls-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

body.bh-tool-livefrets-v2 .captured-chords-actions button,
body.bh-tool-livefrets-v2 .captured-chords-actions select,
body.bh-tool-livefrets-v2 .captured-chords-actions input {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.bh-tool-livefrets-v2 #score-editor-surface {
  overflow-x: auto !important;
}

@media (max-width: 980px) {
  body.bh-tool-livefrets-v2 .main-container {
    grid-template-columns: minmax(0, 1fr) 185px !important;
  }

  body.bh-tool-livefrets-v2 .settings-panel {
    grid-column: 1 / -1 !important;
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.bh-tool-livefrets-v2 .settings-panel-scroll {
    overflow: visible !important;
  }
}

@media (max-width: 640px) {
  body.bh-tool-livefrets-v2 > h1,
  body.bh-tool-livefrets-v2 .main-container {
    width: calc(100% - 20px) !important;
  }

  body.bh-tool-livefrets-v2 .main-container {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.bh-tool-livefrets-v2 .right-column {
    position: static !important;
    width: 100% !important;
    align-items: center !important;
  }

  body.bh-tool-livefrets-v2 #fretboard-container {
    display: block !important;
    width: 165px !important;
    margin: 0 auto !important;
  }

  body.bh-tool-livefrets-v2 .piano-display {
    position: static !important;
  }

  body.bh-tool-livefrets-v2 .piano-keys,
  body.bh-tool-livefrets-v2 .modal-content {
    max-width: 100% !important;
  }

  body.bh-tool-livefrets-v2 .export-options {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
  }

  body.bh-tool-livefrets-v2 .captured-chords-actions button {
    flex: 1 1 150px !important;
  }
}

/* Shared responsive fixes */

@media (max-width: 1180px) {
  body.bh-tool-scales-of-chords .desktop-main-layout {
    grid-template-columns: minmax(200px, 240px) minmax(320px, 1fr) minmax(200px, 240px) !important;
  }

  body.bh-tool-soc-practice-tool {
    --right-w: 440px !important;
  }
}

@media (max-width: 900px) {
  body.bh-tool-scales-of-chords.desktop-layout {
    height: auto !important;
    overflow: auto !important;
  }

  body.bh-tool-scales-of-chords .desktop-app-container {
    height: auto !important;
    min-height: calc(100vh - var(--bh-lab-shell-h)) !important;
    overflow: visible !important;
  }

  body.bh-tool-scales-of-chords .desktop-main-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    overflow: visible !important;
  }

  body.bh-tool-scales-of-chords .left-settings-panel,
  body.bh-tool-scales-of-chords .right-settings-panel {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.bh-tool-scales-of-chords .center-content {
    min-height: 60vh !important;
  }

  body.bh-tool-soc-practice-tool .field-grid {
    grid-template-columns: 1fr !important;
  }

  body.bh-tool-barry-line-creator .transport-bar {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  body.bh-tool-barry-line-creator .notation-toolbar-select {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 760px) {
  body:is(
    .bh-tool-barry-universe,
    .bh-tool-scales-of-chords,
    .bh-tool-soc-practice-tool,
    .bh-tool-barry-line-creator,
    .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
  ) {
    --bh-lab-shell-h: 132px;
  }

  body.bh-tool-soc-practice-tool .app-shell {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: calc(100vh - var(--bh-lab-shell-h)) !important;
  }

  body.bh-tool-soc-practice-tool .app-left,
  body.bh-tool-soc-practice-tool .app-right {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border-width: 0 0 1px !important;
  }

  body.bh-tool-soc-practice-tool .settings-scroll {
    overflow: visible !important;
  }

  body.bh-tool-soc-practice-tool .instrument-frame {
    min-height: 520px !important;
    overflow-x: auto !important;
  }

  body.bh-tool-barry-universe #app > header,
  body.bh-tool-barry-universe main,
  body.bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2 main,
  body.bh-tool-barry-line-creator .page-shell {
    width: min(1180px, calc(100% - 16px)) !important;
  }

  body.bh-tool-barry-universe #app > header h1 {
    font-size: 1.55rem !important;
  }

  body.bh-tool-barry-universe .visualization {
    min-height: 260px !important;
    padding: 12px !important;
    overflow-x: auto !important;
  }

  body.bh-tool-barry-universe .chord-sources-container,
  body.bh-tool-barry-universe .source-chords,
  body.bh-tool-barry-universe .chord-types-grid,
  body.bh-tool-barry-universe .method-buttons {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  body.bh-tool-barry-universe #instrument-selector-footer {
    width: min(1180px, calc(100% - 16px)) !important;
    margin-bottom: 8px !important;
  }

  body.bh-tool-barry-line-creator .transport-bar {
    top: var(--bh-lab-shell-h) !important;
    position: static !important;
  }

  body.bh-tool-barry-line-creator .controls-panel,
  body.bh-tool-barry-line-creator .output-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
  }

  body.bh-tool-barry-line-creator .layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.bh-tool-barry-line-creator .panel-header-tool,
  body.bh-tool-barry-line-creator .modifier-panel,
  body.bh-tool-barry-line-creator .context-card,
  body.bh-tool-barry-line-creator .diagnostics-panel,
  body.bh-tool-barry-line-creator .export-panel,
  body.bh-tool-barry-line-creator .notation-sticky-shell,
  body.bh-tool-barry-line-creator .output-main-column,
  body.bh-tool-barry-line-creator .screen-area,
  body.bh-tool-barry-line-creator .notation-frame,
  body.bh-tool-barry-line-creator .guitar-tab-frame,
  body.bh-tool-barry-line-creator .instrument-strip,
  body.bh-tool-barry-line-creator .fretboard-shell,
  body.bh-tool-barry-line-creator .piano-frame {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.bh-tool-barry-line-creator .master-toggle-buckets,
  body.bh-tool-barry-line-creator .context-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.bh-tool-barry-line-creator .master-toggle-list,
  body.bh-tool-barry-line-creator .style-pack-toggle-list,
  body.bh-tool-barry-line-creator .generation-bias-toggles {
    display: flex !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }

  body.bh-tool-barry-line-creator .compact-toggle,
  body.bh-tool-barry-line-creator .master-toggle-item {
    flex: 1 1 140px !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.bh-tool-barry-line-creator .diagnostics-log {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  body.bh-tool-barry-line-creator .notation-view-switch,
  body.bh-tool-barry-line-creator .transport-controls,
  body.bh-tool-barry-line-creator .transport-actions {
    width: 100% !important;
  }
}

@media (max-width: 520px) {
  body:is(
    .bh-tool-barry-universe,
    .bh-tool-scales-of-chords,
    .bh-tool-soc-practice-tool,
    .bh-tool-barry-line-creator,
    .bh-tool-fretboard-framework,
  .bh-tool-livefrets-v2
  ) :where(button, .nav-btn, .settings-btn, .utility-btn, .transport-btn, .mini-settings-btn, .instrument-strip-btn) {
    min-height: 36px !important;
    padding-right: 9px !important;
    padding-left: 9px !important;
    font-size: 0.82rem !important;
  }

  body.bh-tool-scales-of-chords .desktop-nav-bar,
  body.bh-tool-scales-of-chords .desktop-main-layout {
    padding-right: 8px !important;
    padding-left: 8px !important;
  }

  body.bh-tool-scales-of-chords .nav-controls,
  body.bh-tool-scales-of-chords .nav-utils {
    width: 100% !important;
  }

  body.bh-tool-scales-of-chords .utility-btn {
    flex: 1 1 140px !important;
  }

  body.bh-tool-barry-line-creator .page-shell {
    width: calc(100% - 12px) !important;
  }
}