/* Melo — Learn player. Expressive Pop (tokens from /engine/melo.css).
   Responsive & composed: Mac (keyboard = hero, vertically centered), iPad (fits to width),
   iPhone (focused range, touch-size keys). Feedback is its OWN block; the primary action lives in
   a bottom action bar — never crammed inside the feedback strip. No-overlay model unchanged. */
* { box-sizing: border-box; }
html { background: var(--cream); }
/* sticky-footer column: header → content → footer. Content grows so the footer sits cleanly at the
   bottom with no empty gap, and the home reflows as a normal scrolling document. */
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-ui); min-height: 100vh; display: flex; flex-direction: column; }
.learn-root { width: 100%; max-width: 1100px; margin: 0 auto; padding: 18px 24px 28px; flex: 1 0 auto; }
#learn-foot { flex: none; width: 100%; }
#learn-foot[hidden] { display: none; }
.learn-loading { text-align: center; color: var(--muted); padding: 80px 0; font-weight: 600; }

.screen { animation: rise .3s var(--spring); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--eyebrow); font-weight: 700; }

/* text-led screens: a calm centered column (not the wide hero the lesson player uses) */
.home, .unit-intro, .result { max-width: 660px; margin: 0 auto; }

/* ---------- HOME ---------- */
.home { padding-top: 14px; }
.home-title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(32px, 6vw, 44px); line-height: 1.04; margin: 8px 0 6px; }
.home-sub { font-size: 17px; color: var(--sub); margin: 0 0 24px; max-width: 32em; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow); margin-bottom: 18px; }
.place-card { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; cursor: pointer; border-bottom-width: 4px; transition: transform .08s var(--spring); }
.place-card:active { transform: translateY(2px); }
.place-ic { font-size: 28px; width: 56px; height: 56px; display: grid; place-items: center; background: var(--orange-bg); border-radius: 16px; flex: none; }
.card-title { font-weight: 800; font-size: 19px; }
.card-sub { color: var(--muted); font-size: 14px; margin-top: 2px; }
.card-go { margin-left: auto; font-size: 26px; color: var(--orange); font-weight: 800; }

/* ---------- unit accordion + progression gating ---------- */
.unit-card { padding: 0; overflow: hidden; }                 /* header/body own their padding */
.unit-card.current { border-color: var(--orange-l); box-shadow: 0 0 0 2px var(--orange-l), var(--shadow); }
.unit-card.done .uh-title { color: var(--sub); }
.unit-card.locked { opacity: .68; }
.uhead { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: none; border: none; padding: 20px 22px; cursor: pointer; font-family: var(--font-ui); }
.unit-card.locked .uhead { cursor: default; }
.uh-left { flex: 1; min-width: 0; }
.uh-kick { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--orange); font-weight: 700; }
.unit-card.locked .uh-kick { color: var(--muted); }
.uh-title { font-family: var(--font-serif); font-weight: 700; font-size: 22px; line-height: 1.14; margin-top: 2px; }
.uh-chev { color: var(--muted); font-size: 13px; flex: none; width: 14px; text-align: center; }
.chip { flex: none; font-family: var(--font-mono); font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: var(--r-pill); white-space: nowrap; }
.chip.done { background: var(--green-bg); color: var(--green-d); }
.chip.prog { background: var(--surface-2); color: var(--sub); border: 1px solid var(--line); }
.chip.locked { background: #efe9df; color: var(--muted); }
.lock-why { padding: 0 22px 18px; margin-top: -4px; color: var(--muted); font-size: 13px; font-weight: 600; }
.ubody { padding: 4px 22px 22px; animation: rise .22s var(--spring); }
.shake { animation: shakeh .42s; }
@keyframes shakeh { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-7px);} 40%{transform:translateX(6px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(3px);} }

