:root {
  color-scheme: light;
  --bg: #e6e6e6;
  --panel: #eee;
  --panel-2: #ddd;
  --panel-strong: #fff;
  --text: #171717;
  --ink: #171717;
  --muted: #444;
  --line: #777;
  --accent: #222;
  --accent-strong: #222;
  --violet: #444;
  --shadow: 2px 2px 0 #555;
}

body {
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 12px;
  display: block;
  overflow: visible;
  color: var(--text);
  background: var(--bg);
  font-family: Arial, Helvetica, sans-serif;
}

@font-face {
  font-family: "Bravura";
  src: url("../fonts/Bravura.woff2") format("woff2");
  font-display: block;
}
body[data-tool="chords"] .notation-clef { font-family: "Bravura"; font-size: 48px; fill: #171717; }
button, input, select { font-family: Arial, Helvetica, sans-serif; }
[hidden] { display: none !important; }
button, .btn, .button, .selection-play-button {
  border: 1px solid #333;
  border-radius: 3px;
  color: #171717;
  background: #eee;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #999;
}
button:hover, .btn:hover, .button:hover { background: #fff; }
button:disabled { opacity: 0.5; }
input, select, .field select {
  border: 1px solid #777;
  border-radius: 2px;
  color: #171717;
  background: #fff;
}
input[type="range"] { accent-color: #333; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #333; outline-offset: 2px; }
.panel, .info-panel, .controls-panel {
  border: 1px solid #777;
  border-radius: 0;
  background: #eee;
  box-shadow: 2px 2px 0 #888;
  backdrop-filter: none;
}

body[data-tool="chords"] .app { max-width: 1200px; padding: 4px; }
body[data-tool="chords"] .workspace { justify-content: center; gap: 36px; }
body[data-tool="chords"] .side-panel { margin-left: 0; }
body[data-tool="chords"] .header-info h1 { min-height: 3.375rem; }
body[data-tool="chords"] .subtle { min-height: 2.75rem; }
body[data-tool="chords"] .board-shell {
  flex: 0 1 auto;
  width: max-content;
  max-width: calc(100% - 326px);
  padding: 6px 4px 12px;
}
body[data-tool="chords"] .board-shell.non-guitar { flex: 0 1 760px; width: auto; }
body[data-tool="chords"] .pitch-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-tool="chords"] .pitch-group { min-width: 0; }
body[data-tool="chords"] .pitch-group label { display: grid; gap: 6px; font-size: 13px; }
body[data-tool="chords"] .pitch-group select { width: 100%; min-width: 0; padding: 6px; }
body[data-tool="chords"] .workspace:has(.board-shell:not(.non-guitar)) { flex-wrap: wrap; }
body[data-tool="chords"] .board-shell:not(.non-guitar) { flex-shrink: 0; max-width: 100%; }
/* Keep chord naming, immediate actions and the library together above practice controls. */
body[data-tool="chords"] .side-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "info actions library" "practice practice practice" "controls controls controls";
  align-items: stretch;
  flex: 0 1 594px;
  min-width: 0;
}
body[data-tool="chords"] .side-panel > .header-info { grid-area: info; min-width: 0; max-width: none; text-align: left; }
body[data-tool="chords"] .header-info h1, body[data-tool="chords"] .header-info .subtle { min-height: 0; }
body[data-tool="chords"] .header-info .alts { align-items: flex-start; justify-content: flex-start; }
body[data-tool="chords"] .header-info .alts select { min-width: 0; width: 100%; max-width: 100%; }
body[data-tool="chords"] .side-panel > .chord-actions { grid-area: actions; min-width: 0; }
body[data-tool="chords"] .chord-actions .clear-row { justify-content: flex-start; margin: 10px 0 0; }
body[data-tool="chords"] .chord-actions .clear-row:first-child { margin-top: 0; }
body[data-tool="chords"] .chord-actions .inversion-controls { display: flex; width: 100%; }
body[data-tool="chords"] .chord-actions .toggle-btn { min-width: 0; }
body[data-tool="chords"] .chord-actions .chord-action-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
body[data-tool="chords"] .chord-action-buttons .btn { width: 100%; height: 100%; padding: 6px 4px; }
body[data-tool="chords"] .side-panel > .library-box { margin: 0; padding: 4px 10px 10px; }
body[data-tool="chords"] .side-panel > #libraryBox { grid-area: library; }
body[data-tool="chords"] .side-panel > #chordPractice { grid-area: practice; width: calc((100% - 10px) / 2); }
body[data-tool="chords"] .side-panel > .controls-panel {
  grid-area: controls;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px 18px;
  align-items: center;
}
body[data-tool="chords"] .controls-panel > * { grid-column: span 3; margin: 0; min-width: 0; }
body[data-tool="chords"] .controls-panel > .field { grid-column: span 2; }
body[data-tool="chords"] .controls-panel > .field select { width: 100%; min-width: 0; }
body[data-tool="chords"] .controls-panel > #actionRow { grid-column: 1 / -1; justify-content: center; flex-wrap: wrap; }
body[data-tool="chords"] .controls-panel > .clear-row { margin: 0; justify-content: flex-start; }
body[data-tool="chords"] .controls-panel > .small-note { grid-column: 1 / -1; width: auto; text-align: left; max-width: none; }
body[data-tool="chords"] .controls-panel > #midiControls { grid-column: 1 / -1; }
body[data-tool="chords"] #midiControls .clear-row { justify-content: flex-start; margin: 0 0 10px; }
body[data-tool="chords"] #midiControls .small-note { width: auto; text-align: left; }
body[data-tool="chords"] #midiStatus { margin: 8px 0; font-size: 0.85rem; }
body[data-tool="chords"] #midiStatus:empty { display: none; }
body[data-tool="chords"] .app.piano-mode .workspace { flex-direction: column; gap: 0; align-items: stretch; }
body[data-tool="chords"] .app.piano-mode .board-shell { flex: none; width: 100%; max-width: 100%; padding-bottom: 0; }
body[data-tool="chords"] .app.piano-mode .piano-view { width: 100%; max-width: none; padding-bottom: 0; }
body[data-tool="chords"] .app.piano-mode .chord-name-field { width: 100%; margin-left: 0; }
body[data-tool="chords"] .app.piano-mode .side-panel { flex: none; width: 100%; }
body[data-tool="chords"] .app.piano-mode .side-panel {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas: "info info actions actions library library" "practice practice practice utility utility utility";
}
body[data-tool="chords"] .app.piano-mode .side-panel > #chordPractice { width: auto; }
body[data-tool="chords"] #pianoUtilityControls[hidden] { display: none; }
body[data-tool="chords"] #pianoUtilityControls { grid-area: utility; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
body[data-tool="chords"] #pianoUtilityControls > fieldset { margin: 0; padding: 4px 10px 10px; min-width: 0; }
body[data-tool="chords"] #pianoUtilityControls > #midiControls { flex: 1; }
body[data-tool="chords"] #pianoUtilityControls #viewControls .library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-tool="chords"] #pianoUtilityControls #viewControls .field { min-width: 0; margin: 0; }
body[data-tool="chords"] .app.piano-mode .side-panel > .controls-panel { display: none; }
body[data-tool="chords"] .app.piano-mode .side-panel > .header-info { display: flex; flex-direction: column; height: 100%; }
body[data-tool="chords"] .app.piano-mode .header-info h1 { font-size: 1.6rem; margin-top: 10px; }
body[data-tool="chords"] .app.piano-mode .header-info .subtle { margin: 24px 0 12px; }
body[data-tool="chords"] .app.piano-mode .header-info .alts { margin-top: auto; padding-top: 12px; margin-bottom: 24px; }
body[data-tool="chords"] .app:is(.guitar-mode, .notation-mode) .side-panel > .header-info { display: flex; flex-direction: column; justify-content: space-between; height: 100%; gap: 12px; }
body[data-tool="chords"] .app:is(.guitar-mode, .notation-mode) .info-panel { min-height: 220px; }
body[data-tool="chords"] .app:is(.guitar-mode, .notation-mode) .header-info .subtle { margin: 8px 0; }
body[data-tool="chords"] .app:is(.guitar-mode, .notation-mode) .selected-notes-label,
body[data-tool="chords"] .app:is(.guitar-mode, .notation-mode) .selected-notes-values { display: block; }
body[data-tool="chords"] .app:is(.guitar-mode, .notation-mode) .selected-notes-values { margin-top: 4px; }
body[data-tool="chords"] .app:is(.guitar-mode, .notation-mode) .header-info .alts { margin: 0 0 6px; }
body[data-tool="chords"] .app.guitar-mode .chord-actions { display: flex; flex-direction: column; justify-content: space-evenly; height: 100%; gap: 14px; }
body[data-tool="chords"] .app.guitar-mode .chord-actions .clear-row { margin: 0; }
body[data-tool="chords"] .app.guitar-mode .inversion-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body[data-tool="chords"] .app.guitar-mode #inversionCaption { grid-column: 1 / -1; }
body[data-tool="chords"] .app.guitar-mode .chord-actions .chord-action-buttons { grid-template-columns: minmax(0, 1fr); gap: 8px; }
body[data-tool="chords"] .app.guitar-mode .chord-actions .btn { min-height: 34px; padding: 7px 10px; }
body[data-tool="chords"] #libraryInfo:not(.library-error) { display: none; }
body[data-tool="chords"] .cd-hover-help {
  position: fixed; z-index: 10000; box-sizing: border-box;
  width: max-content; max-width: min(340px, calc(100vw - 16px));
  padding: 10px 12px; border: 1px solid #777; border-radius: 4px;
  background: #fffde8; color: #222; box-shadow: 2px 3px 8px #0003;
  font: 13px/1.5 Arial, Helvetica, sans-serif; pointer-events: none;
}
body[data-tool="chords"] .cd-hover-help[hidden] { display: none; }
body[data-tool="chords"] #pianoSoundControls { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 12px 24px; padding: 8px 0 0; }
body[data-tool="chords"] #pianoSoundControls[hidden] { display: none; }
body[data-tool="chords"] #pianoSoundControls #volumeRow { flex: 0 1 180px; margin: 0; }
body[data-tool="chords"] #practicePositionControl { flex: 1 1 360px; min-width: 0; }
body[data-tool="chords"] #practicePositionControl .field { width: 100%; }
body[data-tool="chords"] #practicePositionControl .field > span { white-space: nowrap; font: 600 14px/1.45 Arial, Helvetica, sans-serif; }
body[data-tool="chords"] #practicePositionControl .field,
body[data-tool="chords"] #pianoSoundControls .volume-wrap { margin: 0; gap: 4px; }
body[data-tool="chords"] #pianoSoundControls input[type="range"] { height: 24px; margin-block: 0; }
body[data-tool="chords"] #practicePositionControl .field > span,
body[data-tool="chords"] #pianoSoundControls .volume-label { line-height: 24px; }
body[data-tool="chords"] #practicePosition { width: 100%; margin-inline: 0; }
body[data-tool="chords"] #pianoSoundControls .sound-source-control { flex: 0 1 240px; }
body[data-tool="chords"] .app.piano-mode .info-panel { min-height: 220px; }
body[data-tool="chords"] .app.piano-mode .chord-actions { display: flex; flex-direction: column; height: 100%; justify-content: space-evenly; gap: 12px; }
body[data-tool="chords"] .app.piano-mode .chord-actions .clear-row { margin: 0; }
body[data-tool="chords"] .app.piano-mode .inversion-controls { display: grid; grid-template-columns: minmax(0, max-content) 1fr auto auto 1fr; gap: 0; align-items: center; }
body[data-tool="chords"] .app.piano-mode #prevInversionBtn { grid-column: 3; }
body[data-tool="chords"] .app.piano-mode #nextInversionBtn { grid-column: 4; margin-left: 8px; }
body[data-tool="chords"] .app.piano-mode #pianoChordExports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
body[data-tool="chords"] .app.piano-mode #pianoChordExports .btn { padding: 6px 4px; }
body[data-tool="chords"] #chordPractice .clear-row { align-items: center; }
body[data-tool="chords"] #chordPractice .practice-repeat { margin: 0; }
body[data-tool="chords"] .app.piano-mode #chordPractice { display: flex; flex-direction: column; gap: 10px; }
body[data-tool="chords"] #chordPractice .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body[data-tool="chords"] #chordPractice .library-grid select,
body[data-tool="chords"] #chordPractice .library-grid input { box-sizing: border-box; width: 100%; min-width: 0; height: 34px; padding: 5px 8px; font: inherit; }
body[data-tool="chords"] .app.piano-mode #chordPractice .practice-transport { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-tool="chords"] .app.piano-mode #chordPractice .practice-feel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-tool="chords"] #chordPractice .practice-feel .field { min-width: 0; margin: 0; }
body[data-tool="chords"] #chordPractice .practice-feel input { width: 100%; margin-inline: 0; }
body[data-tool="chords"] .app.piano-mode #chordPractice .practice-repeat { margin-top: auto; }
body[data-tool="chords"] .app.piano-mode #chordPractice .clear-row .btn { padding: 6px 4px; }
body[data-tool="chords"] #practiceStatus:empty { display: none; }
body[data-tool="chords"] #interactionHelp:empty { display: none; }
body[data-tool="chords"] .controls-panel > .clear-row[hidden] { display: none; }
body[data-tool="chords"] .app.piano-mode.score-editing .workspace { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
body[data-tool="chords"] .app.piano-mode.score-editing .board-shell { order: 0; flex: none; max-width: 100%; align-self: center; }
body[data-tool="chords"] .app.piano-mode.score-editing .side-panel { order: 2; width: 100%; flex: none; }
body[data-tool="chords"] .app.score-editing .score-editor-mount { order: 1; margin: 0; padding: 12px; border: 1px solid #777; background: #eee; }
body[data-tool="chords"] #inlineScoreEditor { display: flex; flex-direction: column; }
body[data-tool="chords"] #mainName[draggable], body[data-tool="chords"] #chordNameField[draggable],
body[data-tool="chords"] #bigChordName[draggable] { cursor: grab; }
body[data-tool="chords"] #controllerPiano h2 { font-size: 16px; margin: 16px 0 8px; text-align: left; }
body[data-tool="chords"] #controllerChordName { margin-left: 12px; }
body[data-tool="chords"] #controllerKeyboard { pointer-events: none; }
body[data-tool="chords"] #controllerKeyboard .key-dot { background: #2e7d32; }
body[data-tool="chords"] .controls-panel > #viewControls { grid-column: 1 / -1; width: calc(50% + 8px); max-width: 100%; margin: 0; min-width: 0; }
body[data-tool="chords"] .controls-panel > #viewControls[hidden] { display: none; }
body[data-tool="chords"] .app.guitar-mode.score-editing .side-panel { grid-template-areas: "info actions library" "score score score" "practice practice practice" "controls controls controls" "midi midi midi"; }
body[data-tool="chords"] .app.piano-mode.score-editing .side-panel { grid-template-areas: "info info actions actions library library" "score score score score score score" "practice practice practice utility utility utility"; }
body[data-tool="chords"] .side-panel > #scoreEditorMount { grid-area: score; width: 100%; max-width: 100%; min-width: 0; padding: 4px 10px 10px; box-sizing: border-box; }
body[data-tool="chords"] .app:is(.guitar-mode, .notation-mode) #inlineScoreEditor .nc-score-paper { min-width: 0; padding: 8px; }
body[data-tool="chords"] .app:is(.guitar-mode, .notation-mode) #inlineScoreEditor .nc-score-system { min-width: 500px; }
body[data-tool="chords"] .app:is(.guitar-mode, .notation-mode) #inlineScoreEditor .nc-score-controls > * { min-width: 0; max-width: 100%; }
@media (min-width: 701px) and (max-width: 900px) {
  body[data-tool="chords"] .controls-panel > #viewControls { width: calc(50% + 5px); }
}
body[data-tool="chords"] #viewControls .clear-row { justify-content: flex-start; margin: 10px 0 0; }
body[data-tool="chords"] #chordPractice .small-note { width: auto; max-width: none; text-align: left; }
body[data-tool="chords"] #chordPractice .clear-row { justify-content: flex-start; margin: 0; }
body[data-tool="chords"] #practiceStatus { margin: 8px 0; }
body[data-tool="chords"] .side-panel { font: 14px/1.45 Arial, Helvetica, sans-serif; }
body[data-tool="chords"] .side-panel :is(.field, label, button, input, select, .subtle, .small-note, .library-info,
  .volume-label, .size-label, .fret-scroll-label, .practice-repeat, #inversionCaption, #practiceStatus, #midiStatus) {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.45;
}
body[data-tool="chords"] .side-panel legend { font: 700 14px/1.45 Arial, Helvetica, sans-serif; }
body[data-tool="chords"] .app:is(.guitar-mode, .notation-mode) .side-panel,
body[data-tool="chords"] .app:is(.guitar-mode, .notation-mode).score-editing .side-panel {
  grid-template-areas: "info actions library" "score score score" "practice practice practice" "controls controls controls" "midi midi midi";
}
body[data-tool="chords"] .app:is(.guitar-mode, .notation-mode) .side-panel > #midiControls { grid-area: midi; margin: 0; }
body[data-tool="chords"] .app:is(.guitar-mode, .notation-mode) .controls-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
body[data-tool="chords"] .app:is(.guitar-mode, .notation-mode) .controls-panel > #viewControls {
  grid-column: 1; width: 100%;
}
body[data-tool="chords"] #guitarUtilityControls {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 8px;
}
body[data-tool="chords"] #guitarUtilityControls > :is(.sound-source-control, #volumeRow, #sizeSliderRow) { grid-column: 1 / -1; }
body[data-tool="chords"] #guitarUtilityControls > .clear-row { margin: 0; min-width: 0; }
body[data-tool="chords"] #guitarUtilityControls :is(button, select, .volume-wrap, .size-slider-wrap, input[type="range"]) { width: 100%; min-width: 0; }
body[data-tool="chords"] #guitarUtilityControls .sound-source-control { margin: 0; max-width: 100%; }
body[data-tool="chords"] .app:is(.guitar-mode, .notation-mode) .controls-panel > #interactionHelp { grid-column: 1 / -1; }
body[data-tool="chords"] .app.notation-mode .chord-actions { display: flex; flex-direction: column; justify-content: space-evenly; gap: 10px; }
body[data-tool="chords"] .app.notation-mode .header-info h1 { margin-top: 10px; }
body[data-tool="chords"] .app.notation-mode .header-info .alts { margin-bottom: 16px; }
body[data-tool="chords"] .app.notation-mode .inversion-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body[data-tool="chords"] .app.notation-mode .chord-action-buttons { grid-template-columns: minmax(0, 1fr); }
body[data-tool="chords"] .app.notation-mode .chord-actions .btn { min-height: 34px; width: 100%; }
body[data-tool="chords"] .app.notation-mode #libraryBox .library-grid { grid-template-columns: minmax(0, 1fr); }
body[data-tool="chords"] .app.notation-mode #libraryBox .field { grid-column: 1; }
body[data-tool="chords"] .app.notation-mode .notation-view { max-width: 380px; margin-inline: auto; }
body[data-tool="chords"] .app.notation-mode .staff-frame,
body[data-tool="chords"] .app.notation-mode .staff-frame svg { min-height: 0; }
@media (min-width: 701px) {
  body[data-tool="chords"] .app.notation-mode { max-width: none; }
  body[data-tool="chords"] .app.notation-mode .workspace { flex-wrap: wrap; justify-content: flex-start; gap: 24px; }
  body[data-tool="chords"] .app.notation-mode .board-shell.non-guitar { flex: 0 0 380px; max-width: 100%; }
  body[data-tool="chords"] .app.notation-mode .side-panel { flex: 1 1 360px; }
  body[data-tool="chords"] .app.guitar-mode:has(.board-shell.vertical) {
    max-width: none;
    margin-left: max(0px, calc((100% - 1200px) / 2));
    margin-right: 0;
  }
  body[data-tool="chords"] .app.guitar-mode .workspace:has(> .board-shell.vertical) {
    --board-width: calc((var(--string-count) - 1) * var(--string-width) + var(--fret-label-width) + var(--track-gap) + 20px * var(--view-scale) + 8px);
    --board-left-space: max(0px, calc((min(100%, 1192px) - var(--board-width) - 36px - 594px) / 2));
  }
  /* Retain the centred group's original grid position; give its unused right space to the tools. */
  body[data-tool="chords"] .app.guitar-mode .workspace > .board-shell.vertical { margin-left: var(--board-left-space); }
  body[data-tool="chords"] .app.guitar-mode .workspace:has(> .board-shell.vertical) > .side-panel { flex-grow: 1; }
}
@media (max-width: 700px) {
  body[data-tool="chords"] .app:is(.guitar-mode, .notation-mode) .side-panel,
  body[data-tool="chords"] .app:is(.guitar-mode, .notation-mode).score-editing .side-panel {
    grid-template-areas: "info" "actions" "library" "score" "practice" "controls" "midi";
  }
  body[data-tool="chords"] .app:is(.guitar-mode, .notation-mode) .controls-panel { grid-template-columns: minmax(0, 1fr); }
  body[data-tool="chords"] #guitarUtilityControls { grid-column: 1; }
  body[data-tool="chords"] .app.piano-mode .side-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "info" "actions" "library" "practice" "utility";
  }
  body[data-tool="chords"] .side-panel > #chordPractice,
  body[data-tool="chords"] .controls-panel > #viewControls { width: 100%; }
}
body[data-tool="chords"] #pianoKeyboard .practice-sounding .key-dot { background: #236ca5; box-shadow: 0 0 0 3px #aacfe9; }

