/* Shared functional controls across the training suite. */
.training-app{--control-font:Arial,"PingFang SC","Microsoft YaHei",sans-serif;--control-height:52px;--control-radius:11px}
.training-app :is(.choice-row button,.sound-mode,.direction-mode,.construction-sound-modes button,.shift-row button,.secondary,.level-option>span){min-height:var(--control-height);border-radius:var(--control-radius);font-family:var(--control-font);font-size:14px;font-weight:700;line-height:1.35;padding:10px 12px;box-sizing:border-box}
.training-app :is(.choice-row button,.sound-mode,.direction-mode,.construction-sound-modes button,.level-option>span) small{font-family:var(--control-font);font-size:11px;font-weight:400;line-height:1.4;margin-top:3px}
.training-app :is(.choice-row,.construction-sound-modes){gap:8px;min-width:0}
.training-app :is(.choice-row button,.sound-mode,.direction-mode,.construction-sound-modes button){border:1px solid #d8d4ca;background:#fff;color:#63706c;min-width:0}
.training-app :is(.choice-row button,.sound-mode,.direction-mode,.construction-sound-modes button).active{background:#edf6f2;border-color:#236b62;color:#236b62;box-shadow:inset 3px 0 #236b62}
.training-app :is(.setting-group>span,.setting-group>label,.setting-pair label,.settings-card legend){font-family:var(--control-font);font-size:12px;font-weight:700;line-height:1.5}
.training-app select{min-height:52px;font-family:var(--control-font);font-size:16px;line-height:1.4;border-radius:11px;max-width:100%;min-width:0}
.training-app input[type=range]{min-height:44px;touch-action:pan-y}
.training-app :is(button,a,select){touch-action:manipulation}
.training-app :is(.modes,.suite-modes) b{font:700 14px/1.4 var(--control-font)}
.training-app :is(.modes,.suite-modes) small{font:400 11px/1.4 var(--control-font)}
.training-app .compact-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.training-app .compact-options button{padding:10px 4px}
@media(min-width:600px) and (max-width:1400px){
 .training-app main:not(.app-shell){width:calc(100% - 32px);margin:16px auto 24px}
 .training-app .training-layout,.training-app .suite-modes{width:calc(100% - 32px);max-width:none}
 .training-app .settings-card,.training-app .practice-card{height:auto;min-height:0}
 .training-app .musicxml-frame{height:clamp(500px,65vh,840px);height:clamp(500px,65dvh,840px)}
 .training-app .paper{min-width:0}
 .training-app .question h1{font-size:26px;line-height:1.35}
 .training-app .score-progress{font-size:14px}
 .training-app .card footer{height:auto;min-height:74px;gap:12px;padding:14px 18px}
 .training-app .card footer button{min-height:48px;font-size:14px}
 .training-app .keyboard-scroll,.training-app .score-scroll{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 .training-hub .hub-shell{padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
 .training-hub .module-stage .frames{height:calc(100vh - 84px);height:calc(100dvh - 84px);min-height:0}
 .training-hub .module-stage[data-group=listening] .frames{height:calc(100vh - 172px);height:calc(100dvh - 172px);min-height:0}
 .training-hub .stage-toolbar{min-height:48px;margin-top:10px}
 .training-hub .stage-toolbar :is(button,a){min-height:44px;display:inline-flex;align-items:center;font-size:14px}
 .training-hub .stage-toolbar [hidden]{display:none}
}
@media(min-width:600px) and (max-width:999px){
 .sight-app .card{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"settings" "question" "paper" "feedback" "actions";gap:0}
 .sight-app .train-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 144px;min-height:0;margin-bottom:14px}
 .sight-app .train-sidebar .ear-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px;border:0;align-items:start}
 .sight-app .ear-settings .setting-group{margin:0;padding:0;border:0;min-width:0}
 .sight-app .ear-settings .setting-group:first-child{grid-column:1/-1}
 .sight-app .train-sidebar .listen-panel{min-height:190px;align-self:center;margin:0 8px;padding:22px 4px;border:0}
 .sight-app .listen-panel .sound-rings i:nth-child(3){width:132px;height:132px}
 .sight-app .listen-panel .sound-rings i:nth-child(2){width:116px;height:116px}
 .scale-app .training-layout{grid-template-columns:minmax(0,1fr);gap:14px}
 .scale-app .settings-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:18px}
 .scale-app .settings-card>.section-label{grid-column:1/-1}
 .scale-app .setting-group,.scale-app .setting-group+.setting-group{margin:0;padding:0;border:0;min-width:0}
 .scale-app .settings-card>.listening-stage{min-height:210px;margin:0}
 .scale-app .score-header{padding:18px}
 .scale-app .playback-controls{flex-wrap:wrap;gap:16px}
}
@media(min-width:1000px) and (max-width:1400px){
 .sight-app .card{grid-template-columns:264px minmax(0,1fr);gap:0 16px}
 .sight-app .ear-settings{padding:18px}
 .scale-app .training-layout{grid-template-columns:280px minmax(0,1fr);gap:16px}
}
@media(max-width:599px){.training-app{--control-height:48px}.training-app :is(.choice-row button,.construction-sound-modes button){font-size:13px;padding:8px}.training-app :is(.choice-row button,.construction-sound-modes button) small{font-size:10px}}
/* One-screen tablet workspace: narrow controls and a large reading surface. */
@media(min-width:700px){
 .training-app{--control-height:44px}
 .training-app :is(.choice-row button,.sound-mode,.direction-mode,.construction-sound-modes button,.level-option>span){font-size:13px;padding:7px 8px}
 .training-app :is(.choice-row button,.sound-mode,.direction-mode,.construction-sound-modes button) small{font-size:10px}
 .training-app select{min-height:44px;font-size:14px;padding:7px 8px}
 .training-app input[type=range]{min-height:30px;margin:3px 0}
 .training-app :is(.choice-row,.construction-sound-modes){gap:5px}
 .training-app :is(.modes,.suite-modes){margin-bottom:10px}
 .training-app :is(.modes button,.suite-modes a){min-height:60px;padding:9px 14px}
 .training-app main:not(.app-shell){width:calc(100% - 20px);height:calc(100dvh - 20px);margin:10px auto;display:flex;flex-direction:column;min-height:0}
 .sight-app .card{flex:1;min-height:0;display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"settings question" "settings paper" "settings feedback" "settings actions";gap:0 12px}
 .sight-app .train-sidebar{display:flex;flex-direction:column;min-height:0;margin:0;overflow:auto}
 .sight-app .train-sidebar .ear-settings{display:block;padding:12px;border:0;flex:1}
 .sight-app .ear-settings .setting-group{margin:0;padding:8px 0;border:0;min-width:0}
 .sight-app .ear-settings .setting-group>span{font-size:11px;margin-bottom:4px;display:block}
 .sight-app .question{padding:12px 16px;min-height:0}
 .sight-app .question h1{font-size:22px;margin:6px 0}
 .sight-app .piano-source-switch{margin-top:4px;font-size:11px;color:#63706c}
 .sight-app .paper{min-height:0;display:flex;flex-direction:column;padding:0 10px 8px}
 .sight-app .score-paper,.sight-app .musicxml-trial-score{flex:1;min-height:0;height:100%}
 .sight-app .musicxml-frame{height:100%;min-height:0}
 .sight-app .score-progress{flex:none;margin-top:6px;font-size:12px}
 .sight-app .card footer{min-height:54px;padding:6px 14px;gap:10px}
 .sight-app .card footer button{min-height:40px;min-width:90px;padding:7px 12px;font-size:13px}
 .sight-app .card footer .secondary{min-width:60px}
 .sight-app main>.tip{display:none}
 .sight-app .train-sidebar .listen-panel{flex:none;align-self:stretch;min-height:126px;margin:0 8px;padding:10px 4px;grid-template-rows:82px auto;gap:5px;border-top:1px solid #dedbd3}
 .sight-app .listen-panel .play{width:82px;height:82px;min-height:82px;padding:9px 4px}
 .sight-app .listen-panel .play>span{margin-bottom:2px;font-size:18px}
 .sight-app .listen-panel .play b{font-size:12px}
 .sight-app .listen-panel .play small{font-size:10px;margin-top:2px}
 .sight-app .listen-panel .sound-rings i{width:90px;height:90px}
 .sight-app .listen-panel .sound-rings i:nth-child(2){width:108px;height:108px}
 .sight-app .listen-panel .sound-rings i:nth-child(3){width:124px;height:124px}
 .training-app .training-layout{width:calc(100% - 20px);height:calc(100dvh - 20px);margin:10px auto;padding:0;grid-template-columns:220px minmax(0,1fr);gap:12px;min-height:0;align-items:stretch}
 .training-app .settings-card{height:100%;min-height:0;padding:12px;overflow:auto;display:block}
 .training-app .practice-card{height:100%;min-height:0;overflow:auto}
 .scale-app .app-shell{height:100dvh;min-height:0;padding:10px;display:flex;flex-direction:column}
 .scale-app .suite-modes{width:100%;padding:0;flex:none}
 .scale-app .training-layout{width:100%;flex:1;height:auto;min-height:0;margin:0;grid-template-columns:220px minmax(0,1fr)}
 .scale-app .settings-card .setting-group{margin:10px 0 0;padding:0;border:0}
 .scale-app .settings-card>.listening-stage{min-height:150px;margin-top:10px;padding:12px 4px}
 .scale-app .practice-card{display:flex;flex-direction:column;overflow:auto}
 .scale-app .score-header{padding:12px 14px 4px}
 .scale-app .score-header h1{font-size:22px}
 .scale-app .note-strip{padding:4px 14px 10px}
 .scale-app .keyboard-section{padding:10px 14px}
 .scale-app .practice-footer{padding:10px 14px;margin-top:auto}
 .scale-app .app-shell>footer{display:none}
 .training-hub .hub-shell{height:100dvh;min-height:0;overflow:hidden;padding:10px}
 .training-hub .module-stage:not([hidden]){height:100%;display:flex;flex-direction:column}
 .training-hub .module-stage .frames{height:auto!important;min-height:0!important;flex:1}
 .training-hub .stage-toolbar,.training-hub .module-tabs{flex:none}
 .training-hub .stage-toolbar{min-height:44px;margin-top:6px}
 .training-hub .stage-toolbar :is(button,a){min-height:40px}
}
@media(min-width:700px) and (max-height:850px){
 .sight-app .ear-settings .setting-group{padding:4px 0}
 .sight-app .train-sidebar .ear-settings{padding:8px 10px}
 .sight-app .train-sidebar .listen-panel{min-height:110px;grid-template-rows:82px auto;padding:5px 4px;gap:2px}
 .scale-app .settings-card .choice-row button{min-height:36px;font-size:12px}
 .scale-app .settings-card .setting-group{margin-top:7px}
 .scale-app .settings-card>.listening-stage{min-height:130px;padding:8px 4px}
}
@media(min-width:700px){
 .sight-app .paper>*,.sight-app .score-progress{width:100%}
 .training-app .compact-options button{padding-left:3px;padding-right:3px}
 .training-app .compact-options button small{font-size:9px;white-space:nowrap}
 .scale-app .settings-card>.listening-stage{height:118px;min-height:118px;padding:8px 0;display:flex;flex-direction:column;justify-content:center;gap:4px;overflow:hidden}
 .scale-app .settings-card .play-button{width:78px;height:78px;min-height:78px;flex-shrink:0}
 .scale-app .settings-card .play-button>span{font-size:12px}.scale-app .settings-card .play-button small{font-size:10px}
 .scale-app .settings-card .listening-stage>p{font-size:10px;margin:3px 0}
 .scale-app .settings-card .section-label{display:none}
 .scale-app .practice-card>.question-head{min-height:40px;height:40px}
 .scale-app #score{min-width:0}
 .scale-app #score svg{max-height:190px;width:100%}
 .scale-app .keyboard-section #keyboard{height:105px}
 .scale-app .piano-key.white{height:105px}.scale-app .piano-key.black{height:67px}
 .scale-app .note-chip{min-width:34px;padding:5px 3px;min-height:36px}
 .scale-app .keyboard-caption{margin-bottom:8px}
 .scale-app .practice-footer{padding:8px 14px}
 .scale-app .audio-source,.scale-app .theory-tip{margin:4px 0;font-size:11px;line-height:1.4}
}
@media(min-width:700px){
 .scale-app .music-display{padding:4px 0;min-height:0}
 .scale-app .practice-footer{height:auto;min-height:0;flex:none}
 .scale-app .playback-controls{padding:6px 0;gap:10px;flex-wrap:nowrap}
 .scale-app .theory-tip{padding:6px 8px}
 .scale-app .settings-card>.listening-stage{margin-top:4px}
}
@media(min-width:700px) and (max-height:850px){
 .scale-app #scale-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
 .scale-app #scale-options button{font-size:11px;min-height:40px;padding:4px 2px}
 .scale-app #scale-options button:last-child:nth-child(odd){grid-column:auto}
 .scale-app .shift-row{margin-top:4px}
 .scale-app .settings-card .setting-group{margin-top:4px}
 .scale-app .settings-card>.listening-stage{height:100px;min-height:100px;padding:4px 0}
 .scale-app .settings-card .listening-stage>p{display:none}
}
@media(min-width:700px){
 .training-app:not(.scale-app) .app-shell{height:100dvh;min-height:0;padding:0;overflow:hidden}
 .training-hub{height:100dvh;overflow:hidden}
 .training-app:not(.sight-app) main:not(.app-shell)>.card{flex:1;min-height:0;grid-template-columns:220px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;gap:0 12px}
 .training-app:not(.sight-app) main:not(.app-shell)>.tip{display:none}
 .training-app:not(.sight-app) .train-sidebar{min-height:0;overflow:auto}
 .training-app:not(.sight-app) .train-sidebar .ear-settings{padding:12px}
 .training-app:not(.sight-app) .question{padding:12px 16px;min-height:0}
 .training-app:not(.sight-app) .question h1{font-size:24px}
 .training-app:not(.sight-app) .paper{min-height:0;overflow:auto}
}
@media(min-width:700px) and (max-height:850px){
 .scale-app .settings-card{padding:6px 10px}
 .scale-app #scale-options button{font-size:13px;min-height:40px}
 .scale-app .settings-card>.listening-stage{height:84px;min-height:84px;padding:3px 0}
}
@media(min-width:700px){
 .training-app .card>.question{grid-area:question!important}
 .training-app .card>.train-sidebar{grid-area:settings!important}
 .training-app .card>.paper{grid-area:paper!important}
 .training-app .card>.feedback{grid-area:feedback!important}
 .training-app .card>footer{grid-area:actions!important}
}