/* Course II, Melody & Harmony. Widgets for web/js/learn/course-melody-harmony.js; every class starts mh-. */
.lab{--mh-major:#d49a3a;--mh-minor:#2e7a80;--mh-dim:#77599c}
.q-major{--q:var(--mh-major)}.q-minor{--q:var(--mh-minor)}.q-diminished{--q:var(--mh-dim)}

/* Interval staircase */
.mh-ladder{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:18px;align-items:end}
.mh-stairs{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:4px;height:190px;align-items:stretch}
.mh-stair{position:relative;padding:0;min-height:0;min-width:0;border:0;border-radius:10px;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;background:transparent}
.mh-stair:hover{background:#f1efe3}
.mh-stair i{display:block;height:var(--h);border-radius:8px 8px 4px 4px;background:color-mix(in srgb,var(--c) 30%,#fffdf5);border:1px solid color-mix(in srgb,var(--c) 45%,#fff);transition:background .12s,transform .12s}
.mh-stair b{font:500 13px var(--serif);color:var(--ink);padding-top:4px;text-align:center}
.mh-stair small{position:absolute;left:0;right:0;text-align:center;font:600 10px var(--body);color:var(--muted);bottom:calc(var(--h) + 22px)}
.mh-stair.chosen i{background:var(--c);border-color:color-mix(in srgb,var(--c) 70%,#000)}
.mh-stair.sounding i{transform:translateY(-4px);box-shadow:0 0 0 3px var(--gold)}
.mh-stair-legend{grid-column:1;display:grid;grid-template-columns:1fr 2fr 10fr;gap:4px;font-size:11px;color:var(--muted);text-align:center;margin-top:-10px}
.mh-stair-legend span{border-top:2px solid #cfd3c2;padding-top:3px}
.mh-stair-legend .mh-leg-step{border-color:var(--teal)}.mh-stair-legend .mh-leg-leap{border-color:var(--rust)}
.mh-readout{grid-column:2;grid-row:1/span 2;align-self:center;background:#f3f1e5;border-radius:16px;padding:18px;text-align:center}
.mh-pair{font:500 30px var(--serif);color:var(--ink)}.mh-pair span{color:var(--muted);font-size:22px}
.mh-iname{font:500 22px var(--serif);color:var(--course);margin:4px 0}
.mh-isub{font-size:13px;color:var(--muted)}

/* Note lane: a small piano-roll of bars */
.mh-lane{position:relative;height:120px;background:#fffdf6;border:1px solid #ebe6d6;border-radius:14px;margin:0 0 4px;overflow:hidden}
.mh-lane-low{height:90px}
.mh-lane.mh-off{opacity:.3}
.mh-bar{position:absolute;height:14px;min-width:9px;margin-left:2px;transform:translateY(50%);border-radius:7px;background:color-mix(in srgb,var(--c) 40%,#fffdf5);border:1px solid color-mix(in srgb,var(--c) 60%,#fff);transition:background .08s}
.mh-bar b{position:absolute;left:4px;top:-17px;font:600 10px var(--body);color:var(--muted);white-space:nowrap}
.mh-bar.pair{background:color-mix(in srgb,var(--c) 70%,#fffdf5);box-shadow:0 0 0 2px var(--gold)}
.mh-bar.ghost{background:transparent;border-style:dashed;border-color:#b9bdad}
.mh-bar.on{background:var(--c);border-color:color-mix(in srgb,var(--c) 70%,#000)}

/* Tune cards, answers */
.mh-tunes{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.mh-tune{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;min-height:58px;font-size:14px}
.mh-tune small{font-weight:400;font-size:12px;color:var(--muted)}
.mh-tune[aria-pressed=true]{background:var(--teal-soft);border-color:#a4c2ae}
.mh-tune-read{font-size:14px;margin:0;min-height:22px}
.mh-answer{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mh-answer.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.mh-answer button{min-height:72px;font:500 24px var(--serif);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#f7f5ea}
.mh-answer.four button{font:600 14px var(--body)}
.mh-answer .mh-mark{display:block;height:34px;font:600 48px/30px var(--serif);color:var(--rust)}.mh-answer button.yes .mh-mark{color:#fffdf4}
.mh-answer button small{font:400 12px var(--body);color:var(--muted)}
.mh-answer button.yes{background:var(--teal);border-color:var(--teal);color:#fffdf4}
.mh-answer button.yes small{color:#e3efe7}

/* Smooth / crunchy meter */
.mh-meter-bar{position:relative;height:14px;border-radius:7px;background:linear-gradient(90deg,#3f8a76,#b9a247 55%,#c0573e)}
.mh-meter-bar i{position:absolute;top:-6px;width:6px;height:26px;margin-left:-3px;border-radius:3px;background:var(--ink);box-shadow:0 0 0 2px #fffaf0;transition:left .25s}
.mh-meter-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:4px}
.mh-mode-pick{flex:1;min-width:220px}
.mh-baskets{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mh-basket{min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;border:2px dashed #cfd3c2;border-radius:18px;background:#fbf9f0;font:500 20px var(--serif)}
.mh-basket[data-b=smooth]{border-color:#9cc2b4}.mh-basket[data-b=crunchy]{border-color:#dcb0a0}
.mh-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.mh-chip{display:inline-block;padding:2px 9px;border-radius:12px;background:var(--c);color:#fffaf0;font:600 12px var(--body);animation:mh-drop .3s ease-out}
@keyframes mh-drop{from{transform:translateY(-14px);opacity:0}}

/* Chord blocks (cadences) */
.mh-blocks{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mh-block{min-height:92px;border-radius:16px;background:color-mix(in srgb,var(--q) 22%,#fffdf5);border:1px solid color-mix(in srgb,var(--q) 45%,#fff);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background .1s,transform .1s}
.mh-block b{font:500 30px var(--serif);color:var(--ink)}
.mh-block small{font-size:12px;color:var(--muted)}
.mh-block.on{background:var(--q);transform:translateY(-3px)}.mh-block.on b,.mh-block.on small{color:#fffaf0}
.mh-blocks.waiting .mh-home-slot{border-style:dashed;background:transparent;opacity:.55}
.mh-blocks.waiting .mh-home-slot b:after{content:'?';margin-left:2px;color:var(--rust)}

/* Chord family pads */
.mh-chord-pads{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.mh-chord-pad{min-height:70px;padding:6px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-color:color-mix(in srgb,var(--q) 55%,#fff);background:color-mix(in srgb,var(--q) 16%,#fffdf5)}
.mh-chord-pad b{font:500 22px var(--serif)}.mh-chord-pad small{font-size:12px;font-weight:500;color:var(--muted)}
.mh-chord-pad[aria-pressed=true]{background:var(--q);color:#fffaf0}.mh-chord-pad[aria-pressed=true] small{color:#fffaf0}
.mh-legend{display:flex;gap:16px;font-size:12px;color:var(--muted);margin:0}
.mh-legend span:before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--q);margin-right:6px}

/* Chord map */
.lab svg.mh-map{height:auto;max-height:340px;touch-action:manipulation}
.mh-map text{stroke:none}.mh-map marker path{stroke:none}
.mh-edge{fill:none;stroke:#c9ccb9;stroke-width:2.5;transition:stroke .15s}
.mh-edge.hot{stroke:var(--rust);stroke-width:4}
.mh-node{cursor:pointer;outline:none}
.mh-node circle{fill:color-mix(in srgb,var(--q) 20%,#fffdf5);stroke:var(--q);stroke-width:2.5;transition:fill .12s}
.mh-node-r{font:500 22px var(--serif);text-anchor:middle;fill:var(--ink)}
.mh-node-n{font:600 12px var(--body);text-anchor:middle;fill:var(--muted)}
.mh-node.next circle{stroke-width:4;stroke-dasharray:5 4}
.mh-node.now circle{fill:var(--q)}.mh-node.now text{fill:#fffaf0}
.mh-node:focus-visible circle{stroke:var(--gold);stroke-width:5}
.mh-anywhere{font:italic 12px var(--serif);fill:var(--muted)}
.mh-keyline{font-size:13px;color:var(--muted);margin:0}
.mh-slots{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:6px}
.mh-slot{min-height:64px;padding:4px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px dashed #cfd3c2;background:#fbf9f0}
.mh-slot b{font:500 20px var(--serif)}.mh-slot small{font-size:11px;font-weight:500;color:var(--muted)}
.mh-slot[class*=q-]{border-style:solid;border-color:color-mix(in srgb,var(--q) 55%,#fff);background:color-mix(in srgb,var(--q) 16%,#fffdf5)}
.mh-slot.edit{outline:3px solid var(--gold);outline-offset:1px}
.mh-slot.playing{background:var(--q,var(--teal));color:#fffaf0}.mh-slot.playing small{color:#fffaf0}
.lab-choices.mh-wrap{flex-wrap:wrap}.lab-choices.mh-wrap button{flex:1 1 28%}
.mh-presets{display:flex;flex-wrap:wrap;gap:8px}
.mh-presets button{font-size:13px;min-height:44px}
.mh-tools{gap:12px}.mh-tools .lab-choices{flex:1;min-width:240px}

/* Grid additions: chord band and chord-tone glow */
.mh-band{margin-bottom:-6px}
.mh-band-cells{display:grid;gap:4px}
.mh-band-cells span{border-radius:8px 8px 0 0;background:color-mix(in srgb,var(--q) 18%,#fffdf5);border-bottom:3px solid var(--q);padding:4px 6px;font-size:13px;white-space:nowrap;overflow:hidden}
.mh-band-cells small{color:var(--muted);font-size:11px}
.grid-cell.mh-ct:not(.on){background:color-mix(in srgb,var(--row) 16%,#f7f5ea)}
.grid-cell.mh-root:not(.on){background-image:radial-gradient(circle,color-mix(in srgb,var(--row) 70%,#fff) 0 4px,transparent 5px)}
.grid-cell.mh-fifth:not(.on){background-image:radial-gradient(circle,transparent 0 3px,color-mix(in srgb,var(--row) 70%,#fff) 3.5px 5px,transparent 5.5px)}
.mh-glowroll[data-now="0"] .mh-seg-0.mh-ct,.mh-glowroll[data-now="1"] .mh-seg-1.mh-ct,.mh-glowroll[data-now="2"] .mh-seg-2.mh-ct,.mh-glowroll[data-now="3"] .mh-seg-3.mh-ct{box-shadow:0 0 0 2px color-mix(in srgb,var(--row) 60%,#fff),0 0 12px color-mix(in srgb,var(--row) 45%,transparent)}
.mh-glowroll[data-now="0"] .mh-seg-0.mh-ct:not(.on),.mh-glowroll[data-now="1"] .mh-seg-1.mh-ct:not(.on),.mh-glowroll[data-now="2"] .mh-seg-2.mh-ct:not(.on),.mh-glowroll[data-now="3"] .mh-seg-3.mh-ct:not(.on){background:color-mix(in srgb,var(--row) 34%,#f7f5ea)}

/* Ground bass ring and layer toggles */
.mh-ring{position:relative;width:min(280px,80%);aspect-ratio:1;margin:6px auto 0}
.mh-ring span{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 25%,#fffdf5);border:2px solid var(--c);transform:rotate(calc(var(--i)*45deg)) translateY(-105px) rotate(calc(var(--i)*-45deg));transition:background .1s,box-shadow .1s}
.mh-ring span b{font:500 18px var(--serif)}
.mh-ring span.on{background:var(--c);color:#fffaf0;box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 30%,transparent)}
.mh-ring em{position:absolute;inset:0;display:grid;place-items:center;font:italic 16px var(--serif);color:var(--muted)}
.mh-layers{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.mh-layers button{display:flex;flex-direction:column;align-items:center;min-height:56px;font-size:14px}
.mh-layers button small{font-weight:400;font-size:11px;color:var(--muted)}
.mh-layers button[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:#fffdf4}
.mh-layers button[aria-pressed=true] small{color:#dfebe0}

/* Stepping stones */
.mh-stones{position:relative;height:190px;background:#fffdf6;border:1px solid #ebe6d6;border-radius:14px;margin:10px 0 0}
.mh-stone,.mh-gap{position:absolute;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center}
.mh-stone{width:46px;height:46px;background:color-mix(in srgb,var(--c) 30%,#fffdf5);border:2px solid var(--c);font:500 16px var(--serif)}
.mh-gap{width:44px;height:44px;min-height:44px;padding:0;border:2px dashed #b9bdad;background:#fbf9f0;font:600 18px var(--body);color:var(--muted)}
.mh-gap[aria-pressed=true]{border-style:solid;border-color:var(--c);background:color-mix(in srgb,var(--c) 20%,#fffdf5);color:var(--ink);font:500 15px var(--serif);width:38px;height:38px;min-height:38px}
.mh-stone.on,.mh-gap.on{background:var(--c);color:#fffaf0;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 30%,transparent)}
.mh-stone-chords{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-size:12px;color:var(--muted)}
.mh-stone-chords span{border-top:3px solid #dcdfd0;padding-top:3px}
.mh-stone-chords span.on{border-color:var(--gold);color:var(--ink);font-weight:600}

/* Modes */
.mh-homes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.mh-homes button{display:flex;flex-direction:column;align-items:center;min-height:60px;padding:6px 2px}
.mh-homes button b{font:500 22px var(--serif)}.mh-homes button small{font-size:11px;font-weight:500;color:var(--muted)}
.mh-homes button[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:#fffdf4}.mh-homes button[aria-pressed=true] small{color:#dfebe0}
.mh-modecard{background:#f3f1e5;border-radius:14px;padding:12px 16px;font-size:15px;line-height:1.5}
.mh-modecard strong{font:500 19px var(--serif);color:var(--course)}
.mh-modecard small{color:var(--muted);font-size:12px;letter-spacing:.04em}

/* Song sections, arrangement strip */
.mh-sections{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mh-section{position:relative;overflow:hidden;min-height:108px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid var(--c);background:color-mix(in srgb,var(--c) 14%,#fffdf5)}
.mh-section b{font:500 40px var(--serif);color:var(--c);line-height:1}
.mh-section span{font-size:13px}
.mh-section .mh-progress{position:absolute;left:0;bottom:0;height:6px;width:calc(var(--p,0)*100%);background:var(--c)}
.mh-section.on{background:color-mix(in srgb,var(--c) 28%,#fffdf5)}
.mh-palette{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mh-palette button{display:flex;flex-direction:column;align-items:center;min-height:56px;border:2px solid var(--c);color:var(--c);font:500 18px var(--serif)}
.mh-palette button small{font:400 11px var(--body);color:var(--muted)}
.mh-strip{position:relative;background:#f3f1e5;border-radius:16px;padding:10px;min-height:96px}
.mh-blocks-row{display:flex;gap:6px;min-height:76px}
.mh-sblock{flex:1;min-width:0;padding:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--c);border-color:transparent;color:#fffaf0;border-radius:12px}
.mh-sblock b{font:500 26px var(--serif);line-height:1}.mh-sblock small{font-size:10px;font-weight:500;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mh-sblock:hover{background:var(--c);filter:brightness(1.07)}
.mh-sblock.on{box-shadow:0 0 0 3px var(--gold);transform:translateY(-2px)}
.mh-track{position:relative}
.mh-playhead{position:absolute;top:-4px;bottom:-4px;left:0;width:3px;margin-left:-1px;border-radius:2px;background:var(--ink);opacity:0;pointer-events:none}
.mh-strip.playing .mh-playhead{opacity:1}
.mh-empty{margin:auto;color:var(--muted);font-size:14px}

/* Phrases, texture, round */
.mh-sentence{display:grid;grid-template-columns:1fr 1fr;gap:4px;text-align:center;font:italic 15px var(--serif);color:var(--muted)}
.mh-sentence b{font:600 26px var(--serif);color:var(--rust);font-style:normal}
.mh-phrase-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mh-phrase-card{display:flex;flex-direction:column;gap:8px;background:#f3f1e5;border-radius:14px;padding:10px}
.mh-phrase-card strong{font:500 16px var(--serif)}
.mh-round{display:flex;flex-direction:column;gap:8px}
.mh-round-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;align-items:center}
.mh-round-row .mh-lane{height:70px;margin:0}
.mh-round-row button{display:flex;flex-direction:column;align-items:flex-start;font-size:14px;border:2px solid var(--c);min-height:56px}
.mh-round-row button small{font-weight:400;font-size:11px;color:var(--muted)}
.mh-round-row button[aria-pressed=true]{background:var(--c);color:#fffaf0}.mh-round-row button[aria-pressed=true] small{color:#fffaf0}

@media(max-width:820px){.mh-ladder{grid-template-columns:1fr}.mh-readout{grid-column:1;grid-row:auto}}
@media(max-width:600px){
  .mh-stairs{height:160px;gap:2px}.mh-stair b{font-size:11px}.mh-stair small{font-size:9px}
  .mh-chord-pads{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mh-homes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mh-answer.four{grid-template-columns:1fr 1fr}
  .mh-slots.mh-eight{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mh-ring span{width:44px;height:44px;margin:-22px;transform:rotate(calc(var(--i)*45deg)) translateY(-92px) rotate(calc(var(--i)*-45deg))}
  .mh-sections{gap:6px}.mh-section b{font-size:32px}
  .mh-round-row{grid-template-columns:1fr}
  .mh-phrase-cards{grid-template-columns:1fr}
  .mh-stones{height:290px}.mh-stone{width:34px;height:34px;font-size:14px}.mh-gap{width:44px;height:44px}.mh-gap[aria-pressed=true]{width:36px;height:36px;min-height:36px}
  .mh-band-cells span{padding:3px 3px;font-size:11px}.mh-band-cells small{display:none}
  .mh-band-cells{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:3px}
}
@media(prefers-reduced-motion:reduce){.mh-chip{animation:none}.mh-stair i,.mh-block,.mh-meter-bar i,.mh-ring span{transition:none}.mh-stair.sounding i,.mh-block.on,.mh-sblock.on{transform:none}}