/* Keep controls stationary while the selected notation is being engraved. */
.score-viewport{height:clamp(220px,40vh,440px)}
.loop-range{display:block;padding:15px 19px 13px;background:#f1f5e9;border-top:1px solid #dce5cf}
.range-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.range-heading strong{font-size:12px;font-weight:500;color:#536b42}
.loop-range .range-heading button{font-size:11px;color:#536d40;padding:5px 0;border-bottom:1px solid #aabf95;border-radius:0;background:none}
#range-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
#range-form label{display:flex;flex-direction:column;gap:5px;font-size:10px;color:#768b63}
#range-form input{width:78px;min-height:36px;padding:7px 9px;border:1px solid #c9d6b9;border-radius:6px;background:#fffef8;color:#455b37;font-family:inherit;font-size:14px}
.loop-range #range-apply{min-height:36px;padding:9px 15px;background:#657e50;border:1px solid #657e50;border-radius:6px;color:#fffef8;font-size:11px}
.loop-range button:hover{filter:brightness(.94)}
.range-shortcuts{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-left:3px}
.loop-range .range-shortcuts button{min-height:36px;padding:8px 10px;border:1px solid #d8e1ca;border-radius:6px;background:transparent;font-size:10px;color:#6c8159}
.range-foot{display:flex;justify-content:space-between;gap:10px;margin-top:12px;line-height:1.6;color:#80936d;font-size:10px}
.range-foot .repeat-count{margin-left:auto;white-space:nowrap}
#range-error{margin:9px 0 0;color:#9c513b;font-size:11px;line-height:1.6}
#range-error:empty{display:none}
#complete:disabled{opacity:.45;cursor:default}
.structure-heading,.phrase-editor-row{grid-template-columns:minmax(0,1fr) 110px 112px}
.phrase-row-actions{flex-direction:column;gap:5px}
.phrase-row-actions button{width:100%;height:auto;min-height:31px;font-size:10px;padding:7px 6px}
.phrase-row-actions .phrase-merge{background:#e1ebd4;color:#58713f}
.phrase-row-actions button:disabled{cursor:default}
@media(max-width:720px){
 .score-viewport{height:300px}
 .loop-range{padding:14px 13px}
 .range-heading{align-items:start;gap:8px}
 .range-heading strong{font-size:11px;line-height:1.8}
 .loop-range .range-heading button{font-size:10px;white-space:nowrap}
 #range-form{gap:8px}
 #range-form input{width:72px;font-size:16px;min-height:40px}
 .loop-range #range-apply{min-height:40px}
 .range-shortcuts{margin:2px 0 0;flex-basis:100%}
 .range-foot{font-size:9px}
 .structure-heading{grid-template-columns:minmax(0,1fr) 103px}
 .structure-heading>span:last-child{display:none}
 .phrase-editor-row{grid-template-columns:minmax(0,1fr) 103px;gap:9px;padding:12px 5px}
 .phrase-row-actions{grid-column:1/-1;flex-direction:row;justify-content:flex-end}
 .phrase-row-actions button{width:auto;min-height:35px;padding:8px 13px}
}