/* Grieg, "In the Hall of the Mountain King" — piece styles on top of book.css. Classes use the gm- prefix. */

/* Shared-control comfort: finger-sized targets on this page. */
.gm-book .segmented button, .gm-book .recording-copy > .quiet-action, .gm-book .track-actions button, .gm-book .composer-options button { min-height: 48px; }
.gm-recording-art { object-position: 50% 35%; }
.gm-turn-up { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: #fbeee6; color: var(--ink) !important; font-size: 13px !important; line-height: 1.45; }
.gm-turn-up svg { flex: 0 0 22px; width: 22px; height: 22px; fill: var(--rust); stroke: var(--rust); stroke-width: 1.8; stroke-linecap: round; margin-top: 1px; }

/* Lesson frame */
.gm-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gm-workshop { grid-template-columns: .7fr 1.3fr; }
.gm-workshop.gm-loading .primary { opacity: .7; }
.gm-name { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--teal-soft); font-size: 14px; line-height: 1.55; color: var(--ink); }
.gm-name strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 19px; margin-bottom: 4px; letter-spacing: -.02em; }
.gm-name em { color: var(--teal); font-style: italic; }
.gm-canvas { justify-content: flex-start; gap: 6px; padding: 22px; }
.gm-school { margin: -4px 3px 0; font-size: 13px; }
.gm-school a { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; font-weight: 600; }
.gm-roll { width: 100%; }
.gm-svg { width: 100%; height: auto; display: block; fill: none; stroke: none; overflow: visible; }
.gm-barline { stroke: #d6d2bf; stroke-width: 1; stroke-dasharray: 3 5; }
.gm-bar-label { fill: var(--muted); font: 500 12px var(--body); }
.gm-playhead { stroke: var(--rust); stroke-width: 3; stroke-linecap: round; transition: opacity .2s; }

/* 1. Tiptoe tune */
.gm-note { fill: color-mix(in srgb, var(--c) 45%, #fffdf5); stroke: var(--c); stroke-width: 2; transition: fill .12s; }
.gm-note.on { fill: var(--c); stroke: #1d2a26; }
.gm-ending { fill: transparent; stroke: color-mix(in srgb, var(--c) 60%, #bbb); stroke-width: 2; stroke-dasharray: 4 4; }
.gm-ending.chosen { fill: color-mix(in srgb, var(--c) 45%, #fffdf5); stroke: var(--c); stroke-dasharray: none; stroke-width: 3; }
.gm-ending.chosen.on { fill: var(--c); stroke: #1d2a26; }
.gm-ending-label { fill: var(--muted); font: 500 15px var(--serif); }
.gm-ending-label.chosen { fill: var(--ink); font-weight: 600; }
.gm-bracket { stroke: var(--teal); stroke-width: 3; stroke-linecap: round; }
.gm-bracket.answer { stroke: var(--rust); }
.gm-bracket-label { fill: var(--ink); font: italic 500 17px var(--serif); text-anchor: middle; }
.gm-pebble { fill: color-mix(in srgb, var(--c) 30%, #fffdf5); stroke: var(--c); stroke-width: 2; }
.gm-pebble.on { fill: var(--c); }
.gm-choices { margin-top: 10px; }
.gm-choices b, .gm-colour strong { font-family: var(--serif); font-weight: 500; }
.gm-choices b { font-size: 19px; margin-right: 3px; }
.gm-choices button[aria-pressed=true], .gm-colour[aria-pressed=true], .gm-layer-btn[aria-pressed=true] { background: var(--teal); border-color: var(--teal); color: #fffdf5; }
.gm-colour[aria-pressed=true] small, .gm-layer-btn[aria-pressed=true] small { color: #e5efe8; }

/* 2. Pluck or bow */
.gm-colour-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gm-colour, .gm-layer-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 10px 12px; background: var(--sheet); border-color: #e2dfcd; }
.gm-colour strong { font-size: 16px; line-height: 1.15; }
.gm-colour small, .gm-layer-btn small { font-size: 11px; font-weight: 500; color: var(--muted); }
.gm-plucked { rx: 8; }
.gm-bowed { stroke-width: 2.5; }

/* 3. Layers */
.gm-layer-toggles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.gm-layer-btn strong { font-size: 13px; line-height: 1.2; }
.gm-layer-btn[aria-pressed=false] strong { text-decoration: line-through; text-decoration-thickness: 1px; }
.gm-lane-bg { fill: #fbf8ef; stroke: #e2dfcd; stroke-width: 1; }
.gm-lane-label { fill: var(--ink); font: 600 15px var(--body); dominant-baseline: middle; }
.gm-layer-note { fill: var(--c); opacity: .55; transition: opacity .12s; }
.gm-layer-note.on { opacity: 1; stroke: #1d2a26; stroke-width: 1.5; }
.gm-layer.muted .gm-layer-note, .gm-layer.muted .gm-lane-label { opacity: .15; }
.gm-cues { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 10px; }
.gm-cues span { font-size: 12px; color: var(--muted); }
.gm-cues button { font-size: 13px; background: var(--sheet); }

/* 4. Louder and faster */
.gm-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.gm-slider { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.gm-slider output { font-family: var(--serif); font-size: 17px; font-weight: 500; color: var(--rust); }
.gm-slider input { width: 100%; min-height: 48px; accent-color: var(--teal); }
.gm-steps { --gm-loud: .3; display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; align-items: center; height: 38px; margin-top: 6px; }
.gm-steps i { display: block; justify-self: center; width: calc(8px + var(--gm-loud) * 18px); height: calc(8px + var(--gm-loud) * 18px); border-radius: 50%; background: #d9d4c0; transition: background .08s, transform .08s; }
.gm-steps i:nth-child(4n+1) { background: #cbc4aa; }
.gm-steps i.on { background: var(--rust); transform: scale(1.25); }
.gm-mountain-wrap { margin-top: 6px; background: #fbf8ef; border: 1px solid #e2dfcd; border-radius: 14px; padding: 10px 8px 4px; }
.gm-area { fill: color-mix(in srgb, var(--teal) 30%, #fbf8ef); stroke: var(--teal); stroke-width: 1.5; stroke-linejoin: round; }
.gm-tempo { fill: none; stroke: var(--rust); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gm-mk { stroke: #b9b39c; stroke-width: 1; stroke-dasharray: 2 4; }
.gm-mk-label { fill: var(--muted); font: 500 11px var(--body); }
.gm-axis { font: 600 11px var(--body); }
.gm-axis-l { fill: var(--teal); text-anchor: end; }
.gm-axis-t { fill: var(--rust); }
.gm-time { fill: var(--muted); font: 500 11px var(--body); text-anchor: middle; }
.gm-you-line { stroke: var(--rust); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: .75; }
.gm-you-label { fill: var(--rust); font: italic 500 12px var(--serif); }
.gm-you { transition: transform .15s; }
.gm-rec-head { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; opacity: 0; }
.gm-now { margin: 8px 0 0; text-align: center; font: 500 16px/1.4 var(--serif); color: var(--ink); }

@media (max-width: 1050px) {
  .gm-workshop { grid-template-columns: .62fr 1.38fr; }
  .gm-workshop .lesson-text h3 { font-size: 29px; }
  .gm-colour strong { font-size: 14px; }
}
@media (max-width: 900px) {
  .gm-workshop { grid-template-columns: 1fr; }
  .gm-workshop .lesson-text h3 { font-size: 32px; }
}
@media (max-width: 820px) {
  .gm-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gm-colour-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-layer-toggles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .gm-canvas { padding: 14px; }
  .gm-sliders { grid-template-columns: 1fr; }
  .gm-layer-toggles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-roll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px 6px; }
  .gm-svg { min-width: 560px; }
  .gm-steps { gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-steps i, .gm-you, .gm-note, .gm-layer-note, .gm-playhead { transition: none; }
  .gm-steps i.on { transform: none; }
}