/* Melo — "The Pattern Nobody Tells You" (first Core lesson; doubles as a screen-recordable
   reveal). Clean, cream, minimal chrome — the 7 quality badges are the load-bearing visual and
   the key-slide is the hero (badges + Roman numerals hold still while the chord names roll).
   melo.css tokens; shared keyboard via glowkb.css. Motion eased under reduced-motion. */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { background: var(--cream, #FBF2E4); color: var(--ink, #2A1A0E); font-family: var(--font-ui, Inter, sans-serif); overflow: hidden; }

.ck-exit { position: fixed; top: 14px; right: 18px; z-index: 30; font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #8a7a64); text-decoration: none; opacity: .6; }
.ck-exit:hover { opacity: 1; }

.ck { max-width: 860px; height: 100dvh; margin: 0 auto; padding: 0 18px; display: flex; flex-direction: column; }
.screen { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; }
.screen.active { display: flex; }

/* ---- intro: outcome + desire, one line each ---- */
.intro .desire { font-family: var(--font-serif, serif); font-weight: 600; letter-spacing: -.02em; line-height: 1.08; font-size: clamp(28px, 6vw, 46px); max-width: 18ch; }
.intro .outcome { font-size: clamp(15px, 2.6vw, 18px); color: var(--sub, #6E5D49); max-width: 30ch; line-height: 1.5; }
.cta { font-family: var(--font-ui, sans-serif); font-weight: 700; font-size: 16px; padding: 15px 32px; border-radius: 999px; border: none; cursor: pointer; background: var(--orange, #FF5A1F); color: #fff; box-shadow: 0 6px 0 var(--orange2, #F0531A); transition: transform .1s, box-shadow .1s; margin-top: 6px; }
.cta:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--orange2, #F0531A); }
.cta.ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--line, #EFE3CF); box-shadow: var(--shadow, 0 3px 0 rgba(120,80,20,.1)); }

/* ---- lesson ---- */
.say { font-family: var(--font-serif, serif); font-weight: 700; font-size: clamp(18px, 3.4vw, 26px); min-height: 1.3em; transition: opacity .3s; max-width: 24ch; line-height: 1.15; }
.say em { font-style: italic; color: var(--orange); }

/* the 7 chord cards (the hero row) */
.cards { display: flex; gap: clamp(5px, 1.3vw, 12px); width: 100%; max-width: 780px; }
.card { flex: 1 1 0; min-width: 0; background: var(--card, #fff); border: 1.5px solid var(--line, #EFE3CF); border-radius: 16px; padding: 12px 4px 14px; display: flex; flex-direction: column; align-items: center; gap: 9px; cursor: pointer; box-shadow: 0 3px 0 rgba(120,80,20,.08); transition: transform .12s var(--ease-out, ease), box-shadow .15s, border-color .15s; }
.card:hover { transform: translateY(-2px); }
.card:active { transform: translateY(0) scale(.97); }
.card .roman { font-family: var(--font-serif, serif); font-weight: 700; font-size: clamp(13px, 3vw, 21px); line-height: 1; color: var(--ink); }
/* the quality badge — the HERO of the card: bold, instantly readable, color-coded; this NEVER
   changes across keys. width:100% + centered text → every badge is the SAME fixed width, so
   "Major" / "Minor" / "Dim" never jitter or shift the row. */
.badge, .slot { width: 100%; min-height: 28px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono, monospace); font-weight: 700; font-size: clamp(10px, 2.1vw, 14px);
  text-transform: uppercase; letter-spacing: .04em; padding: 6px 2px; border-radius: 999px; }
.badge { color: #fff; }
.badge.maj { background: var(--orange, #FF5A1F); }
.badge.min { background: var(--cobalt, #1F3DFF); }
.badge.dim { background: var(--purple, #7A3FF2); }

/* the prove-it slot: empty placeholder the user fills in (badges are hidden in F). Same box
   metrics as .badge, so swapping badge↔slot causes zero layout shift. */
.slot { display: none; color: var(--label, #9A8A74); border: 1.5px dashed var(--line, #EFE3CF); background: transparent; }
.slot.maj { color: #fff; border-color: transparent; background: var(--orange, #FF5A1F); }
.slot.min { color: #fff; border-color: transparent; background: var(--cobalt, #1F3DFF); }
.slot.dim { color: #fff; border-color: transparent; background: var(--purple, #7A3FF2); }
.slot.locked { box-shadow: 0 0 0 3px rgba(70,179,77,.35); animation: badgePop .4s var(--spring, cubic-bezier(.22,1,.36,1)); }
/* in prove mode the real (answer) badges are swapped out for empty slots to fill */
.cards.proving .badge { display: none; }
.cards.proving .slot { display: flex; }
.ck.proving .switcher { visibility: hidden; pointer-events: none; }
/* record mode: strip the exit link for a clean 10-second capture (caption stays) */
body.record .ck-exit { display: none; }
/* the chord name — the ONLY part that moves when the key changes */
.nameroll { width: 100%; height: 1.7em; overflow: hidden; }
.name { font-family: var(--font-serif, serif); font-weight: 700; font-size: clamp(13px, 3.4vw, 21px); line-height: 1.55; color: var(--sub, #6E5D49); }
.name.roll { animation: nameRoll .42s var(--ease-out, cubic-bezier(.2,.8,.2,1)) both; }
@keyframes nameRoll { 0% { transform: translateY(100%); opacity: 0 } 100% { transform: translateY(0); opacity: 1 } }

/* prove-it states on the cards */
.card.correct { border-color: var(--green, #46b34d); box-shadow: 0 0 0 3px rgba(70,179,77,.25), 0 3px 0 rgba(120,80,20,.08); }
.card.correct .badge { animation: badgePop .4s var(--spring, cubic-bezier(.22,1,.36,1)); }
@keyframes badgePop { 0% { transform: scale(1) } 45% { transform: scale(1.16) } 100% { transform: scale(1) } }
.card.nope { animation: shake .32s ease; }
@keyframes shake { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-5px) } 75% { transform: translateX(5px) } }

/* the "switch key" control — a sliding segmented pill (the hero gesture) */
.switcher { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.switcher .lbl { font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--label, #9A8A74); }
.keyrow { position: relative; display: inline-flex; background: #fff; border: 1.5px solid var(--line, #EFE3CF); border-radius: 999px; padding: 5px; box-shadow: var(--shadow, 0 3px 0 rgba(120,80,20,.1)); }
.keyrow .slider { position: absolute; top: 5px; bottom: 5px; left: 0; border-radius: 999px; background: var(--ink, #2A1A0E); transition: transform .4s var(--spring, cubic-bezier(.22,1,.36,1)), width .4s var(--spring, cubic-bezier(.22,1,.36,1)); z-index: 0; }
.keyrow button { position: relative; z-index: 1; border: none; background: none; font-family: var(--font-serif, serif); font-weight: 700; font-size: clamp(15px, 2.4vw, 18px); padding: 9px clamp(14px, 3vw, 22px); border-radius: 999px; cursor: pointer; color: var(--muted, #8a7a64); transition: color .25s; }
.keyrow button.on { color: var(--cream, #FBF2E4); }

.payoff { font-family: var(--font-serif, serif); font-weight: 600; font-size: clamp(17px, 3.2vw, 24px); max-width: 26ch; line-height: 1.18; min-height: 1.2em; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.payoff.show { opacity: 1; transform: none; }
.payoff em { font-style: italic; color: var(--orange); }

.kb-wrap { display: flex; justify-content: center; align-items: flex-start; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .name.roll { animation: none; }
  .payoff { transition: none; }
}