/* Desktop Mode Lab: one task and one notation surface at a time. Site theme tokens stay authoritative. */
@media (min-width:761px){
 body.has-site-shell.mode-lab-integrated{--site-bottom:0px;padding-bottom:0}
 body.has-site-shell.mode-lab-integrated>main.container{display:flex;flex-direction:column;overflow:hidden;max-width:none;padding:0 clamp(18px,2.6vw,44px) 10px}
 .mode-lab-integrated .page-intro,.mode-lab-integrated .page-footer{display:none}
 .mode-lab-integrated .tabs{flex:0 0 48px;width:min(100%,1180px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0 auto 9px;border-bottom:1px solid var(--site-line)}
 .mode-lab-integrated .tabs button{min-height:44px;width:100%;padding:7px 10px;text-align:center;font-size:14px}
 .mode-lab-integrated #explore-view,.mode-lab-integrated #quiz-view{width:min(100%,1180px);flex:1 1 auto;min-height:0;margin:0 auto;overflow:hidden}
 .mode-lab-integrated #explore-view[hidden],.mode-lab-integrated #quiz-view[hidden]{display:none!important}
 .mode-lab-integrated #explore-view{display:flex;flex-direction:column;gap:8px}
 .mode-lab-integrated #explore-view>.selectors{order:1;flex:0 0 62px;width:100%;max-width:none;grid-template-columns:minmax(150px,.9fr) minmax(230px,1.5fr) minmax(100px,.45fr);gap:10px;margin:0;align-items:end}
 .mode-lab-integrated #explore-view>.selectors label{gap:2px;font-size:11px;line-height:1.2}
 .mode-lab-integrated #explore-view>.selectors select{height:44px;min-height:44px;padding-block:5px}
 .mode-lab-integrated .explorer-grid,.mode-lab-integrated .study-column{display:contents}
 .mode-lab-integrated #explore-view .ring-panel,.mode-lab-integrated #explore-view .score-panel,.mode-lab-integrated #explore-view .comparison-panel{display:none;order:2;flex:1 1 auto;min-height:0;margin:0;padding:16px 22px;overflow:hidden;border-radius:16px}
 .mode-lab-integrated #explore-view .transport-panel{display:none}
 .mode-lab-integrated[data-mobile-panel=ring] #explore-view .ring-panel{display:flex;flex-direction:column;align-items:center;justify-content:space-between}
 .mode-lab-integrated[data-mobile-panel=ring] #explore-view .ring-panel>.panel-heading{width:100%;flex:0 0 auto}
 .mode-lab-integrated[data-mobile-panel=ring] #explore-view .ring{flex:0 1 auto;width:min(45dvh,440px,calc(100vw - 160px),calc(100dvh - 480px));max-width:100%;margin:0 auto}
 .mode-lab-integrated[data-mobile-panel=ring] #explore-view .ring-legend{flex:0 0 auto;margin-top:4px}
 .mode-lab-integrated[data-mobile-panel=ring] #explore-view .ring-caption{display:none}
 .mode-lab-integrated[data-mobile-panel=score] #explore-view .score-panel{display:flex;flex-direction:column;gap:8px}
 .mode-lab-integrated[data-mobile-panel=score] #explore-view .score-panel>.panel-heading{flex:0 0 auto}
 .mode-lab-integrated[data-mobile-panel=score] #explore-view .score-description{flex:0 0 auto;margin:0;font-size:12px}
 .mode-lab-integrated[data-mobile-panel=score] #explore-view .score-presentation{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;margin:0}
 .mode-lab-integrated[data-mobile-panel=score] #explore-view .score-scroll{width:100%;max-width:100%;max-height:100%;overflow:hidden;margin:0;padding:0}
 .mode-lab-integrated[data-mobile-panel=score] #explore-view .score-scroll svg{width:100%;min-width:0;height:auto;max-height:min(38dvh,320px)}
 .mode-lab-integrated[data-mobile-panel=score] #explore-view .degree-buttons{flex:0 0 auto;justify-content:center;margin-top:8px}
 .mode-lab-integrated[data-mobile-panel=score] #explore-view .note-readout{flex:0 0 auto;margin-top:0}
 .mode-lab-integrated[data-mobile-panel=compare] #explore-view .comparison-panel{display:flex;flex-direction:column;gap:5px}
 .mode-lab-integrated[data-mobile-panel=compare] #explore-view .comparison-heading{flex:0 0 auto;grid-template-columns:minmax(0,1fr) 112px 76px;align-items:end;gap:8px;margin:0}
 .mode-lab-integrated[data-mobile-panel=compare] #explore-view .comparison-heading select{height:44px}
 .mode-lab-integrated[data-mobile-panel=compare] #explore-view .comparison-heading button{min-height:44px}
 .mode-lab-integrated[data-mobile-panel=compare] #explore-view #feature-explanation{flex:0 0 auto;font-size:13px;line-height:1.35;margin:0;max-height:37px;overflow:hidden}
 .mode-lab-integrated[data-mobile-panel=compare] #explore-view .difference-chips{flex:0 0 auto;min-height:27px;align-items:center;margin:0;overflow:hidden;white-space:nowrap}
 .mode-lab-integrated[data-mobile-panel=compare] #explore-view .difference-chips span{font-size:11px;padding:3px 7px}
 .mode-lab-integrated[data-mobile-panel=compare] #explore-view #context-note,.mode-lab-integrated[data-mobile-panel=compare] #explore-view #aliases,.mode-lab-integrated[data-mobile-panel=compare] #explore-view #compare-score-caption{display:none}
 .mode-lab-integrated[data-mobile-panel=compare] #explore-view .compare-score-stage{flex:1 1 auto;min-height:0;grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;margin:0;overflow:hidden}
 .mode-lab-integrated[data-mobile-panel=compare] #explore-view .compare-score-row{min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:5px 10px}
 .mode-lab-integrated[data-mobile-panel=compare] #explore-view .compare-score-heading{flex:0 0 auto}
 .mode-lab-integrated[data-mobile-panel=compare] #explore-view .compare-score-window.scale,.mode-lab-integrated[data-mobile-panel=compare] #explore-view .compare-score-window.rolling{flex:1 1 auto;min-height:0;height:auto}
 .mode-lab-integrated[data-mobile-panel=compare] #explore-view #compare-score-readout{flex:0 0 auto}
 .mode-lab-integrated #explore-view>.transport-actions{order:3;flex:0 0 50px;display:grid;grid-template-columns:repeat(2,minmax(150px,1fr)) minmax(220px,1.6fr);gap:8px;align-items:center;margin:0;padding:0;border:0}
 .mode-lab-integrated #explore-view>.transport-actions>button{height:46px;min-height:46px;min-width:0}
 .mode-lab-integrated #explore-view>.transport-actions .global-theme-picker select{height:46px;min-height:46px;font-size:13px}
 .mode-lab-integrated[data-mobile-panel=ring] #play-scale-compare,.mode-lab-integrated[data-mobile-panel=ring] #play-melody-compare,.mode-lab-integrated[data-mobile-panel=score] #play-scale-compare,.mode-lab-integrated[data-mobile-panel=score] #play-melody-compare,.mode-lab-integrated[data-mobile-panel=compare] #play-scale,.mode-lab-integrated[data-mobile-panel=compare] #play-melody{display:none}
 .mode-lab-integrated #mobile-section-nav,.mode-lab-integrated #mobile-quiz-nav{display:flex;flex:0 0 53px;align-items:center;gap:5px;width:100%;min-height:53px;padding:4px 0 0;margin:0;border-top:1px solid var(--site-line)}
 .mode-lab-integrated #mobile-section-nav{order:4}
 .mode-lab-integrated .mobile-section-nav>button:not(.practice-nav-toggle){flex:1;min-width:0;min-height:44px;padding:5px;border:0;border-radius:8px;background:transparent;color:var(--site-muted);font-size:13px;font-weight:600}
 .mode-lab-integrated .mobile-section-nav>button[aria-current=page]{background:var(--site-soft);color:var(--site-accent)}
 .mode-lab-integrated #quiz-view{display:flex;flex-direction:column;gap:8px}
 .mode-lab-integrated #quiz-view .quiz-layout{display:contents}
 .mode-lab-integrated #quiz-view .quiz-main,.mode-lab-integrated #quiz-view .progress-panel{display:none;flex:1 1 auto;min-height:0;width:100%;margin:0;overflow:auto;align-self:stretch}
 .mode-lab-integrated[data-mobile-quiz-panel=question] #quiz-view .quiz-main,.mode-lab-integrated[data-mobile-quiz-panel=stats] #quiz-view .progress-panel{display:flex;flex-direction:column}
 .mode-lab-integrated #quiz-view .quiz-setup{margin:12px 0}
 .mode-lab-integrated #quiz-view .quiz-prompt{margin:6px 0}
 .mode-lab-integrated #quiz-view .blind-stage{flex:1 1 auto;min-height:80px;padding:10px}
 .mode-lab-integrated #quiz-view .quiz-play{margin:8px 0}
 .mode-lab-integrated #quiz-view .quiz-choices{margin:8px 0}
 .mode-lab-integrated #quiz-view .quiz-footer{margin-top:auto}
 .mode-lab-integrated[data-main-view=learn] #explore-view>.selectors,.mode-lab-integrated[data-main-view=learn] #explore-view>.transport-actions,.mode-lab-integrated[data-main-view=learn] #explore-view>.explorer-grid,.mode-lab-integrated[data-main-view=learn] #mobile-section-nav{display:none!important}
 .mode-lab-integrated[data-main-view=learn] #explore-view #lesson-area{order:2;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px;padding:0;overflow:hidden}
 .mode-lab-integrated[data-main-view=learn] #explore-view .lesson-picker{flex:0 0 57px;max-width:100%;margin:0}
 .mode-lab-integrated[data-main-view=learn] #explore-view .lesson-card{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(230px,.65fr);gap:24px;align-items:center;margin:0;overflow:auto}
 .mode-lab-integrated[data-main-view=learn] #explore-view .lesson-next{min-height:130px}
}
@media (min-width:761px) and (max-height:760px){
 .mode-lab-integrated[data-mobile-panel=compare] #explore-view #feature-explanation{display:none}
 .mode-lab-integrated[data-mobile-panel=compare] #explore-view .comparison-panel{gap:4px}
 .mode-lab-integrated[data-mobile-panel=compare] #explore-view .difference-chips{min-height:24px}
 .mode-lab-integrated[data-mobile-panel=score] #explore-view .score-description{display:none}
}
@media (min-width:761px) and (max-width:1000px){
 .mode-lab-integrated #explore-view .ring-panel,.mode-lab-integrated #explore-view .score-panel,.mode-lab-integrated #explore-view .comparison-panel{padding:12px 16px}
 .mode-lab-integrated #explore-view>.selectors{grid-template-columns:minmax(110px,.8fr) minmax(160px,1.5fr) minmax(84px,.4fr)}
 .mode-lab-integrated[data-main-view=learn] #explore-view .lesson-card{grid-template-columns:1fr;gap:12px}
 .mode-lab-integrated[data-main-view=learn] #explore-view .lesson-next{min-height:0;border-left:0;border-top:1px solid var(--site-line);padding:12px 0 0}
}
@media (min-width:761px) and (max-height:740px){
 body.has-site-shell.mode-lab-integrated>main.container{overflow-y:auto;overscroll-behavior:contain}
 .mode-lab-integrated #explore-view,.mode-lab-integrated #quiz-view{flex:0 0 auto;min-height:590px;overflow:visible}
 .mode-lab-integrated #explore-view .ring-panel,.mode-lab-integrated #explore-view .score-panel,.mode-lab-integrated #explore-view .comparison-panel{flex:0 0 390px;min-height:390px}
 .mode-lab-integrated[data-mobile-panel=ring] #explore-view .ring{width:min(300px,calc(100vw - 160px))}
 .mode-lab-integrated[data-mobile-panel=compare] #explore-view #feature-explanation{display:block}
 .mode-lab-integrated #quiz-view .quiz-main,.mode-lab-integrated #quiz-view .progress-panel{min-height:515px}
}
@media (min-width:761px) and (max-width:900px){
 body.has-site-shell.mode-lab-integrated>.global-site-nav{display:none;inset:auto 8px auto;height:auto;min-height:64px;padding:6px;background:var(--site-raised);border:1px solid var(--site-line);border-radius:14px;box-shadow:0 8px 28px #0004}
 body.has-site-shell.mode-lab-integrated>.global-site-nav.practice-nav-open{display:grid}
 body.has-site-shell.mode-lab-integrated>.global-site-nav>a,body.has-site-shell.mode-lab-integrated>.global-site-nav>button{min-height:56px;padding:5px 0}
 .mode-lab-integrated .practice-nav-toggle{flex:0 0 44px!important;min-width:44px!important;width:44px;height:44px;min-height:44px!important;display:grid!important;place-items:center;padding:0!important;background:var(--site-raised)!important;color:var(--site-accent)!important;border:1px solid var(--site-line)!important;border-radius:8px!important}
 .mode-lab-integrated .practice-nav-toggle svg{width:20px!important;height:20px!important;fill:none;stroke:currentColor}
}

/* Header alignment: mirror desktop-layout.css without importing its body layouts.
   The harmony header belongs to its own narrow main at <=900px; Mode Lab's
   header is a body-level training header, like sight singing. */
body.has-site-shell.mode-lab-integrated > .mode-lab-mobile-header {
  padding-inline: 12px !important;
}
@media (min-width:901px) {
  body.has-site-shell.mode-lab-integrated {
    --training-shell-max: 1920px;
    --training-gutter: clamp(28px, 3vw, 58px);
  }
  body.has-site-shell.mode-lab-integrated > .global-site-header,
  body.has-site-shell.mode-lab-integrated > .mode-lab-mobile-header {
    box-sizing: border-box;
    width: min(100%, var(--training-shell-max));
    margin-inline: auto;
    padding-inline: var(--training-gutter) !important;
  }
  body.has-site-shell.mode-lab-integrated > .global-site-header { gap: 16px; }
}
@media (min-width:901px) and (max-width:1050px) {
  body.has-site-shell.mode-lab-integrated { --training-gutter: 20px; }
}

/* 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}