.unit-promise { color: var(--muted); font-size: 14px; font-style: italic; margin: 0 0 16px; }
.path { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.lrow { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; cursor: pointer; transition: transform .08s var(--spring), border-color .1s; }
.lrow:hover { border-color: var(--orange-l); }
.lrow:active { transform: translateY(2px); }
.lnum { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 2px solid var(--line-2); display: grid; place-items: center; font-weight: 800; color: var(--sub); flex: none; }
.lrow.done .lnum { background: var(--green); border-color: var(--green-d); color: #fff; }
.lrow.boss { background: linear-gradient(180deg, #fff, var(--orange-bg)); border-color: var(--orange-l); }
.lrow.boss .lnum { background: var(--orange); border-color: var(--orange-d); color: #fff; }
.lmid { min-width: 0; flex: 1; }
.lt { font-weight: 800; font-size: 16px; }
.lg { color: var(--muted); font-size: 13px; }
.lgo { margin-left: auto; font-weight: 800; color: var(--orange); font-size: 14px; flex: none; }
/* lesson states within the open unit */
.lrow.active { border-color: var(--orange-l); }
.lrow.active .lnum { border-color: var(--orange); color: var(--orange); }
.lrow.locked { opacity: .55; cursor: default; }
.lrow.locked:hover { border-color: var(--line); }
.lrow.locked .lnum { background: #efe9df; border-color: var(--line); color: var(--muted); font-size: 14px; }
/* completed lesson → circular replay glyph (not the word "Replay") */
.replay-ic { margin-left: auto; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line-2); background: #fff; color: var(--orange); font-size: 19px; line-height: 1; display: grid; place-items: center; transition: transform .08s var(--spring), border-color .1s; }
.lrow.done:hover .replay-ic { border-color: var(--orange); transform: rotate(-40deg); }

/* ---------- intro / result (centered) ---------- */
.unit-intro, .result { text-align: center; padding-top: 6vh; }
.intro-h, .result-h { font-family: var(--font-serif); font-weight: 700; font-size: clamp(28px, 5vw, 36px); line-height: 1.08; margin: 8px 0 12px; }
.intro-promise { font-size: 21px; color: var(--ink); max-width: 26em; margin: 0 auto 18px; }
.intro-goal { background: var(--orange-bg); border: 1px solid var(--orange-l); border-radius: 16px; padding: 14px 18px; max-width: 32em; margin: 0 auto 14px; font-size: 15px; }
.intro-tone { color: var(--muted); font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; margin-bottom: 28px; }
.result-ic { font-size: 58px; margin-bottom: 4px; }
.result-sub { font-size: 17px; color: var(--sub); max-width: 28em; margin: 0 auto 14px; }
.result.bossdone .result-h { color: var(--orange); }
/* lesson-complete: vertically centered, tight group, buttons grouped close */
.result { display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(100vh - 150px); padding-top: 0; }
.result .result-h { margin: 6px 0 10px; }
.result-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  width: 100%; max-width: 340px; margin-top: 6px; }
.result-actions .btn { margin: 0; width: 100%; }

/* ================= LESSON PLAYER (composed, keyboard = hero) ================= */
.screen.play { display: flex; flex-direction: column; min-height: calc(100vh - 120px); }
.ptop { display: flex; align-items: center; gap: 14px; padding-top: 2px; }
.x { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line-2); background: #fff; color: var(--sub); font-size: 15px; cursor: pointer; flex: none; }
.pbar { flex: 1; height: 9px; background: #fff; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.pbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--orange-soft), var(--orange)); border-radius: 999px; transition: width .3s var(--spring); }
/* the body fills the gap above the action bar and vertically centers the step → no sea of cream */
.play-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 18px 0; }
.play-body > .eyebrow { text-align: center; }
.stage { width: 100%; }
.step-title, .step-prompt { font-family: var(--font-serif); font-weight: 700; line-height: 1.12; text-align: center; max-width: 18em; margin: 0 auto; }
.step-title { font-size: clamp(24px, 3.6vw, 30px); margin-bottom: 6px; }
.step-prompt { font-size: clamp(23px, 3.4vw, 29px); margin-bottom: 4px; }
.step-say { font-size: 17px; color: var(--sub); text-align: center; max-width: 34em; margin: 0 auto 6px; }
.hint-tip { text-align: center; color: var(--muted); font-size: 13px; margin-top: 12px; }
.kb-actions { display: flex; justify-content: center; margin-top: 16px; }

/* ---------- keyboard (mirrors design/melo-teach-keyboard.html; size = CSS vars) ---------- */
.kb-wrap {
  /* --kw fluidly fits the width (capped per breakpoint) so keys never shrink below a touch size
     and never overflow → no horizontal scroll. --nw (white-key count) is set by JS per keyboard. */
  --maxkw: 62px; --gutter: 120px;
  --kw: min(var(--maxkw), calc((100vw - var(--gutter)) / var(--nw, 15)));
  --bw: calc(var(--kw) * 0.62);
  --kh: calc(var(--kw) * 3.3);
  --bh: calc(var(--kh) * 0.62);
  width: 100%; overflow: visible; padding: 34px 0 6px; margin-top: 6px;
}
.kb { position: relative; margin: 0 auto; width: calc(var(--kw) * var(--nw, 15)); height: var(--kh); filter: drop-shadow(0 8px 16px rgba(42,26,14,.14)); }
.wk { position: absolute; top: 0; width: var(--kw); height: var(--kh); background: var(--warm); border: 1px solid var(--line-2); border-top: none; border-radius: 0 0 8px 8px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; cursor: pointer; transition: background .05s, transform .04s; }
.wk:active { transform: translateY(2px); }
.wk .lbl { font-size: clamp(11px, calc(var(--kw) * 0.32), 16px); font-weight: 700; color: var(--sub); pointer-events: none; }
.wk.c { background: linear-gradient(180deg, #fff 0%, #FFE7DB 100%); border-color: #f3b79e; }
.wk.c .lbl { color: var(--orange); }
.wk .oct { position: absolute; top: 8px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: clamp(9px, calc(var(--kw) * 0.24), 13px); color: var(--orange); pointer-events: none; }
.bk { position: absolute; top: 0; width: var(--bw); height: var(--bh); background: linear-gradient(180deg, #3a2719, #1d1009); border-radius: 0 0 6px 6px; z-index: 3; cursor: pointer; }
.bk:active { transform: translateY(2px); }
.wk.glow { background: linear-gradient(180deg, #fff, var(--orange-l)); border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange) inset; }
.bk.glow { background: linear-gradient(180deg, #ff8a4d, var(--orange-d)); box-shadow: 0 0 14px 1px rgba(255,90,31,.7); }
.glow-lbl { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--orange); white-space: nowrap; pointer-events: none; }
.wk.sel { background: linear-gradient(180deg, #d9e0ff, #aebcff); border-color: var(--cobalt); box-shadow: 0 0 0 2px var(--cobalt) inset; }
/* a pressed BLACK key stays black — it only gains a cobalt press ring + glow (never a white-key look) */
.bk.sel { background: linear-gradient(180deg, #4a3324, #1d1009); box-shadow: 0 0 0 2px var(--cobalt) inset, 0 0 12px 1px rgba(31,61,255,.6); }
/* transient press echo (external in-range note / out-of-range alt) — keeps each key's own color */
.wk.press { box-shadow: 0 0 0 2px var(--cobalt) inset; }
.bk.press { box-shadow: 0 0 0 2px var(--cobalt) inset, 0 0 10px 1px rgba(31,61,255,.5); }
.wk.flash-ok, .bk.flash-ok { background: var(--green) !important; box-shadow: 0 0 0 3px var(--green-d) inset; }
.wk.flash-bad, .bk.flash-bad { background: var(--red) !important; box-shadow: 0 0 0 3px var(--red-d) inset; }
.wk.hint { box-shadow: 0 0 0 3px var(--cobalt) inset, 0 0 12px 1px rgba(31,61,255,.5); }
.bk.hint { box-shadow: 0 0 12px 2px rgba(31,61,255,.85); }
.brace { position: absolute; top: -15px; height: 15px; border: 2px solid var(--orange); border-bottom: none; border-radius: 8px 8px 0 0; opacity: .55; z-index: 1; }
.brace span { position: absolute; top: -16px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--orange); }

/* ---------- options (choice) ---------- */
.options { display: flex; flex-direction: column; gap: 11px; margin: 4px auto 0; max-width: 460px; }
.opt { background: #fff; border: 2px solid var(--line-2); border-bottom-width: 4px; border-radius: 14px; padding: 16px 18px; font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; transition: transform .06s var(--spring), border-color .1s; }
.opt:hover { border-color: var(--orange-l); }
.opt:active { transform: translateY(2px); }
.opt.chosen, .opt.right { border-color: var(--green-d); background: var(--green-bg); }
.opt.wrong { border-color: var(--red-d); background: var(--red-bg); }

/* ---------- feedback: its OWN block (the action button is NOT in here) ---------- */
.feedback { display: none; margin: 16px auto 0; max-width: 520px; border-radius: 14px; padding: 13px 18px; font-size: 15px; font-weight: 700; line-height: 1.45; text-align: center; }
.feedback.show { display: block; animation: rise .2s var(--spring); }
.feedback.ok   { background: var(--green-bg); border: 1.5px solid var(--green);  color: var(--green-d); }
.feedback.bad  { background: var(--red-bg);   border: 1.5px solid var(--red);    color: var(--red-d); }
.feedback.note { background: var(--orange-bg);border: 1.5px solid var(--orange-l);color: var(--eyebrow); }
.feedback.help { background: #eef1ff;         border: 1.5px solid var(--cobalt); color: var(--cobalt-d); }

/* ---------- bottom action bar (consistent primary action area) ---------- */
.actionbar { position: sticky; bottom: 0; z-index: 6; display: flex; gap: 12px; justify-content: center; align-items: center; padding: 16px 0 18px; background: linear-gradient(to top, var(--cream) 72%, rgba(251,242,228,0)); }
.actionbar:empty { display: none; }
.action-main { min-width: 220px; }

/* ---------- input-source switcher (Screen · Computer keys · MIDI · Piano audio beta) ---------- */
.inp-switch { margin: 14px auto 0; max-width: 560px; text-align: center; }
.inp-hint { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--eyebrow); font-weight: 700; margin-bottom: 8px; }
.inp-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.inp-chip { font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--sub); background: #fff; border: 1.5px solid var(--line-2); border-radius: var(--r-pill); padding: 8px 14px; cursor: pointer; transition: border-color .1s, color .1s, transform .06s var(--spring); }
.inp-chip:hover { border-color: var(--orange-l); color: var(--ink); }
.inp-chip:active { transform: translateY(1px); }
.inp-chip.on { background: var(--orange-bg); border-color: var(--orange); color: var(--eyebrow); }
.inp-note { font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.45; }
.inp-note.beta { color: var(--cobalt-d); }

/* ---------- buttons ---------- */
.btn { font-family: var(--font-ui); font-weight: 800; font-size: 16px; border-radius: 14px; padding: 14px 24px; cursor: pointer; border: none; transition: transform .07s var(--spring); }
.btn:active { transform: translateY(2px); }
.btn.primary { background: var(--orange); color: #fff; box-shadow: 0 3px 0 var(--orange-d); }
.btn.ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--line-2); }
.btn.hear { background: var(--cobalt); color: #fff; box-shadow: 0 3px 0 var(--cobalt-d); }
.btn.big { display: block; width: 100%; margin-top: 8px; padding: 16px; font-size: 17px; }
.btn.link { background: none; color: var(--muted); display: block; margin: 14px auto 0; padding: 8px; box-shadow: none; }

/* ================= BREAKPOINTS ================= */
/* iPhone (≤700): focused range (8 white keys via JS), touch-size keys, full-bleed action bar */
@media (max-width: 700px) {
  .learn-root { padding: 14px 16px 0; }
  .kb-wrap { --maxkw: 56px; --gutter: 34px; --kh: calc(var(--kw) * 3.0); }
  .screen.play { min-height: calc(100vh - 92px); }
  .play-body { justify-content: flex-start; padding-top: 8px; gap: 12px; }
  .actionbar { margin: 0 -16px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--cream); border-top: 1px solid var(--line); }
  .action-main { flex: 1; min-width: 0; }
  .action-aux { flex: none; }
  .opt { padding: 15px 16px; }
}
/* iPad (701–1199): full map, comfortable touch keys, clean stack */
@media (min-width: 701px) and (max-width: 1199px) {
  .kb-wrap { --maxkw: 54px; --gutter: 96px; }
}
/* Mac / wide (≥1200): the keyboard is the confident hero, content vertically centered */
@media (min-width: 1200px) {
  .kb-wrap { --maxkw: 66px; --gutter: 200px; }
  .step-prompt, .step-title { font-size: 32px; }
}