/* Explicit mobile field geometry, independent of host-page label/select styles. */
@media(max-width:900px){
 #details>.detail-card:not(.advanced-core){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;min-width:0!important}
 #details>.detail-card:not(.advanced-core)>label:not(.volume-field){display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;width:auto!important;min-width:0!important;max-width:100%!important;height:auto!important;gap:6px!important;padding:0!important;margin:0!important;float:none!important}
 #details>.detail-card:not(.advanced-core)>label select{display:block!important;position:static!important;box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;flex:none!important;height:42px!important;min-height:42px!important;margin:0!important;font-size:13px!important}
 #details .move-step-controls{width:100%!important;min-width:0!important;max-width:100%!important;display:flex!important}
 #details .move-step-controls select{width:0!important;flex:1 1 0!important}
 #details .volume-field{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-column:1/-1!important;min-width:0!important;width:100%!important}
 #details .volume-field input{grid-column:1/-1!important;width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
}
/* Touch landscape uses available viewport height, never a fixed desktop canvas. */
@media(pointer:coarse) and (orientation:landscape),(max-width:1000px) and (max-height:600px){
 body.practice-fullscreen .practice-workspace{position:fixed!important;inset:0!important;height:100dvh!important;max-height:100dvh!important;overflow-y:auto!important;overflow-x:hidden!important;padding:8px max(10px,env(safe-area-inset-right)) 14px max(10px,env(safe-area-inset-left))!important;display:flex!important;gap:6px!important;-webkit-text-size-adjust:100%}
 body.practice-fullscreen .practice-workspace>.player-panel{display:grid!important;grid-template-columns:minmax(160px,1fr) minmax(0,2fr)!important;grid-template-rows:auto auto!important;flex:0 0 auto!important;min-height:0!important;height:auto!important;padding:0!important}
 body.practice-fullscreen .player-heading{grid-column:1/-1!important;grid-row:1!important;height:auto!important;min-height:28px!important}
 body.practice-fullscreen .player-panel .vowel-section{grid-column:1!important;grid-row:2!important;max-height:none!important;min-height:0!important;padding:5px!important}
 body.practice-fullscreen .player-panel .current-box{grid-column:2!important;grid-row:2!important;height:auto!important;min-height:140px!important;padding:5px!important}
 body.practice-fullscreen .player-panel .player-info{display:none!important}
 body.practice-fullscreen .big-vowel{font-size:44px!important}
 body.practice-fullscreen .practice-workspace>.instrument-panel{flex:0 0 auto!important;min-height:0!important;margin:0!important;padding:0!important}
 body.practice-fullscreen .staff-wrap{height:105px!important}
 body.practice-fullscreen .keyboard{height:110px!important}
 body.practice-fullscreen .transport{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;height:auto!important;min-height:60px!important;gap:5px!important}
 body.practice-fullscreen .player-range-settings{position:static!important;margin:0!important;padding-top:8px!important}
 body.practice-fullscreen .mobile-bottom,body.practice-fullscreen .mobile-screen-tabs{display:none!important}
 body.practice-fullscreen #toggleFullscreen{display:block!important}
}

@media(max-width:900px){
 #details>.detail-card:not(.advanced-core)>label .move-step-controls{display:grid!important;grid-template-columns:24px minmax(0,1fr) 24px!important;gap:3px!important;overflow:hidden}
 #details>.detail-card:not(.advanced-core)>label .move-step-controls select{width:100%!important;min-width:0!important;max-width:100%!important;flex:none!important;padding:4px!important}
 #details>.detail-card:not(.advanced-core)>label .move-step-controls button{width:24px!important;min-width:0!important;padding:0!important;margin:0!important;height:42px!important}
}