/* Mode Lab v10: preserve site tokens and the existing three palette choices. */
.page-intro h1 small{font-size:.7em;font-weight:500;color:var(--site-muted)}
.mode-settings-trigger,body.mode-lab-integrated .mode-settings-trigger{display:grid;place-items:center;flex:0 0 44px;margin:0 0 0 auto;width:44px;min-width:44px;height:44px;min-height:44px;padding:10px;color:var(--site-ink);background:transparent;border:1px solid var(--site-line);border-radius:8px}
.mode-settings-trigger svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.mode-lab-mobile-header>.global-account{margin-left:0}
#mode-settings-dialog{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 40px);overflow-y:auto}
#mode-settings-dialog>.panel-heading{margin-bottom:12px}
#mode-settings-dialog .transport-panel{display:block!important;margin:0;padding:0;border:0;background:transparent}
#mode-settings-dialog .transport-settings{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:12px}
#mode-settings-dialog .melody-details{display:block;margin-top:12px}
#mode-settings-dialog .sound-settings{margin-top:12px}
#mode-settings-dialog .volume-control{flex-wrap:wrap}
.compare-score-window.scale .compare-playhead{left:var(--compare-cursor,12px)}
.catalog-open{width:100%;min-height:44px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:30px;position:relative}
.catalog-open::after{content:'⌄';position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--site-muted)}
#catalog-dialog{width:min(560px,calc(100vw - 24px));height:min(76dvh,720px);max-height:calc(100dvh - 32px);padding:16px;display:none;flex-direction:column;gap:12px;overflow:hidden}
#catalog-dialog[open]{display:flex}
#catalog-dialog>.panel-heading{flex:0 0 auto}
#catalog-dialog>label{flex:0 0 auto}
#catalog-search{width:100%;min-height:44px;border:1px solid var(--site-line);border-radius:10px;background:var(--site-raised);padding:8px 12px;color:var(--site-ink);font-size:15px}
.catalog-list{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
.catalog-group{margin:0 0 14px}.catalog-group h3{font-size:12px;color:var(--site-muted);margin:0 0 5px;padding:6px 2px}
.catalog-group button{width:100%;min-height:58px;display:flex;align-items:center;justify-content:space-between;text-align:left;border-radius:0;border-width:0 0 1px;background:transparent;padding:6px 4px;gap:8px}
.catalog-group button strong{display:block;font-size:14px;line-height:1.35;color:var(--site-ink)}
.catalog-group button small{display:block;font-size:11px;line-height:1.3;color:var(--site-muted);margin-top:2px}
.catalog-group button i{font-size:20px;font-style:normal;color:var(--site-muted)}
@media(max-width:760px){
 /* The site bottom navigation owns the safe area; the Mode Lab stage ends at its top edge. */
 body.has-site-shell.mode-lab-integrated>main.container,
 body:not(.has-site-shell)>main.container{padding-bottom:0}
 body.has-site-shell.mode-lab-integrated>main.container{overflow:hidden}
 /* Both comparison tabs use one fixed two-row stage; the score cannot consume the feature cues. */
 body[data-mobile-panel=compare] #explore-view .comparison-panel .comparison-heading,
 body[data-mobile-panel=compare] #explore-view .comparison-panel .difference-chips,
 body[data-mobile-panel=compare] #explore-view .comparison-panel .compare-switch{flex-shrink:0}
 body[data-mobile-panel=compare] #explore-view .comparison-panel .difference-chips{min-height:28px;align-items:center}
 body[data-mobile-panel=compare] #explore-view .comparison-panel .compare-score-stage{flex:0 0 auto;height:clamp(150px,22dvh,248px);min-height:0;grid-template-rows:repeat(2,minmax(0,1fr));overflow:hidden}
 body[data-mobile-panel=compare] #explore-view .comparison-panel .compare-score-row{min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:3px 7px}
 body[data-mobile-panel=compare] #explore-view .comparison-panel .compare-score-heading{flex:0 0 auto;min-height:14px}
 body[data-mobile-panel=compare] #explore-view .comparison-panel .compare-score-window.scale,
 body[data-mobile-panel=compare] #explore-view .comparison-panel .compare-score-window.rolling{flex:1 1 auto;min-height:0;height:auto}
 /* The full LilyPond compact page has two annotation rows below the staff. */
 .quiz-feedback .score-scroll{display:block;width:min(100%,430px);height:auto;max-height:none;aspect-ratio:42.1101 / 17.0717;margin:8px auto 0;overflow:hidden;padding:0}
 .quiz-feedback .score-scroll svg{display:block;width:100%;height:100%;min-width:0;max-width:100%}
}
@media(max-width:760px){
 .mode-lab-mobile-header{gap:7px!important;padding-inline:16px!important}
 .mode-lab-mobile-header>strong{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px!important}
 .mode-lab-mobile-header>.mode-settings-trigger{flex:0 0 44px;margin-left:auto}
 .mode-lab-mobile-header>.global-account{flex:0 0 auto;margin-left:0!important}
 body[data-main-view=learn] #explore-view .transport-actions,
 body[data-main-view=learn] #explore-view .showcase-strip,
 body[data-main-view=learn] #mobile-section-nav{display:none!important}
 body[data-main-view=learn] #explore-view #lesson-area{display:flex;flex-direction:column;gap:6px;padding:4px 0}
 body[data-main-view=learn] #explore-view .ring-panel,
 body[data-main-view=learn] #explore-view .score-panel,
 body[data-main-view=learn] #explore-view .comparison-panel{display:none!important}
 #mobile-section-nav{order:5;flex:0 0 54px;min-height:54px;margin-top:auto;margin-bottom:0;padding-bottom:0}
 #mobile-section-nav button{font-size:12px;line-height:1.15;white-space:nowrap;min-height:44px}
 #mode-settings-dialog .transport-settings{grid-template-columns:1fr 1fr}
 #mode-settings-dialog .transport-settings>label:first-child{width:auto}
 #mode-settings-dialog .volume-control input{max-width:160px}
}
/* Comparison: one choice per action, shared playback state. */
.transport-actions button[aria-pressed=true]{background:var(--site-accent);border-color:var(--site-accent);color:var(--site-on)}
.compare-theme-picker{display:flex;flex-direction:row;align-items:center;gap:8px;margin:4px 0 2px;font-size:12px;white-space:nowrap}
.compare-theme-picker select{flex:1;min-width:0;min-height:40px;padding:5px 10px;font-size:13px}
.comparison-heading{position:relative}
.comparison-heading #compare-theory-open{align-self:start;min-height:27px;padding:2px 8px;border-radius:7px;background:transparent;font-size:12px}
@media(max-width:760px){
 #explore-view>.transport-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
 body[data-mobile-panel=ring] #play-scale-compare,body[data-mobile-panel=ring] #play-melody-compare,
 body[data-mobile-panel=score] #play-scale-compare,body[data-mobile-panel=score] #play-melody-compare,
 body[data-mobile-panel=compare] #play-scale,body[data-mobile-panel=compare] #play-melody{display:none}
 .comparison-heading{padding-top:17px}
 .comparison-heading #compare-theory-open{position:absolute;right:0;top:0;min-height:22px;font-size:11px}
 body[data-mobile-panel=compare] #explore-view .comparison-panel .compare-theme-picker{flex:0 0 auto}
 .quiz-play{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
 .comparison-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:5px;margin:0;padding-top:0}
 .comparison-heading>label,.comparison-heading>.compare-theme-picker{min-width:0;margin:0;display:flex;flex-direction:column;gap:3px;font-size:10px}
 .comparison-heading>label select{width:100%;height:40px;min-height:40px;padding-inline:8px;font-size:12px}
 .comparison-heading #play-difference{display:none}
 .comparison-heading #compare-theory-open{right:0;top:-1px;min-height:19px;padding:0 4px;font-size:10px;border:0}
}
@media(max-width:760px) and (max-height:730px){
 body[data-mobile-panel=compare] #explore-view .comparison-panel #compare-score-readout{display:none}
 body[data-mobile-panel=compare] #explore-view .comparison-panel .difference-chips{margin:2px 0;min-height:24px}
 body[data-mobile-panel=compare] #explore-view .comparison-panel .compare-score-stage{height:150px}
}
@media(max-width:760px) and (max-height:700px){
 body[data-mobile-panel=compare] #explore-view .comparison-panel .difference-chips{display:flex;flex-wrap:nowrap;min-height:24px;max-height:24px;overflow:hidden;white-space:nowrap}
}
@media(max-width:760px){
 body[data-mobile-panel=compare] #explore-view .comparison-panel{position:relative}
 body[data-mobile-panel=compare] #explore-view .comparison-panel .difference-chips{padding-right:76px}
 body[data-mobile-panel=compare] #explore-view .comparison-panel #play-difference{display:block;position:absolute;right:8px;top:65px;z-index:1;min-height:24px;padding:1px 5px;border-radius:6px;font-size:11px}
}

/* Global melody choice and one bottom action rail across the three modes. */
.transport-actions .global-theme-picker{min-width:0;display:block}
.transport-actions .global-theme-picker select{width:100%;height:44px;min-height:44px;min-width:0;padding:4px 26px 4px 9px;border:1px solid var(--site-line);border-radius:9px;background:var(--site-raised);color:var(--site-ink);font-size:12px}
.transport-actions>button{background:var(--site-raised)!important;color:var(--site-ink)!important;border:1px solid var(--site-line)!important}
.transport-actions>button[aria-pressed=true]{background:var(--site-soft)!important;color:var(--site-accent)!important;border-color:var(--site-accent)!important}
.comparison-heading{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:6px}
.comparison-heading>label{min-width:0;display:flex;flex-direction:column;gap:3px}
.comparison-heading>label select{width:100%;min-width:0}
.comparison-heading #play-difference,.comparison-heading #compare-theory-open{position:static;display:block;min-height:44px;padding:5px 8px;border:1px solid var(--site-line);border-radius:8px;background:var(--site-raised);color:var(--site-ink);font-size:12px;white-space:nowrap}
.comparison-heading #play-difference[aria-pressed=true]{background:var(--site-soft);color:var(--site-accent);border-color:var(--site-accent)}
@media(max-width:760px){
 body.has-site-shell.mode-lab-integrated{--site-bottom:0px;padding-bottom:env(safe-area-inset-bottom)}
 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;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}
 .mode-lab-integrated #mobile-learn-nav{display:none;align-items:center;justify-content:space-between;margin-top:auto;border-top:1px solid var(--site-line)}
 .mode-lab-integrated #mobile-learn-nav span{padding-left:12px;font-size:12px;color:var(--site-muted)}
 body[data-main-view=learn].mode-lab-integrated #mobile-learn-nav{display:flex}
}
@media(min-width:761px){.mode-lab-integrated .practice-nav-toggle,.mode-lab-integrated #mobile-learn-nav{display:none}}
@media(max-width:760px){
 body.has-site-shell.mode-lab-integrated>main.container{padding-bottom:0}
 #explore-view>.transport-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.45fr);flex:0 0 44px;order:3}
 #explore-view>.transport-actions>button{min-width:0;min-height:44px;padding-inline:3px;font-size:12px;white-space:nowrap}
 body[data-mobile-panel=ring] #play-scale-compare,body[data-mobile-panel=ring] #play-melody-compare,body[data-mobile-panel=score] #play-scale-compare,body[data-mobile-panel=score] #play-melody-compare,body[data-mobile-panel=compare] #play-scale,body[data-mobile-panel=compare] #play-melody{display:none}
 #mobile-section-nav,#mobile-quiz-nav,#mobile-learn-nav{flex:0 0 calc(54px + env(safe-area-inset-bottom));min-height:54px;padding:4px 0 env(safe-area-inset-bottom);margin-bottom:0;align-items:flex-start;background:var(--site-canvas)}
 #mobile-section-nav{margin-top:auto}
 .mobile-section-nav button:not(.practice-nav-toggle){min-height:44px}
 .comparison-heading{grid-template-columns:minmax(0,1fr) 78px 48px;align-items:end;gap:5px;padding-top:0}
 .comparison-heading>label{font-size:10px;gap:3px}
 .comparison-heading>label select{height:40px;min-height:40px;padding-inline:8px;font-size:12px}
 body[data-mobile-panel=compare] #explore-view .comparison-panel #play-difference,.comparison-heading #compare-theory-open{position:static;min-height:40px;height:40px;padding:2px 3px;font-size:11px}
 body[data-mobile-panel=compare] #explore-view .comparison-panel .difference-chips{padding-right:0}
}
.global-theme-picker .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.comparison-heading #compare-theory-open{align-self:end}