: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;
}

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%; }
/* Side panel: chord name and Chord Library side by side, all other tools in a wide panel below. */
body[data-tool="chords"] .side-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 290px));
  grid-template-areas: "info library" "controls controls";
  align-items: stretch;
  flex: 0 1 594px;
  min-width: 0;
}
body[data-tool="chords"] .side-panel > .header-info { grid-area: info; max-width: none; margin-top: 8px; }
body[data-tool="chords"] .side-panel > .library-box { grid-area: library; margin: 0; padding: 4px 10px 10px; }
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="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: invert(1); }
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" "library" "controls";
    width: min(100%, 360px);
    flex-basis: auto;
  }
  body[data-tool="chords"] .side-panel > .header-info { margin-top: 0; }
  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)); }
}