/* One instrument surface. Engine-owned controls are re-used, not duplicated. */
#newShell.metro-mode{grid-template-rows:44px 40px minmax(0,1fr)}#newShell.metro-mode #idleActions{display:none}body.redesign #newStage .console[hidden],#metroStage[hidden]{display:none!important}#metroStage{height:100%;min-height:0}#metroStage .embedded-metro{height:100%}
#metroStage .metro-panel{display:grid;height:100%;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(54px,.7fr) 20px 22px minmax(70px,1.3fr) 66px 48px 44px 44px;gap:6px;margin:0;padding:0!important;border:0;background:none}
#metroStage .metro-panel>*{display:none!important}#metroStage .metro-panel>#metroBeats{display:grid!important;grid-area:1/1;grid-template-columns:repeat(var(--beats,4),minmax(0,1fr));min-height:0;margin:0;gap:5px;align-items:stretch}#metroStage #metroBeats button{height:100%;min-height:44px;border-radius:15px;font-size:clamp(18px,6vw,32px)}#metroStage .metro-panel>#metroParts{display:flex!important;grid-area:2/1;min-height:0;margin:0;align-items:center}#metroStage .metro-panel>.beat-tip{display:block!important;grid-area:3/1;margin:0;font-size:10px;text-align:center;color:#8fa694}
#metroStage .metro-panel>#character{display:flex!important;grid-area:4/1;min-height:0;flex-direction:column;align-items:center;justify-content:end;overflow:hidden}#metroStage #characterImg{height:100%;width:auto;max-height:100%;object-fit:contain}
#metroStage .metro-panel>.dial-row{display:flex!important;grid-area:5/1;margin:0;justify-content:space-between;min-height:0;gap:10px}#metroStage .tempo-wheel{width:110px;height:66px;margin:0;aspect-ratio:auto}#metroStage #metroDial{display:none}#metroStage .dial-center{position:static;height:100%;display:flex;justify-content:center;align-items:center}#metroStage .dial-center input#metroBpm{width:110px;height:49px;font:700 48px/1 Manrope,Arial,sans-serif;color:#f5f5f7;background:none;margin:0;padding:0;border:0;pointer-events:auto}#metroStage .dial-center span{font-size:10px;margin:0;color:#848884}#metroStage .tempo-nudge{width:72px;min-height:44px;height:44px;border:1px solid #272a27;border-radius:14px;background:transparent;font-size:22px;color:#aaa}
#metroStage .metro-panel>#metroRange{display:block!important;grid-area:6/1}#metroRange{appearance:none;-webkit-appearance:none;background:transparent;width:100%;height:48px;margin:0;padding:0 5px;touch-action:pan-y}#metroRange::-webkit-slider-runnable-track{height:6px;background:#354239;border-radius:8px}#metroRange::-webkit-slider-thumb{-webkit-appearance:none;height:30px;width:30px;border-radius:50%;background:#f5f5f7;margin-top:-12px;border:0}#metroRange::-moz-range-track{height:6px;background:#354239;border-radius:8px}#metroRange::-moz-range-thumb{width:30px;height:30px;border:0;border-radius:50%;background:#f5f5f7}
#metroStage .metro-panel>.metro-quick{display:flex!important;grid-area:7/1;margin:0}#metroStage #metroTap{min-height:44px;height:44px;padding:8px;width:100%;border-radius:13px;font-size:12px;margin:0;max-width:none}
#metroStage .metro-panel>.unified-transport{display:flex!important;grid-area:8/1;gap:8px;min-height:0}#metroStage .unified-transport button{flex:1;background:#eeeef3;color:#111;border:0;border-radius:13px;min-height:44px;height:44px;padding:8px;font-size:12px;margin:0}
#metroSettings .rhythm-controls{display:grid;gap:16px;margin:0;border:0}#metroSettings .rhythm-row>span{display:block;font-size:12px;color:#a8b0aa;margin-bottom:7px}#metroSettings .choice-strip{display:flex;gap:5px;flex-wrap:wrap}#metroSettings .choice-strip button{min-width:44px;flex:1}#metroSettings .choice-strip small{display:none}#metroSettings .metro-options{margin:14px 0 0}#metroSettings .metro-options>summary{font-size:13px}#metroSettings p{font-size:12px}
/* Complete musical groups stay together. Grid rows grow before the character does. */
body.redesign #newStage #hitStrip span{display:flex;align-items:center;justify-content:center;text-align:center;border-radius:9px;font-size:clamp(9px,2.7vw,13px);white-space:nowrap;overflow-wrap:normal;padding:2px;min-height:0}
body.redesign #newStage #hitStrip span.group-start{border-left:2px solid #688c71}body.redesign #newStage #hitStrip{gap:4px}
#newShell[data-grid='2'] #newStage .console{grid-template-rows:32px auto 34px 14px minmax(100px,2fr) 26px 32px minmax(20px,.5fr) 54px 48px 44px}
#newShell[data-grid='3'] #newStage .console,#newShell[data-grid='4'] #newStage .console{grid-template-rows:30px auto 34px 14px minmax(110px,2fr) 24px 30px minmax(18px,.4fr) 50px 48px 44px}
#newShell[data-grid='5'] #newStage .console,#newShell[data-grid='6'] #newStage .console,#newShell[data-grid='7'] #newStage .console,#newShell[data-grid='8'] #newStage .console{grid-template-rows:28px auto 30px 14px minmax(144px,3fr) 24px 28px minmax(0px,.15fr) 48px 44px 44px;gap:3px}
#newShell.switch-mode #newStage .switch-board-label{display:block;font-size:9px;letter-spacing:1px;color:inherit}#newShell.switch-mode #newStage .switch-board>strong{font-size:clamp(22px,6vw,30px)}#newShell.switch-mode #newStage .switch-board-bottom b{font-size:28px}#newShell.switch-mode #newStage .switch-board.prepare{border-color:#68de8a}#newShell.switch-mode #newStage .switch-board.change{background:#32c85b;color:#071a0b}
/* Pauses/errors show the existing engine explanation and recovery actions. */
body.redesign #newStage .console>#statePanel{display:none!important}body.redesign #newShell.paused-state #newStage .console>#statePanel{display:block!important;grid-area:5/1/9/2;z-index:4;align-self:stretch;overflow:auto;background:#171e19;border:1px solid #3b5041;border-radius:14px;padding:14px}body.redesign #statePanel .coach{display:block!important;text-align:left;min-height:0}body.redesign #statePanel .coach>span{font:650 16px Manrope,Arial,sans-serif}body.redesign #statePanel .coach p{font-size:13px;line-height:1.5}body.redesign #statePanel .pause-actions{gap:6px;flex-wrap:wrap}body.redesign #statePanel .pause-actions button{font-size:12px;border-radius:12px;min-height:44px;padding:10px;flex:1}body.redesign #statePanel [hidden]{display:none!important}body.redesign #newStage .console>#lessonProgress[hidden]{display:none!important}
@media(max-height:640px){#newShell{padding:4px 12px 8px;gap:4px;grid-template-rows:36px 38px minmax(0,1fr) 44px}#newShell.is-playing,#newShell.metro-mode{grid-template-rows:36px 38px minmax(0,1fr)}#newShell .new-header{height:36px}#metroStage .metro-panel{grid-template-rows:minmax(44px,.7fr) 12px 18px minmax(24px,.7fr) 52px 44px 44px 44px;gap:4px}#metroStage .tempo-wheel{height:52px}#metroStage .dial-center input#metroBpm{font-size:38px;height:39px}body.redesign #newShell #newStage .console{grid-template-rows:24px auto 28px 12px minmax(64px,1fr) 22px 24px 16px 42px 44px 44px;gap:2px}body.redesign #newShell.dense #newStage .console{grid-template-rows:24px auto 28px 12px minmax(100px,2fr) 22px 24px 0px 42px 44px 44px}body.redesign #newStage #hitStrip span{font-size:9px;border-radius:5px}#newShell.switch-mode #newStage .switch-board>strong{font-size:21px}#newShell.switch-mode #newStage .switch-board-bottom{min-height:22px;padding:0;margin:0}#newShell.switch-mode #newStage .switch-round-result{display:none}}
#metroStage .metro-panel>.beat-tip{display:none!important}#metroStage .metro-panel>#metroFeedback{display:block!important;grid-area:3/1;margin:0;font-size:10px;line-height:1.2;text-align:center;color:#a2b7a9;overflow:hidden}

/* One mode chooser, one sound/settings entry, one progress entry. */
#newShell .new-titlebar{grid-template-columns:minmax(0,1fr) auto 44px;gap:8px}
#configureMode{display:none!important}
#newShell .new-titlebar #chooseLesson{text-align:left;padding-left:12px}
#newShell .new-titlebar #openStats{padding:8px 12px}
#newShell .new-titlebar #openSettings{width:44px}
#lessonDialog .lesson-picker>.lesson-choices button{position:relative;padding:12px 38px 12px 14px;min-height:64px;border:1px solid transparent;border-radius:16px}
#lessonDialog .lesson-picker>.lesson-choices button strong{display:block;font-size:15px;line-height:1.35}
#lessonDialog .lesson-picker>.lesson-choices button small{display:block;font-size:12px;font-weight:400;line-height:1.4;color:#a8b0aa;margin-top:4px}
#lessonDialog .lesson-picker>.lesson-choices button[aria-pressed=true]{border-color:#32c85b;background:#193c24;color:#64e187}
#lessonDialog .lesson-picker>.lesson-choices button[aria-pressed=true]::after{content:'✓';position:absolute;right:14px;top:14px;font-size:18px}
#lessonDialog.metro-selection #sessionSetup>:not(.lesson-picker),#lessonDialog.metro-selection #lessonStatus{display:none!important}
#skillProgress{color:#a8b0aa!important;border-left:3px solid #32c85b!important;font-size:12px!important;padding-left:12px}
#lessonDialog #lessonStatus{font-size:12px;line-height:1.5;color:#a8b0aa}
.new-dialog input:focus-visible,.new-dialog button:focus-visible{outline:2px solid #32c85b;outline-offset:3px}

/* Discoverable modes on the same instrument screen. */
body.redesign #newShell{grid-template-rows:44px auto minmax(0,1fr) 48px}
body.redesign #newShell.is-playing,body.redesign #newShell.metro-mode{grid-template-rows:44px auto minmax(0,1fr)}
#newShell .new-titlebar{grid-template-columns:minmax(0,1fr) auto 40px;gap:6px;align-items:center}
.surface-tabs{display:flex;min-width:0;border-radius:12px;padding:3px;background:#1c201d;gap:2px}
#newShell .surface-tabs button{flex:1;min-width:0;padding:8px 5px;font-size:12px;min-height:38px;background:transparent;color:#929c95;border-radius:9px}
#newShell .surface-tabs button[aria-pressed=true]{background:#35443a;color:#fff;font-weight:750}
#newShell .new-titlebar #openStats{font-size:11px;padding:8px 6px;min-height:44px}
#newShell .new-titlebar #openSettings{width:40px;min-height:44px}
#exerciseTabs{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:2px}
#newShell #exerciseTabs button{min-height:44px;font-size:12px;line-height:1.2;border:1px solid #303832;background:#1a201c;color:#a6afa9;border-radius:12px}
#newShell #exerciseTabs button[aria-pressed=true]{background:#193c24;border-color:#32c85b;color:#79e69a}
#newShell .new-titlebar #chooseLesson{grid-column:1/-1;width:100%;text-align:left;background:transparent;color:#a5afa8;padding:5px 8px;min-height:32px;font-size:12px;white-space:normal}
#newShell.metro-mode #exerciseTabs,#newShell.metro-mode #chooseLesson{display:none}
#lessonDialog .lesson-picker{display:none!important}
#trainingInvite{width:100%;max-width:340px;padding:10px 12px;box-sizing:border-box;border:1px solid #2d4936;border-radius:14px;background:#17231b;margin-top:5px;flex-shrink:0;text-align:left}
#trainingInvite strong{font-size:13px;color:#edf3ee}#trainingInvite p{font-size:11px;line-height:1.35;color:#a4b2a9;margin:4px 0 8px}
#trainingInvite button{min-height:40px;width:100%;padding:7px;border-radius:10px;background:#32c85b;color:#092b13;border:0;font-size:12px;font-weight:700}
#trainingInvite[hidden]{display:none!important}
#metroStage #character:has(#trainingInvite:not([hidden])) #characterImg{min-height:0;flex:1;height:0;max-height:100%;width:auto}
#metroStage #character:has(#trainingInvite:not([hidden])) #characterLine{display:none}
body.redesign #newShell:not(.session-active) #newStage .console>.transport{visibility:hidden}
#newShell .new-titlebar button:disabled{opacity:.45}
@media(max-height:700px){body.redesign #newShell,body.redesign #newShell.is-playing,body.redesign #newShell.metro-mode{grid-template-rows:36px auto minmax(0,1fr)}body.redesign #newShell:not(.is-playing):not(.metro-mode){grid-template-rows:36px auto minmax(0,1fr) 44px}#newShell .new-titlebar{gap:3px}#newShell #exerciseTabs button{min-height:40px;font-size:11px}#newShell .new-titlebar #chooseLesson{min-height:28px;font-size:11px}#trainingInvite{padding:7px 10px}#trainingInvite p{margin:3px 0 5px}}

/* Reserve space for visible exercise selection; hit rows take priority over the mascot. */
body.redesign #newShell #newStage .console{grid-template-rows:28px auto 28px 12px minmax(0,2fr) 22px 0px minmax(0,.4fr) 48px 44px 44px;gap:4px}
body.redesign #newShell #newStage .console>#playHint{display:none!important}
body.redesign #newShell #newStage .console>#taskBrief{overflow:hidden}
@media(max-height:700px){body.redesign #newShell #newStage .console{grid-template-rows:26px auto 24px 12px minmax(0,2fr) 20px 0px minmax(0,.2fr) 44px 44px 44px;gap:3px}body.redesign #newShell.dense #newStage .console{grid-template-rows:24px auto 22px 12px minmax(0,2fr) 20px 0px 0px 42px 44px 44px}}

/* Keep the invitation outside the character; no scoring field before training. */
#newShell .new-titlebar #trainingInvite{grid-column:1/-1;max-width:none;width:100%;padding:0;margin:0;border:0;background:none}
#newShell #trainingInvite button{min-height:36px;width:100%;margin:0;padding:6px 10px;background:transparent;color:#84ca96;font-size:11px;font-weight:500;text-align:left}
.surface-error{grid-column:1/-1;font-size:12px;color:#f4bba8;margin:0}
.surface-error[hidden]{display:none}
body.redesign #newShell:not(.session-active) #newStage .console>#hitStrip,body.redesign #newShell:not(.session-active) #newStage .console>#blockStatus,body.redesign #newShell:not(.session-active) #newStage .console>#nextCue,body.redesign #newShell:not(.session-active) #newStage .console>#lessonProgress{display:none!important}
body.redesign #newShell:not(.session-active) #newStage .console>#character{grid-area:4/1/9/2;justify-content:center}
body.redesign #newShell:not(.session-active) #newStage #characterImg{height:100%;max-height:calc(100% - 20px);max-width:85%;width:auto;min-height:0}
#metroStage .metro-panel>#character{justify-content:center}
#metroStage #characterImg{min-height:0;height:calc(100% - 18px);max-height:calc(100% - 18px);max-width:85%;width:auto;flex:0 1 auto}