/* Shared lesson players: horizontal music scrolls without fitting to phone width. */
body.isolation-phone{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
.isolation-phone header{padding:8px 12px;gap:10px;flex:none}
.isolation-phone header img{width:24px;height:34px}
.isolation-phone header b{font-size:14px}.isolation-phone header p{display:none}
.isolation-phone main{width:100%;max-width:none;padding:8px 8px 80px;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.isolation-phone #kind,.isolation-phone #range,.isolation-phone .foot,.isolation-phone #notes,.isolation-phone #local{display:none}
.isolation-phone h1{font-size:25px;margin:3px 4px 5px;line-height:1.15}
.isolation-phone #lesson{margin:0 4px 8px;font-size:17px;line-height:1.35}
.isolation-phone #status{font-size:14px;padding:5px 8px;margin:0 0 6px;background:transparent}
.isolation-phone #score-viewport{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;background:white;border:1px solid #c6d3ca;border-radius:10px;position:relative;touch-action:pan-x pan-y}
.isolation-phone #score{width:720px;min-width:720px;border-radius:0;background:white}
.isolation-phone .at-cursor-bar{background:rgba(32,158,106,.08)}
/* alphaTab scales a 300px cursor to 3px; overriding it to 3px made the line nearly invisible. */
.isolation-phone #score .at-cursor-beat{width:300px!important;background:#08775f}
.isolation-phone .isolation-dock{position:fixed;bottom:0;left:0;right:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));display:flex;gap:8px;background:#f6f4ee;border-top:1px solid #c6d3ca;z-index:1200}
.isolation-phone .isolation-dock #play{font-size:23px;min-height:56px}
.isolation-phone .isolation-dock .secondary{flex:0 0 88px;font-size:16px;padding:8px 4px;background:#e1eee7;color:#113e33}
.isolation-phone #stop{display:none}
.isolation-phone #isolation-options{width:calc(100% - 24px);max-width:430px;max-height:calc(100dvh - 36px);border:1px solid #a5b9ae;border-radius:14px;padding:16px;font-size:18px;overflow:auto}
.isolation-phone #isolation-options::backdrop{background:rgba(15,32,28,.4)}
.isolation-phone #isolation-options h2{margin:0 0 16px;font-size:23px}
.isolation-phone #isolation-options .controls{padding:0;border:0;border-radius:0}
.isolation-phone #isolation-options label{display:block;line-height:1.5}
.isolation-phone #isolation-options select{font-size:18px;display:block;margin:5px 0 0;width:100%}
.isolation-phone #isolation-options .toggles label{display:flex;gap:10px}
.isolation-phone #isolation-options .bars,.isolation-phone #select,.isolation-phone #whole,.isolation-phone #track-label{display:none}
.isolation-phone #isolation-options nav{margin:20px 0;display:flex;font-size:15px}
.isolation-phone #isolation-options #pdf-link{font-size:17px}
.isolation-phone #close-options{width:100%;margin-top:18px}
.isolation-phone.score-expanded header,.isolation-phone.score-expanded h1,.isolation-phone.score-expanded #lesson,.isolation-phone.score-expanded #status{display:none}
@media(max-height:480px){.isolation-phone header{display:none}.isolation-phone h1{font-size:19px}.isolation-phone #lesson,.isolation-phone #status{display:none}.isolation-phone main{padding-bottom:70px}.isolation-phone .isolation-dock{padding-top:6px;padding-bottom:6px}.isolation-phone .isolation-dock #play{min-height:50px}}

.back-summary{display:block;font-size:15px;margin:0 4px 7px;color:#08775f}
.isolation-phone #isolation-options .bars.available{display:flex;gap:8px}
.isolation-phone #isolation-options #select.available,.isolation-phone #isolation-options #whole.available{display:block}
.isolation-phone #isolation-options .bars label{min-width:0;flex:1}.isolation-phone #isolation-options input[type=number]{width:100%;font-size:18px}
.isolation-phone #isolation-options .selection-hint{font-size:16px;line-height:1.4;margin:0 0 16px}
.lesson-summary main{max-width:650px}.lesson-summary h1{font-size:30px}.lesson-choices{display:grid;gap:14px;margin:25px 0}.lesson-choices a{display:block;border:1px solid #b1c6bb;border-radius:12px;background:white;padding:20px;color:#113e33;text-decoration:none;font-size:23px}.lesson-choices span{display:block;font-size:17px;margin-top:6px;font-weight:normal}
.isolation-phone.score-expanded .back-summary{display:none}

.zoom-buttons{display:flex;gap:8px;margin-top:6px}.zoom-buttons button{flex:1}.isolation-phone #isolation-options #notation-size{display:none}

.isolation-phone #view-help{font-size:14px;line-height:1.35;margin:3px 4px 8px;color:#476158}
.isolation-phone #view-help[hidden]{display:none}

.exercise-summary main{max-width:650px}.exercise-summary h1{font-size:30px;margin-top:10px}.exercise-summary p{font-size:19px;line-height:1.6}.exercise-summary .eyebrow{font-size:13px}.open-player{display:block;background:#08775f;color:white;text-align:center;padding:18px;border-radius:10px;margin-top:28px;font-size:23px;font-weight:bold;text-decoration:none}.exercise-summary .summary-note{font-size:16px;color:#476158;margin-top:18px}
/* Horizontal partials are already scaled; alphaTab's surface width can remain
   in unscaled units. Keep later bars visible beyond that reported width. */
.isolation-phone #score .at-surface{overflow:visible!important}

/* Fit the entire notation/TAB system to the browser's actual available height.
   This cannot hide the host application's toolbar. Fullscreen needs API success. */
.isolation-phone.score-expanded #score-viewport{border:0;border-radius:0}
.isolation-phone.score-expanded .isolation-dock{padding:2px max(4px,env(safe-area-inset-right)) calc(2px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));gap:6px}
.isolation-phone.score-expanded .isolation-dock #play{flex:0 1 150px;font-size:18px;min-height:44px;padding:6px}
.isolation-phone.score-expanded .isolation-dock .secondary{flex:0 0 80px;font-size:15px;min-height:44px;padding:6px}
.screen-help{font-size:16px;line-height:1.45;margin-top:6px;border-top:1px solid #c6d3ca;padding-top:12px}.screen-help h3{margin:0}.screen-help p{font-size:16px}.screen-help button{width:100%}

.isolation-phone.score-expanded #score-viewport{overflow-y:auto}

/* Immersive playback: only the rolling score occupies the page. No reserved dock. */
.isolation-phone.score-expanded main{padding:0;margin:0;border:0;border-radius:0;box-shadow:none}
.isolation-phone.score-expanded .isolation-dock{visibility:hidden;opacity:0;pointer-events:none;position:fixed;bottom:env(safe-area-inset-bottom);left:env(safe-area-inset-left);right:auto;width:auto;border:0;border-radius:8px;background:rgba(246,244,238,.96);z-index:1200}
.isolation-phone.score-expanded.controls-visible .isolation-dock{visibility:visible;opacity:1;pointer-events:auto}
.isolation-phone.score-expanded #score-viewport{background:white;margin:0;border:0;border-radius:0}

.isolation-phone.score-expanded .renderer-footer{visibility:hidden}

/* The view is borderless; notation size belongs to the player, not the viewport. */
.isolation-phone.score-expanded #score-viewport,.isolation-phone.score-expanded #score{outline:none!important;box-shadow:none;border:0;border-radius:0;padding:0}
.isolation-phone.score-expanded .isolation-dock{flex-wrap:wrap;max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));gap:4px}
.isolation-phone.score-expanded .isolation-dock .secondary{flex:0 0 72px}
#quick-zoom-controls{display:flex;align-items:center;justify-content:center;gap:16px;flex-basis:100%}
#quick-zoom-controls[hidden]{display:none}
#quick-zoom-controls button{min-width:48px;min-height:44px;font-size:22px;padding:4px}
#zoom-value{min-width:50px;text-align:center}

/* Floating touch controls reserve no space and have no surrounding panel. */
.isolation-phone main{padding-bottom:8px}
.isolation-phone .isolation-dock,.isolation-phone.score-expanded .isolation-dock{display:flex;flex-wrap:nowrap;position:fixed;left:50%;right:auto;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 24px);padding:0;gap:5px;background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible}
.isolation-phone .isolation-dock button,.isolation-phone.score-expanded .isolation-dock button{flex:0 0 auto;min-width:44px;min-height:44px;font-size:15px;padding:8px;border-radius:9px;border:1px solid rgba(25,70,55,.25);background:rgba(246,244,238,.72);color:#113e33;touch-action:manipulation}
.isolation-phone .isolation-dock #play,.isolation-phone.score-expanded .isolation-dock #play{min-width:57px;font-size:16px;min-height:44px;background:rgba(8,119,95,.76);color:white}
.isolation-phone .isolation-dock #zoom-out,.isolation-phone .isolation-dock #zoom-in{font-size:22px;padding:4px}
.isolation-phone .isolation-dock .secondary,.isolation-phone.score-expanded .isolation-dock .secondary{flex:0 0 auto}
.isolation-phone .isolation-dock #play,.isolation-phone.score-expanded .isolation-dock #play{flex:0 0 57px}

.isolation-phone.score-expanded .isolation-dock{top:max(env(safe-area-inset-top),var(--score-controls-top,12px));bottom:auto}

/* Center the complete system in a clear reading area; controls never cover music. */
.isolation-phone.score-expanded main{padding:20px 20px 124px}
.isolation-phone.score-expanded #score-viewport{overflow-y:hidden}
.isolation-phone.score-expanded #score{min-width:0}
.isolation-phone.score-expanded .isolation-dock{top:auto;bottom:calc(12px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,auto);width:max-content;max-width:calc(100vw - 24px);gap:6px}
.isolation-dock button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;display:block;margin:auto}
.quick-speed{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;font-size:14px;color:#173e34}
.quick-speed input{width:160px;min-height:44px;margin:0;accent-color:#08775f;touch-action:pan-y}
.quick-speed output{display:inline-block;min-width:38px}
@media(min-width:640px){.isolation-phone.score-expanded main{padding:16px 24px 80px}.isolation-phone.score-expanded .isolation-dock{display:flex;align-items:center}.quick-speed{margin-left:10px}.quick-speed input{width:140px}}

body.isolation-phone,.isolation-phone.score-expanded main{background:white}
/* Symmetric clearance keeps the music centered in the entire available view. */
.isolation-phone.score-expanded main{padding:112px 20px}
@media(min-width:640px){.isolation-phone.score-expanded main{padding:64px 24px}}

/* Wider user-controlled range: no fit-to-gutters cap, score can pan behind controls. */
.isolation-phone.score-expanded main{padding:0}
.isolation-phone.score-expanded #score-viewport{overflow:auto}
.isolation-phone .isolation-dock button,.isolation-phone.score-expanded .isolation-dock button{background:#fff;border:1px solid #d9e2de;border-radius:999px;box-shadow:0 2px 8px rgba(19,42,32,.12);-webkit-tap-highlight-color:transparent}
.isolation-phone .isolation-dock #play,.isolation-phone.score-expanded .isolation-dock #play{background:#08775f}
.isolation-phone .isolation-dock #zoom-out,.isolation-phone .isolation-dock #zoom-in{width:44px;height:44px}
.quick-speed{background:white;border-radius:999px;padding:0 12px;box-shadow:0 2px 8px rgba(19,42,32,.12)}