/* One-screen clef drawing workspace. */
html,body{min-height:0;height:100%;box-sizing:border-box}
body{display:flex;flex-direction:column;margin:0}
.app-header{flex:none}
.app-header .logo-icon,.app-header .logo-text p{display:none}
.app-header .logo-text h1{font-size:20px;white-space:nowrap}
.app-header .logo-area{padding-right:235px}
.trainer-studio-brand{position:fixed;top:14px;right:65px;z-index:1000;display:flex;align-items:center;gap:8px;direction:ltr;min-height:38px;white-space:nowrap;font:800 17px/1.2 system-ui;color:var(--text-primary,#eef4fc)}
.trainer-studio-brand img{width:30px;height:30px;flex:none}
body>.main-layout{flex:1;min-height:0;margin:8px auto;padding:0 14px;gap:8px}
.clef-tabs-container{flex:none;gap:8px}
.clef-tabs-container .clef-tab-btn{padding:7px 12px;gap:9px}
.clef-tab-desc{font-size:11px}
.main-layout>.workspace-card{flex:1;min-height:0;padding:10px;gap:7px}
.workspace-top-bar{padding-bottom:6px;gap:7px;flex:none}
.steps-nav-bar{flex:none;gap:6px}
.instruction-banner{flex:none;padding:7px 10px}
#canvas-wrapper{flex:1;min-height:100px;height:auto;max-height:none;aspect-ratio:auto;margin:0}
.toolbar-bottom{flex:none;gap:7px;padding-top:5px}
body>footer{flex:none;padding:4px!important;margin:0!important;font-size:10px!important;line-height:14px!important}
@media(max-width:1000px){.app-header .logo-area{padding-right:0}.app-header .logo-text h1{font-size:17px}.app-header .header-inner{padding-top:45px}.trainer-studio-brand{font-size:14px}}
@media(max-width:768px){.app-header{padding-top:0}.app-header .header-inner{padding-top:58px}.main-layout>.workspace-card{padding:7px}.clef-tab-desc{display:none}.clef-tabs-container .clef-tab-btn{padding:5px;gap:4px}.clef-tab-title{font-size:12px}.header-actions{gap:4px}.header-actions .btn-action{padding:5px;font-size:11px}}

/* Clear hierarchy: key, practice mode, instruction, then a centered drawing board. */
#btn-play-tone,#btn-sound-toggle{display:none!important}
html body .app-header #spec-btn{position:fixed!important;left:14px!important;right:auto!important;top:14px!important;width:38px!important;height:38px!important}
.app-header .trainer-language{position:fixed;left:62px;top:14px;z-index:1000;min-width:44px;height:38px;justify-content:center;padding:6px 10px;font-size:13px}
.app-header .header-actions{padding-left:112px}
.main-layout{max-width:1360px}
.main-layout>.workspace-card{gap:9px;border-radius:16px;padding:12px;background:var(--bg-card)}
.workspace-top-bar{padding-bottom:8px}
.steps-nav-bar{justify-content:center;gap:7px}
.instruction-banner{padding:9px 14px;border-radius:10px}
#canvas-wrapper{margin-inline:auto!important;align-self:center;box-shadow:0 3px 12px #0003;border:1px solid #a7b4c2}
.toolbar-bottom{padding:6px 0 0;border-top:1px solid var(--border-color)}
.tool-group{gap:6px}
.tool-btn{padding:6px 10px;font-size:12px}
.clef-tab-icon{font-size:36px}
.clef-tabs-container .clef-tab-btn{border-radius:13px}
@media(max-width:1000px){.app-header .header-actions{padding-left:0}.workspace-top-bar{gap:6px}.mode-btn{font-size:12px;padding:5px 9px}}

.trainer-practice-rail{display:flex;flex-direction:column;gap:10px;min-width:0}
@media(min-width:900px){
 .main-layout>.workspace-card{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:center;gap:18px;direction:ltr}
 #canvas-wrapper{grid-column:1;grid-row:1;flex:none;min-height:0;justify-self:center}
 .trainer-practice-rail{grid-column:2;grid-row:1;direction:rtl;align-self:stretch;justify-content:center;gap:9px}
 .trainer-practice-rail .workspace-top-bar{flex-direction:column;align-items:stretch;gap:7px}
 .trainer-practice-rail .clef-active-info{flex-wrap:wrap;gap:5px}
 .trainer-practice-rail .clef-name-large{font-size:18px}
 .trainer-practice-rail .mode-toggles{flex-wrap:wrap}
 .trainer-practice-rail .mode-btn{flex:1;padding:5px 7px;font-size:11px}
 .trainer-practice-rail .steps-nav-bar{flex-wrap:wrap;gap:5px}
 .trainer-practice-rail .steps-nav-bar button{padding:5px 7px;font-size:11px}
 .trainer-practice-rail .instruction-banner{padding:7px 9px;flex:none}
 .trainer-practice-rail .instruction-text{font-size:12px;line-height:1.4}
 .trainer-practice-rail .toolbar-bottom{flex-wrap:wrap;gap:7px}
 .trainer-practice-rail>div[style]{padding:6px!important;gap:5px!important}
 .trainer-practice-rail .tool-btn{padding:4px 7px;font-size:11px}
}
@media(max-width:899px){.main-layout>.workspace-card{overflow:auto}.trainer-practice-rail{gap:7px}#canvas-wrapper{flex:none}}

#btn-check-accuracy{display:none!important}

@media(min-width:900px) and (max-height:700px){
 .trainer-practice-rail{gap:5px;min-height:0}
 .trainer-practice-rail>*{zoom:.84}
 .trainer-practice-rail .workspace-top-bar{padding-bottom:4px;gap:4px}
 .trainer-practice-rail .steps-nav-bar{gap:3px}
 .trainer-practice-rail .instruction-banner{padding:5px 7px}
 .trainer-practice-rail .toolbar-bottom{padding-top:4px;gap:5px}
}