body[data-tool="songbook"] .app-shell { align-items: start; }
body[data-tool="songbook"] .score-panel,
body[data-tool="songbook"] .toolbar { overflow: visible; }
body[data-tool="songbook"] .toolbar { align-self: start; }
body[data-tool="songbook"] .toolbar-grid { min-width: 0; }
body[data-tool="songbook"] .toolbar-grid label { min-width: 0; }
body[data-tool="songbook"] .toolbar-grid input,
body[data-tool="songbook"] .toolbar-grid select { min-width: 0; width: 100%; }
body[data-tool="songbook"] .toolbar-legend { margin-top: 12px; }
body[data-tool="songbook"] .system {
  border: 1px solid #999;
  border-radius: 0;
  background: #fff;
}
body[data-tool="songbook"] .score-header { border-color: #999; }
body[data-tool="songbook"] .section-cell,
body[data-tool="songbook"] .analysis-key,
body[data-tool="songbook"] .analysis-roman,
body[data-tool="songbook"] .staff-hit,
body[data-tool="songbook"] .meter-mark { color: #171717; }
body[data-tool="songbook"] .staff-line,
body[data-tool="songbook"] .barline,
body[data-tool="songbook"] .repeat-mark .line { border-color: #333; }
body[data-tool="songbook"] .repeat-mark .dot { background: #222; }
body[data-tool="songbook"] .staff-hit svg { filter: none; }
body[data-tool="songbook"] .score-ending { position: absolute; top: 78px; left: 2px; right: 2px; height: 15px; border-top: 1px solid #222; border-left: 1px solid #222; padding-left: 4px; font: 12px Arial, sans-serif; }
body[data-tool="songbook"] button.secondary,
body[data-tool="songbook"] .volume-control,
body[data-tool="songbook"] .bpm-control,
body[data-tool="songbook"] .measure-edit-trigger { color: #171717; border: 1px solid #777; background: #eee; }
body[data-tool="songbook"] .bpm-control input { color: #171717; background: #fff; }
body[data-tool="songbook"] .editor,
body[data-tool="songbook"] .chord-builder,
body[data-tool="songbook"] .style-popup { background: #ddd; border: 1px solid #222; border-radius: 0; color: #171717; }
body[data-tool="songbook"] .chord-option,
body[data-tool="songbook"] .chord-builder-select,
body[data-tool="songbook"] .chord-builder-chord { color: #171717; background: #fff; }
body[data-tool="songbook"] .chord-builder-row { color: #171717; }
body[data-tool="songbook"] .chord-builder-close { color: #171717; background: #eee; border-color: #777; }
body[data-tool="songbook"] .chord-option.active,
body[data-tool="songbook"] .style-option.active,
body[data-tool="songbook"] button.analysis-button.active { color: #fff; background: #333; }
body[data-tool="songbook"] .style-option { color: #171717; background: #eee; }
body[data-tool="songbook"] .insert-chord-hint { color: #333; }
body[data-tool="songbook"] .playhead { background: #222; box-shadow: none; }

body[data-tool="scales"] .app-shell { width: min(1180px, 100%); padding: 4px 0; }
body[data-tool="scales"] .hero { gap: 16px; margin-bottom: 12px; }
body[data-tool="scales"] .panel { padding: 16px; margin-top: 12px; }
body[data-tool="scales"] .section-heading { gap: 12px; margin-bottom: 12px; }
body[data-tool="scales"] h2 { font-size: 18px; }
body[data-tool="scales"] .eyebrow { letter-spacing: 0; color: #444; }
body[data-tool="scales"] .selection-readout { background: #eee; border-radius: 3px; }
body[data-tool="scales"] .note-toggle { min-height: 54px; background: #fff; color: #171717; border: 1px solid #777; border-radius: 3px; box-shadow: inset -1px -1px #aaa; }
body[data-tool="scales"] .note-toggle[aria-pressed="true"],
body[data-tool="scales"] .result-item[aria-selected="true"] { color: #fff; background: #333; box-shadow: none; border-color: #222; }
body[data-tool="scales"] .result-output { max-height: none; overflow: visible; border-radius: 0; }
body[data-tool="scales"] .result-item { color: #171717; background: #f3f3f3; border: 1px solid #aaa; border-radius: 2px; }
body[data-tool="scales"] .result-item:hover { background: #ddd; }
body[data-tool="scales"] .result-item[aria-selected="true"]:hover { background: #333; }
body[data-tool="scales"] .empty-state { padding: 20px; border-color: #999; border-radius: 0; }
body[data-tool="scales"] .empty-icon { color: #333; background: #ddd; }

@media (max-width: 700px) {
  body { padding: 8px; }
  body[data-tool="chords"] .board-shell { max-width: 100%; width: 100%; }
  body[data-tool="chords"] .board-shell.non-guitar { flex-basis: auto; }
  body[data-tool="chords"] .side-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "info" "actions" "library" "practice" "controls";
    width: min(100%, 360px);
    flex-basis: auto;
  }
  body[data-tool="chords"] .side-panel > .header-info { margin-top: 0; }
  body[data-tool="chords"] .app.piano-mode .side-panel { grid-template-columns: minmax(0, 1fr); }
  body[data-tool="chords"] .app.piano-mode.score-editing .side-panel { grid-template-areas: "info" "actions" "library" "score" "practice" "utility"; }
  body[data-tool="chords"] .app.guitar-mode.score-editing .side-panel { grid-template-areas: "info" "actions" "library" "score" "practice" "controls" "midi"; }
  body[data-tool="chords"] .side-panel > .controls-panel { grid-template-columns: minmax(0, 1fr); }
  body[data-tool="chords"] .controls-panel > *, body[data-tool="chords"] .controls-panel > .field { grid-column: 1 / -1; }
  body[data-tool="chords"] .controls-panel > .clear-row { justify-content: center; }
  body[data-tool="chords"] .pitch-picker { grid-template-columns: 1fr; }
  body[data-tool="songbook"] .app-shell { grid-template-columns: 1fr; }
  body[data-tool="songbook"] .score-panel,
  body[data-tool="songbook"] .toolbar { grid-column: 1; grid-row: auto; }
  body[data-tool="songbook"] .toolbar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

body[data-tool="chords"] .notation-accidental { font-family: "Bravura"; font-size: 48px; fill: #171717; }

/* Live MIDI controller input is not supported on iPad. */
html.nc-ipad #midiControls {
  display: none !important;
}

/* Name view: a large draggable chord name, with the score spanning the full app width. */
body[data-tool="chords"] .app.name-mode .workspace { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
body[data-tool="chords"] .app.name-mode .board-shell.non-guitar { display: none; }
body[data-tool="chords"] .app.name-mode .side-panel { flex: none; width: 100%; }
body[data-tool="chords"] .app.name-mode .side-panel > #scoreEditorMount { padding: 4px 0 10px; }
body[data-tool="chords"] .name-view { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 170px; text-align: center; }
body[data-tool="chords"] .name-view[hidden] { display: none; }
body[data-tool="chords"] .big-chord-name { display: inline-block; max-width: 100%; margin: 0; padding: 6px 28px; overflow-wrap: anywhere; border-radius: 10px;
  font: 700 clamp(48px, 9vw, 104px)/1.1 Arial, Helvetica, sans-serif; color: #10291c; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body[data-tool="chords"] .big-chord-name:hover { background: #e2eee7; }
body[data-tool="chords"] .big-chord-name.placeholder { font: italic 24px Georgia, serif; color: #555; cursor: default; }
body[data-tool="chords"] .name-view .view-caption { margin: 6px 0 0; font: 16px Arial, Helvetica, sans-serif; }

/* Name view frame: compact Selected notes, inversion and Chord Library boxes with the big name on their right. */
body[data-tool="chords"] .app.notation-mode.name-mode .side-panel,
body[data-tool="chords"] .app.notation-mode.name-mode.score-editing .side-panel {
  grid-template-columns: repeat(3, minmax(150px, 200px)) minmax(0, 1fr);
  grid-template-areas: "info actions library name" "score score score score" "practice practice practice practice"
    "controls controls controls controls" "midi midi midi midi";
  align-items: stretch;
}
body[data-tool="chords"] .app.name-mode .side-panel > .name-view { grid-area: name; min-height: 0; min-width: 0; padding: 4px 8px;
  border: 1px solid #999; border-radius: 6px; background: #f7f7f7; box-sizing: border-box; margin-top: 8px; }
body[data-tool="chords"] .app.name-mode .big-chord-name { font-size: clamp(40px, 6vw, 92px); padding: 4px 18px; }
body[data-tool="chords"] .app.name-mode .side-panel > .library-box.info-panel { padding: 2px 8px 8px; }
body[data-tool="chords"] .app.name-mode .side-panel :is(.field, label, button, select, .subtle, .library-info) { font-size: 12px; line-height: 1.3; }
body[data-tool="chords"] .app.name-mode .side-panel > .info-panel legend { font-size: 12px; }
body[data-tool="chords"] .app.name-mode .header-info h1 { margin: 2px 0 4px; font-size: 18px; line-height: 1.2; }
body[data-tool="chords"] .app.name-mode .header-info .subtle { margin: 0; }
body[data-tool="chords"] .app.name-mode .header-info .alts { margin: 4px 0 0; }
body[data-tool="chords"] .app.name-mode .header-info .alts :is(label, p) { margin: 0; }
body[data-tool="chords"] .app.name-mode .header-info .alts select { height: 24px; padding: 0 4px; }
body[data-tool="chords"] .app.name-mode .chord-actions { justify-content: flex-start; gap: 5px; }
body[data-tool="chords"] .app.name-mode .inversion-controls { gap: 5px; }
body[data-tool="chords"] .app.name-mode .chord-actions .clear-row { margin: 0; }
body[data-tool="chords"] .app.name-mode .chord-action-buttons { gap: 5px; }
body[data-tool="chords"] .app.name-mode .chord-actions .btn { min-height: 26px; height: auto; padding: 2px 6px; }
body[data-tool="chords"] .app.name-mode #libraryBox .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 6px; }
body[data-tool="chords"] .app.name-mode #libraryBox .field { grid-column: auto; margin: 0; gap: 1px; }
body[data-tool="chords"] .app.name-mode #libraryBox .library-chord { grid-column: auto; }
body[data-tool="chords"] .app.name-mode #libraryBox .field:last-child { grid-column: 1 / -1; }
body[data-tool="chords"] .app.name-mode #libraryBox select { height: 24px; min-height: 0; padding: 0 4px; }
body[data-tool="chords"] .app.name-mode #libraryBox .library-info:empty { display: none; }
@media (max-width: 700px) {
  body[data-tool="chords"] .app.notation-mode.name-mode .side-panel,
  body[data-tool="chords"] .app.notation-mode.name-mode.score-editing .side-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "name name" "info actions" "library library" "score score" "practice practice" "controls controls" "midi midi";
  }
}