/* Mobile Mode Lab uses one fixed stage and explicit views. The site palette remains authoritative. */
.mobile-showcase-label,.mobile-showcase-play,.mobile-section-nav,.mobile-pattern-open{display:none}
@media(max-width:760px){
 html,body{height:100%;overflow:hidden;overscroll-behavior:none}
 body{height:100dvh;display:flex;flex-direction:column}
 body>.page-header{flex:0 0 52px;height:52px;min-height:52px;padding-inline:14px}
 .page-header .brand{font-size:15px;letter-spacing:-.015em}.page-header button{min-height:40px}
 body>main.container,body.mode-lab-integrated>main.container{flex:1 1 auto;min-height:0;height:auto;display:flex;flex-direction:column;overflow:hidden;max-width:none;padding:0 12px env(safe-area-inset-bottom,0px)}
 .page-intro,.page-footer{display:none}
 .tabs{flex:0 0 45px;min-height:45px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin:0 0 4px;border-bottom:1px solid var(--site-line)}
 .tabs button{min-height:44px;min-width:0;padding:7px 0;font-size:14px}
 #explore-view,#quiz-view{flex:1 1 auto;min-height:0;overflow:hidden}
 #explore-view{display:flex;flex-direction:column;gap:4px}
 #explore-view .selectors{order:1;flex:0 0 58px;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.5fr) 68px;align-items:end;gap:5px;margin:0;max-width:none}
 #explore-view .selectors>label:first-child,#explore-view .selectors .mode-select-label{grid-column:auto}
 #explore-view .selectors label{font-size:10px;gap:1px;line-height:1.1}
 #explore-view .selectors select{height:42px;min-height:42px;padding:4px 20px 4px 7px;border-radius:9px;font-size:12px}
 #explore-view>.transport-actions{order:3;flex:0 0 44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:0!important;padding:0!important;border:0!important}
 #explore-view>.transport-actions button{min-width:0;min-height:44px;padding:2px 3px;border-radius:9px;font-size:12px;font-weight:600;line-height:1.2;white-space:normal}
 #explore-view>.showcase-strip{order:4;flex:0 0 54px;min-height:54px;display:flex;align-items:center;gap:8px;margin:0;padding:5px 10px;border-radius:12px;position:relative}
 .showcase-copy{flex:0 0 auto}.showcase-copy .eyebrow,.showcase-copy p,.showcase-buttons{display:none}.showcase-copy strong{font-size:12px;white-space:nowrap}
 .mobile-showcase-label{display:flex;flex:1;min-width:0;font-size:0;gap:0}.mobile-showcase-label select{min-height:42px;height:42px;width:100%;padding:4px 26px 4px 9px;font-size:12px;border-radius:9px}
 .mobile-showcase-play{display:block;min-width:48px;min-height:44px;padding:4px 7px;border-radius:9px;font-size:11px;font-weight:650}
 .showcase-status{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 .explorer-grid,.study-column{display:contents}
 #explore-view .ring-panel,#explore-view .score-panel,#explore-view .comparison-panel,#explore-view .transport-panel,#explore-view #lesson-area{display:none;order:2;flex:1 1 auto;min-height:0;overflow:hidden;margin:0;border-radius:18px}
 #explore-view .ring-panel,#explore-view .score-panel,#explore-view .comparison-panel,#explore-view .transport-panel{padding:7px 12px}
 body[data-mobile-panel=ring] #explore-view .ring-panel{display:flex;flex-direction:column;align-items:center;justify-content:space-between}
 .ring-panel .panel-heading{width:100%;min-height:42px}.ring-panel .panel-heading h2{font-size:15px}.ring-panel .segmented{padding:2px}.ring-panel .segmented button{min-height:40px;min-width:46px;padding:4px 7px}
 #explore-view .ring{width:min(34dvh,calc(100vw - 88px),300px);max-width:100%;margin:0;flex:0 1 auto}
 .ring-note{width:44px;height:44px;min-height:44px;font-size:11px}.ring-note span{font-size:9px}
 .ring-center>span{font-size:clamp(25px,7vw,34px)}.ring-center>strong{font-size:clamp(12px,3.5vw,17px);margin:2px 0}.ring-center>small{font-size:9px}
 .ring-legend{width:100%;justify-content:space-between;gap:3px;font-size:9px;line-height:1.1;white-space:nowrap}.ring-legend span{gap:3px}.ring-legend i{width:10px;height:10px;flex:0 0 10px}.ring-caption{display:none}
 body[data-mobile-panel=score] #explore-view .score-panel{display:flex;flex-direction:column;gap:4px}
 .score-panel .panel-heading{flex:0 0 38px;min-height:38px}.score-panel .panel-heading h2{font-size:17px}.score-panel .panel-heading .eyebrow{font-size:9px;margin:0}.score-panel .panel-heading>.small{display:none}.score-panel .panel-heading>.score-feature-key.has-features{display:inline-flex;align-items:center;font-size:10px;max-width:76px;text-align:right;line-height:1.1}.score-description,.score-panel .scroll-hint{display:none}
 .score-presentation{position:relative;flex:0 0 138px;min-height:138px;width:100%;margin-top:auto}
 .score-panel .score-scroll{display:none}
 .mobile-compact-score{display:block;width:100%;height:138px;overflow:hidden}
 .degree-buttons{position:absolute;inset:0;display:block;margin:0;width:auto;height:138px;z-index:1}
 .degree-buttons button{position:absolute;top:0;width:100%;max-width:none;min-width:0;min-height:138px;height:138px;padding:0;border:0;border-radius:0;background:transparent!important;color:transparent!important;box-shadow:none;font-size:0}
 .degree-buttons button.tonic,.degree-buttons button.feature{border:0}
 .degree-buttons button span,.degree-buttons button small{display:none}
 .degree-buttons button:hover:not(:disabled),.degree-buttons button:focus-visible,.degree-buttons button.playing{background:transparent!important;box-shadow:inset 0 0 0 1px var(--site-accent)}
 .degree-buttons button:focus-visible{outline:2px solid var(--site-accent);outline-offset:-2px}
 .note-readout{margin-top:10px;margin-bottom:auto;min-height:30px;padding-top:3px;font-size:11px}.score-panel.dense-score .note-readout{display:flex;align-items:center;gap:6px;min-height:44px}.score-panel.dense-score #current-note{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 body[data-mobile-panel=compare] #explore-view .comparison-panel{display:flex;flex-direction:column;gap:7px;justify-content:flex-start}
 .comparison-heading{margin:0;align-items:end;gap:8px}.comparison-heading label{font-size:11px}.comparison-heading select{height:44px}.comparison-heading button{min-height:44px;font-size:12px}
 .comparison-panel>p,.comparison-panel>p.small{font-size:12px;line-height:1.45;margin:0}.difference-chips{margin:3px 0;gap:5px}.difference-chips span{font-size:11px;padding:3px 6px}
 body[data-mobile-panel=settings] #explore-view .transport-panel{display:flex;flex-direction:column;gap:6px}
 .transport-settings{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0;align-items:end}.transport-settings>label:first-child{width:auto}.transport-settings>label:first-child input{min-height:35px}.transport-settings label{font-size:11px}.transport-settings .check{align-self:end}.transport-settings select{min-height:42px}
 #bass-description{font-size:11px;line-height:1.3}.melody-details{display:flex;flex-direction:column;gap:4px;padding-top:6px}.melody-details label{font-size:11px}.melody-details select{min-height:42px}.melody-details>p,.melody-details details{display:none}.mobile-pattern-open{display:block;min-height:44px;text-align:left;font-size:12px}
 #mobile-pattern-dialog{width:calc(100vw - 24px);max-width:500px;max-height:calc(100dvh - 40px);overflow:auto;padding:18px;border-radius:18px}
 #mobile-pattern-dialog .panel-heading{align-items:center}#mobile-pattern-dialog .panel-heading button{min-height:44px}
 #mobile-pattern-dialog p{font-size:13px;line-height:1.5;margin:10px 0}#mobile-pattern-dialog .melody-row{flex-wrap:wrap;overflow:visible;gap:4px}#mobile-pattern-dialog .melody-bar{flex-wrap:wrap;gap:3px}
 body[data-main-view=learn] #explore-view .selectors,body[data-main-view=learn] #explore-view .showcase-strip{display:none}
 body[data-mobile-panel=lesson] #explore-view #lesson-area{display:flex;flex-direction:column;gap:6px;padding:4px 0}
 .lesson-picker{margin:0;min-height:54px;gap:6px}.lesson-picker label{font-size:11px}.lesson-picker select{min-height:42px}.lesson-picker span{font-size:11px}
 .lesson-card{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;margin:0;padding:15px;border:1px solid var(--site-line);border-radius:16px}.lesson-card h2{font-size:19px}.lesson-question{font-size:15px;margin:8px 0}.lesson-card p:not(.lesson-question){font-size:13px;line-height:1.5}.lesson-next{margin-top:auto;padding:8px 0 0;gap:6px}.lesson-next button{min-height:44px}
#mobile-section-nav,#mobile-quiz-nav{display:flex;flex:0 0 50px;min-height:50px;gap:3px;padding:4px 0 0;border-top:1px solid var(--site-line)}
 #mobile-section-nav{order:5}#mobile-quiz-nav{order:2}
 .mobile-section-nav button{flex:1;min-width:0;min-height:44px;padding:5px 3px;border:0;border-radius:8px;background:transparent;color:var(--site-muted);font-size:12px;font-weight:600}
 .mobile-section-nav button[aria-current=page]{background:var(--site-soft);color:var(--site-accent)}
 #quiz-view{display:flex;flex-direction:column;gap:4px}.quiz-layout{display:contents}.quiz-main,.progress-panel{display:none;flex:1 1 auto;min-height:0;overflow:hidden;margin:0;padding:12px;border-radius:18px}
 body[data-mobile-quiz-panel=question] .quiz-main,body[data-mobile-quiz-panel=stats] .progress-panel{display:flex;flex-direction:column}
 .quiz-main .panel-heading{flex:0 0 31px}.quiz-main .panel-heading .eyebrow{display:none}.quiz-main h1{font-size:18px}.quiz-number{font-size:18px}
 .quiz-setup{display:grid;grid-template-columns:1fr 68px;gap:5px;margin:5px 0}.quiz-setup label{font-size:10px;gap:1px}.quiz-setup select{height:40px;min-height:40px;padding:3px 6px;font-size:12px}.quiz-setup label:nth-child(2){grid-column:1/-1;grid-row:2}.quiz-setup label:last-child{grid-column:2;grid-row:1}
 .quiz-prompt{font-size:13px;line-height:1.35;margin:5px 0}.blind-stage{min-height:70px;padding:7px;gap:0}.blind-stage p{font-size:13px}.blind-stage .small{font-size:10px}.listening-glyph{height:20px;margin:0}.listening-glyph i{height:10px}.listening-glyph i:nth-child(2n){height:15px}.listening-glyph i:nth-child(3){height:20px}
 .quiz-play{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin:6px 0}.quiz-play button{min-height:44px;padding:4px;font-size:11px}.quiz-choices{display:flex;gap:5px;margin:6px 0}.quiz-choices button{flex:1;min-width:0;min-height:48px;padding:4px;font-size:13px}.quiz-main>#quiz-uncertain{align-self:flex-start;min-height:40px;padding:3px 10px;font-size:12px}.hint{padding:6px;margin:4px 0;font-size:11px;line-height:1.35}
 .quiz-main:has(#quiz-feedback:not([hidden])) .quiz-setup,.quiz-main:has(#quiz-feedback:not([hidden])) .blind-stage,.quiz-main:has(#quiz-feedback:not([hidden])) .quiz-prompt,.quiz-main:has(#quiz-feedback:not([hidden])) .quiz-play,.quiz-main:has(#quiz-feedback:not([hidden])) .hint,.quiz-main:has(#quiz-feedback:not([hidden])) #quiz-uncertain{display:none}
 .quiz-feedback{margin:7px 0;padding:10px;overflow:hidden}.quiz-feedback h3{font-size:15px;margin-bottom:4px}.quiz-feedback p{font-size:12px;line-height:1.4;margin:3px 0}.quiz-feedback .score-scroll{display:block;overflow:hidden;max-height:83px;margin:5px 0 0;padding:0}.quiz-feedback .score-scroll svg{width:100%;min-width:0;height:auto}.quiz-feedback .score-scroll+p{font-size:10px}.quiz-footer{display:flex;gap:6px;margin-top:auto}.quiz-footer button{min-height:44px;flex:1;font-size:12px}
 .progress-panel .eyebrow{font-size:10px}.progress-panel h2{font-size:18px;margin-bottom:10px}.progress-panel .stat-line{padding:6px 0}.progress-panel>p{font-size:11px;line-height:1.4;margin:5px 0}.progress-panel button{min-height:44px;margin-top:8px}.progress-panel details{margin-top:5px}.progress-panel summary{min-height:34px}
 dialog{max-height:calc(100dvh - 28px);overflow:auto}
}
@media(max-width:760px) and (max-height:550px){
 html,body{height:auto;min-height:100%;overflow-y:auto;overscroll-behavior:auto}
 body{min-height:100dvh;height:auto}
 body>main.container,body.mode-lab-integrated>main.container{flex:none;min-height:calc(100dvh - 52px);height:auto;overflow:visible}
 #explore-view,#quiz-view{flex:none;min-height:0;height:auto;overflow:visible}
 #explore-view .ring-panel,#explore-view .score-panel,#explore-view .comparison-panel,#explore-view .transport-panel,#explore-view #lesson-area,.quiz-main,.progress-panel{flex:none;min-height:290px;height:auto;overflow:visible}
 #explore-view .ring{width:min(calc(100vw - 88px),240px)}
}
@media(max-width:760px) and (max-height:700px){.ring-panel .ring-legend{display:none}}

/* Fourth independent music tradition section. */
.mode-lab-integrated .tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
.mode-lab-integrated[data-main-view=traditions] #explore-view,.mode-lab-integrated[data-main-view=traditions] #quiz-view,.mode-lab-integrated[data-main-view=traditions] #mobile-learn-nav{display:none!important}
.mode-lab-integrated[data-main-view=traditions] #traditions-view{display:flex;flex:1 1 auto;min-height:0}
.mode-lab-integrated[data-main-view=traditions] .tradition-content{flex:1 1 auto;min-height:0}