:root {
  --bg: #f6f6f3;
  --panel: #ffffff;
  --ink: #1f2328;
  --muted: #6b7280;
  --line: #e3e3de;
  --accent: #2563eb;
  --good: #16a34a;
  --warn: #d97706;
  --bad: #dc2626;
  --kb-h: 110px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
/* dvh: the visible height on phones, without the browser's address bar */
body { display: flex; flex-direction: column; height: 100dvh; }
[hidden] { display: none !important; }

button, select, input { font: inherit; }
button {
  border: 1px solid var(--line); background: var(--panel); border-radius: 6px;
  padding: 6px 12px; cursor: pointer;
}
button:hover { border-color: #c7c7c0; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
select, input[type="number"] {
  border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; background: #fff; max-width: 100%;
}

.topbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: 17px; margin: 0; }
.topbar .io { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.topbar .io select { max-width: 180px; }
.io-group { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body:not([data-instrument="guitar"]) .guitar-only { display: none !important; }

.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.segmented button { border: 0; border-radius: 0; padding: 5px 14px; background: var(--panel); }
.segmented button + button { border-left: 1px solid var(--line); }
.segmented button.active { background: var(--ink); color: #fff; }

.pill-button { border-radius: 999px; padding: 3px 12px; font-size: 13px; }
.pill-button.on { background: #dcfce7; border-color: #86efac; color: #166534; }
.level { display: inline-block; width: 60px; height: 8px; border-radius: 4px; background: #e5e7eb; overflow: hidden; vertical-align: middle; }
.level span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #22c55e 70%, #eab308 85%, #ef4444); transition: width 60ms linear; }
.check { display: inline-flex; align-items: center; gap: 5px; }
.pill { border-radius: 999px; padding: 2px 10px; background: #eee; font-size: 12px; }
.pill.ok { background: #dcfce7; color: #166534; }
.pill.warn { background: #fef3c7; color: #92400e; }

.layout { flex: 1; display: flex; min-height: 0; }
.sidebar {
  width: 300px; flex-shrink: 0; overflow-y: auto; padding: 12px 14px 24px;
  background: var(--panel); border-right: 1px solid var(--line);
}
.sidebar h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 20px 0 8px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tabs button { flex: 1 1 auto; padding: 5px 8px; font-size: 13px; }
.tabs button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.desc { color: var(--muted); font-size: 12.5px; margin: 10px 0; }
.muted { color: var(--muted); font-size: 12px; }

.form { display: flex; flex-direction: column; gap: 7px; }
.field { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.field > span:first-child { color: #374151; white-space: nowrap; }
.field select { width: 165px; }
.field.check, .field-checkbox { justify-content: flex-start; gap: 6px; }
.bpm { display: flex; gap: 6px; align-items: center; }
.bpm input[type="range"] { width: 90px; }
.bpm input[type="number"] { width: 60px; }
#staves { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }

.file-drop {
  display: block; border: 2px dashed var(--line); border-radius: 8px; padding: 16px; text-align: center; cursor: pointer;
}
.file-drop.over { border-color: var(--accent); background: #eff6ff; }
.file-drop input { display: none; }

.history { padding-left: 18px; margin: 0; font-size: 12px; color: #374151; }
.history li { margin-bottom: 4px; }
.history .acc { font-weight: 600; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.transport {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 16px; border-bottom: 1px solid var(--line); background: #fbfbf9;
}
.status { color: var(--muted); margin-left: 8px; }
.stats { margin-left: auto; font-variant-numeric: tabular-nums; }
.score-only { display: inline-flex; gap: 8px; }
body[data-kind="panel"] .score-only { display: none; }
.toast {
  background: var(--ink); color: #fff; border-radius: 999px; padding: 2px 12px; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.stats b.good { color: var(--good); } .stats b.bad { color: var(--bad); } .stats b.warn { color: var(--warn); }

.score-wrap { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; background: #fff; }
.panel-wrap { flex: 1; overflow-y: auto; overflow-x: hidden; background: #fff; padding: 16px 20px 32px; }
#score { min-height: 100%; padding: 8px 0; }

.result {
  position: sticky; bottom: 16px; margin: 0 auto 16px; width: fit-content;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 18px 24px; min-width: 300px; z-index: 10;
}
.result h3 { margin: 0 0 10px; }
.result table { border-collapse: collapse; width: 100%; }
.result td { padding: 3px 0; }
.result td:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.result .buttons { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; }

.keyboard { height: var(--kb-h); flex-shrink: 0; background: #2b2b2b; padding: 6px 8px 8px; }
.keyboard.fretboard-footer { height: auto; min-height: var(--kb-h); }

#controller-section { margin-top: 20px; }
#controller-section summary {
  font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); cursor: pointer; font-weight: 600;
}
.controller-list { display: flex; flex-direction: column; gap: 4px; }
.controller-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px; align-items: center; font-size: 12.5px; }
.controller-row .binding { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.controller-row button { padding: 2px 8px; font-size: 12px; }
.controller-row button.learning { background: var(--warn); border-color: var(--warn); color: #fff; }
.piano { position: relative; height: 100%; user-select: none; touch-action: none; }
.key { position: absolute; top: 0; border-radius: 0 0 3px 3px; cursor: pointer; }
.key.white { height: 100%; background: #fafafa; border: 1px solid #999; z-index: 1; }
.key.black { height: 62%; background: #1a1a1a; z-index: 2; border: 1px solid #000; }
.key span { position: absolute; bottom: 3px; width: 100%; text-align: center; font-size: 9px; color: #888; }
.key.hint.white { background: #bfdbfe; } .key.hint.black { background: #3b6fd4; }
.key.pressed.white { background: #93c5fd; } .key.pressed.black { background: #2563eb; }
.key.wrong.white, .key.wrong.black { background: var(--bad); }

/* ------------------------------------------------------------ compact layout (phones, small windows)
   Keep this query in sync with COMPACT_QUERY in js/main.js. The sidebar becomes a drawer opened with the
   menu button, the inputs and settings fold away behind the gear button, and the piano scrolls sideways. */
.compact-only, .drawer-head, .drawer-backdrop { display: none; }
@media (max-width: 800px), (max-height: 560px) {
  .topbar { gap: 8px; padding: 6px 10px; }
  .topbar h1 { display: none; }
  .compact-only { display: inline-flex; align-items: center; gap: 6px; }
  .menu-button { max-width: 48vw; min-width: 0; }
  .menu-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #btn-io { margin-left: auto; font-size: 17px; padding: 3px 10px; }
  #btn-io[aria-expanded="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
  .topbar .io { display: none; width: 100%; margin-left: 0; gap: 8px 12px; padding: 2px 0 4px; }
  body.io-open .topbar .io { display: flex; }

  .sidebar {
    position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: min(340px, 88vw);
    padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-102%); transition: transform .2s ease, visibility .2s; visibility: hidden;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .18);
  }
  body.menu-open .sidebar { transform: none; visibility: visible; }
  body.menu-open .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, .35); }
  .drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .drawer-head b { font-size: 15px; }
  .drawer-head button { padding: 2px 10px; }

  .transport { padding: 6px 10px; gap: 6px; }
  .status { margin-left: 0; }
  .panel-wrap { padding: 12px 12px 24px; }
  /* Panels without a status message: no empty transport strip. */
  body[data-kind="panel"] .transport:has(.status:empty):has(.toast[hidden]):has(.stats:empty) { display: none; }

  /* Piano: keys at a tappable width; swipe sideways to reach other octaves. */
  .keyboard:has(> .piano) { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .piano { min-width: calc(52 * 24px); touch-action: pan-x; }
}
/* Phones held sideways: little height, so a shorter keyboard / fretboard leaves room for the score. */
@media (max-height: 560px) {
  :root { --kb-h: 84px; }
  body .keyboard:has(> .gfb), body .keyboard.guitar { --kb-h: 104px; }
  .result, .tr-summary { padding: 12px 18px; bottom: 8px; }
}
/* Touch screens: slightly larger controls. */
@media (pointer: coarse) {
  button, select, input[type="number"] { min-height: 34px; }
  .pill-button, .controller-row button { min-height: 30px; }
  input[type="checkbox"] { width: 18px; height: 18px; }
}

/* Installable app: update banner */
.update-bar {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 50; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100vw - 32px); padding: 8px 10px 8px 16px; border-radius: 10px;
  background: var(--ink); color: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.update-bar button:not(.primary) { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4); }