/* Jazz Piano Tutor — visual identity, harmonised with the LordAudio site
   (this app becomes part of those pages). Shared language: muted GOLD accent
   (#b8965a), Georgia serif headings, monospace labels, light + dark themes.
   The keyboard "blackboard" stays piano-coloured in both themes. */
:root, [data-theme="dark"] {
  --bg: #0f0f0f;
  --bg-2: #151515;
  --panel: #1a1a1a;
  --felt: #0b0b0b;
  --ink: #ece9e2;
  --ink-mid: #b6b1a6;
  --muted: #8a857a;
  --line: #262626;
  --line-2: #353535;
  --gold: #b8965a;
  --gold-2: #d4b06a;
  --on-gold: #15120a;
  --key-white: #efeadf;
  --key-white-edge: #b7b0a0;
  --key-black: #15151b;
  --kb-label: #d7d0bf;
  --kb-octave: #6f6a5e;
  --play-row: #b8965a;
}
[data-theme="light"] {
  --bg: #ffffff;
  --bg-2: #f8f8f8;
  --panel: #ffffff;
  --felt: #f1f0ea;
  --ink: #111111;
  --ink-mid: #555555;
  --muted: #999999;
  --line: #e8e8e8;
  --line-2: #d0d0d0;
  --gold: #b8965a;
  --gold-2: #9c7f43;
  --on-gold: #ffffff;
  --key-white: #ffffff;
  --key-white-edge: #cbc5b6;
  --key-black: #222630;
  --kb-label: #3a3a3a;
  --kb-octave: #b0aaa0;
  --play-row: #b8965a;
}
:root {
  --radius: 12px;
  --gutter: 24px;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s, color .25s;
}
[data-theme="dark"] body {
  background: radial-gradient(ellipse at 70% -10%, #1c1508 0%, transparent 60%), var(--bg);
}
#app { height: 100%; display: flex; flex-direction: column; max-width: 1480px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---- top bar: brand · chapter select · theme + language ---- */
.topbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 62px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo { color: var(--gold); font-size: 1.05rem; }
.brand-name { font-family: var(--serif); font-weight: 700; font-size: 1.12rem; letter-spacing: .2px; white-space: nowrap; }
nav { display: flex; gap: 8px; align-items: center; }
.lang-btn, .theme-btn, .pill-btn {
  background: transparent; color: var(--muted); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 6px 14px; cursor: pointer; font-weight: 600; font-size: .82rem;
  transition: all .15s; font-family: var(--sans); white-space: nowrap;
}
.theme-btn { padding: 6px 11px; }
.lang-btn:hover, .theme-btn:hover, .pill-btn:hover { color: var(--ink); border-color: var(--gold); }
.lesson-btn {
  display: inline-flex; align-items: center; gap: 9px; margin-left: 6px; max-width: 46vw;
  background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 7px 16px 7px 13px; cursor: pointer; transition: all .14s;
  font-family: var(--sans); font-weight: 700; font-size: .88rem;
}
.lesson-btn:hover { border-color: var(--gold); }
.lesson-btn .lb-icon { color: var(--gold); font-size: .95rem; }
.lesson-btn .lb-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* lesson catalogue (centre, when the menu is open) */
.lesson-list { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 2px; display: flex; flex-direction: column; gap: 20px; }
.ll-group { display: flex; flex-direction: column; gap: 10px; }
.ll-group-h { margin-bottom: 2px; }
.ll-card {
  text-align: left; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 5px; transition: all .14s;
  font-family: var(--sans);
}
.ll-card:hover { border-color: var(--gold); transform: translateY(-1px); }
.ll-card.on { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
.ll-title { font-family: var(--serif); font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.ll-sum { font-size: .82rem; line-height: 1.45; color: var(--muted); }

/* ---- studio: controls (left) · piano board (centre, the hero) · lesson (right) ---- */
.studio { flex: 1 1 auto; display: flex; gap: 22px; min-height: 0; padding: 18px 0; }
.sidebar { flex: 0 0 20%; min-width: 0; display: flex; flex-direction: column; gap: 16px; overflow: auto; }
.board-col { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.lesson-panel { flex: 0 0 20%; min-width: 0; overflow: auto; display: flex; flex-direction: column; }
/* swap control rail (left) and lesson panel (right) — left/right-handed use */
.sidebar { order: 1; } .board-col { order: 2; } .lesson-panel { order: 3; }
.studio.swapped .lesson-panel { order: 1; }
.studio.swapped .sidebar { order: 3; }
.board-host {
  flex: 1 1 auto; min-width: 0; min-height: 0; display: block; overflow: auto;
  background: var(--felt); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; box-shadow: inset 0 2px 26px -14px #000;
}
/* keyboards: fixed proportion relative to width (~30% smaller), top-aligned,
   scroll vertically when many keyboards overflow the board height */
svg.progboard { width: 70%; height: auto; display: block; margin: 0 auto; user-select: none; }

/* ---- controls ---- */
/* lesson explanation panel (right column) */
.lesson-explain { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.lesson-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.badge { font-family: var(--mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-mid); }
.badge-beginner { color: #46b96e; border-color: #46b96e66; }
.badge-intermediate { color: var(--gold); border-color: #b8965a66; }
.badge-advanced { color: #e0514a; border-color: #e0514a66; }
.syllabus-tag { font-family: var(--mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.lesson-h { font-family: var(--serif); font-size: 1.18rem; font-weight: 700; margin: 0 0 8px; color: var(--ink); }
.lesson-explain p { margin: 0 0 8px; font-size: .9rem; line-height: 1.55; color: var(--ink-mid); }
.syllabus-sum { font-style: italic; font-size: .82rem !important; color: var(--muted) !important; border-left: 2px solid var(--line-2); padding-left: 10px; }
.prereqs { font-size: .78rem !important; color: var(--muted) !important; }
.prereqs b { color: var(--ink-mid); }

/* A/B comparison toggle */
.ab-seg { display: flex; gap: 8px; }
.ab-seg button { flex: 1; padding: 10px 12px; text-align: left; font-size: .84rem; }
.ab-seg button b { color: var(--gold); margin-right: 4px; }
.ab-seg button.on b { color: var(--on-gold); }

.param { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.param-row { display: flex; gap: 16px; flex-wrap: wrap; }
.param-grow { flex: 1 1 130px; }
.param-lab { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }

.seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.seg button {
  background: var(--bg-2); color: var(--muted); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 8px 13px; font-weight: 700; cursor: pointer;
  font-family: var(--sans); font-size: .86rem; transition: all .13s; min-width: 38px;
}
.seg button:hover { color: var(--ink); border-color: var(--gold); }
.seg button.on { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.seg-keys button { min-width: 36px; padding: 8px 9px; }

select {
  width: 100%; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 9px 11px; font-weight: 600; font-family: var(--sans); font-size: .88rem;
  cursor: pointer; transition: border-color .14s;
}
select:hover, select:focus { border-color: var(--gold); outline: none; }

/* ghosted controls — a parameter the current lesson fixes (dmv-style) */
.lock-tag { margin-left: 6px; color: var(--gold); font-weight: 700; font-size: .9em; text-transform: none; letter-spacing: 0; }
.seg.locked button, select:disabled { opacity: .42; cursor: not-allowed; }
.seg.locked button.on { opacity: .7; }

.boardhead { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
button.primary {
  background: var(--gold); color: var(--on-gold); border: 0; border-radius: 10px; padding: 12px 18px;
  font-weight: 700; cursor: pointer; font-size: .92rem; letter-spacing: .2px;
  transition: transform .12s, filter .12s;
}
button.primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
button.primary:active { transform: translateY(1px); }

/* ---- legend beneath the board ---- */
.legend { flex: 0 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; gap: 18px; padding: 2px 4px 4px; justify-content: center; }
.lg { font-family: var(--mono); font-size: .72rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.lg::before { content: ""; width: 13px; height: 13px; border-radius: 4px; display: inline-block; flex: 0 0 auto; }
.lg-root::before { background: var(--gold); }
.lg-voicing::before { background: #3f8a93; }
.lg-guide::before { background: transparent; border: 2px solid var(--gold-2); }
.lg-held::before { background: #46b96e; }
.lg-move::before { background: #e0514a; }
.lg-chord::before { background: #3f8a93; }
.lg-tension::before { background: transparent; border: 2px solid var(--gold-2); }
.lg-avoid::before { background: #e0514a; }

.side-foot { font-family: var(--mono); font-size: .66rem; color: var(--muted); margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }

/* ---- board internals (fills come from theme vars so keys recolour per theme) ---- */
.pb-white { fill: var(--key-white); stroke: var(--key-white-edge); stroke-width: .6; }
.pb-black { fill: var(--key-black); stroke: #000; stroke-width: .5; }
.pb-label { fill: var(--kb-label); font-family: var(--serif); font-size: 13px; font-weight: 700; }
.pb-octave { fill: var(--kb-octave); font-family: var(--mono); font-size: 7px; text-anchor: middle; }
.pb-num { fill: #fff; font-family: var(--sans); font-size: 12px; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.pb-playrow { fill: var(--play-row); opacity: 0; transition: opacity .12s; pointer-events: none; }
.pb-playrow[opacity="1"] { opacity: .12; }
/* a click anywhere on a keyboard plays that chord (transparent hit layer on top) */
svg.progboard .pb-white, svg.progboard .pb-black, svg.progboard circle,
svg.progboard line, svg.progboard text { pointer-events: none; }
svg.progboard .pb-scale { pointer-events: none; }
svg.progboard .pb-hit { fill: transparent; pointer-events: all; cursor: pointer; }
svg.progboard .pb-hit:hover { fill: rgba(184, 150, 90, 0.10); }

@media (max-width: 980px) {
  .studio { flex-direction: column; padding: 14px 0; }
  .sidebar, .lesson-panel { flex: 0 0 auto; overflow: visible; }
  .board-host { min-height: 44vh; }
  .lesson-sel { max-width: 60vw; }
}