/* Touch layout for Chords Lite; staff keeps its existing scalable viewBox. */
.chords-fold{box-sizing:border-box;max-width:900px;margin:16px auto;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-controls);text-align:start}
.chords-fold>summary{cursor:pointer;padding:12px 16px;min-height:44px;box-sizing:border-box;font-weight:700;color:var(--text-main);touch-action:manipulation}
.chords-fold>summary:focus-visible{outline:3px solid var(--accent-blue);outline-offset:2px;border-radius:10px}
.chords-fold .chords-beginner-guide{margin:0;border:0;box-shadow:none}
.chords-display-options{display:flex;flex-wrap:wrap;gap:8px 20px;padding:4px 16px 16px}
.chords-display-options .autoplay-lbl{display:flex;align-items:center;gap:8px;min-height:44px;text-align:start}
.chords-display-options input{width:20px;height:20px;flex:none;accent-color:var(--accent-blue)}
@media(max-width:768px){
 body{padding:12px;padding-bottom:max(20px,env(safe-area-inset-bottom))}
 h2{padding:58px 4px 0!important;font-size:17px!important;line-height:1.4!important;margin-bottom:14px!important}
 .controls{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px!important;padding:14px!important;margin-bottom:14px;max-width:600px}
 .controls .control-group{min-width:0;align-items:stretch!important;justify-content:start!important;text-align:start;gap:3px}
 .controls .control-group:nth-child(2){grid-column:1/-1;order:3}
 .controls .control-group label{min-height:24px;font-size:14px;margin:0}
 .controls select{width:100%;min-width:0;max-width:100%;font-size:16px;min-height:46px;padding:9px 10px}
 .play-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;max-width:600px;margin:0 auto 10px}
 .play-row .play-btn{min-height:48px;padding:10px 8px;font-size:16px;touch-action:manipulation}
 .chord-symbol{margin-top:12px;font-size:32px}
 #canvas-container{padding:8px;width:440px;max-width:100%}
 .chords-fold{margin:12px auto}
 .chords-display-options{display:grid;grid-template-columns:1fr;gap:4px}
 .chords-beginner-guide{padding:12px}
 .chords-term{min-height:40px;padding:7px 10px}
 .spec-pop{box-sizing:border-box;max-width:calc(100vw - 24px)}
}
/* Keep chord choices beside the score instead of stacking them above it. */
.chords-workspace{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;max-width:1300px;margin:0 auto;align-items:center;text-align:center}
.chords-sidebar{display:flex;flex-direction:column;gap:12px;min-width:0;text-align:start}
.chords-sidebar .controls{display:flex!important;flex-direction:column;gap:12px!important;margin:0;padding:16px!important;width:100%;box-sizing:border-box}
.chords-sidebar .control-group{align-items:stretch;min-width:0}
.chords-sidebar select{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.chords-sidebar .play-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;width:100%}
.chords-sidebar .play-btn{padding:10px 5px;font-size:14px}
.chords-sidebar .chords-fold{margin:0;width:100%}
.chords-sidebar .chords-display-options{display:flex;flex-direction:column;gap:5px;padding:0 12px 12px}
.chords-sidebar .autoplay-lbl{min-height:28px;font-size:13px}
.chords-sidebar .chords-fold>summary{padding:10px 12px;font-size:14px}
.chords-stage{min-width:0;align-self:center}
.chords-stage .chord-symbol{margin:0 0 6px}
.chords-stage #canvas-container{margin-top:6px}
.chords-stage .letters,.chords-stage .degrees{margin-top:8px}
.chords-help-button{font:inherit;padding:9px 12px;border:1px solid var(--border-color);border-radius:9px;background:var(--bg-controls);color:var(--text-main);cursor:pointer}
.chords-fullscreen-button{font:700 15px/1.3 inherit;padding:11px;border:2px solid #63c9ef;border-radius:10px;background:#174a70;color:#effcff;cursor:pointer;box-shadow:0 0 0 3px #38bdf820}
.chords-fullscreen-button:focus-visible,.chords-help-button:focus-visible{outline:3px solid var(--accent-blue);outline-offset:3px}
.chords-help-dialog{width:min(800px,calc(100vw - 32px));max-height:85dvh;box-sizing:border-box;padding:16px;border:1px solid var(--border-color);border-radius:14px;background:var(--bg-page);color:var(--text-main);text-align:end}
.chords-help-dialog::backdrop{background:#030712b8}
.chords-help-dialog .chords-beginner-guide{margin:12px 0 0}
@media(min-width:650px){body{padding:12px 20px}h2{margin:5px 0 14px!important;font-size:20px!important;padding:0 60px!important}.chords-workspace{min-height:calc(100dvh - 90px)}.chords-stage #canvas-container{width:min(440px,100%,calc((100dvh - 230px)*1.35));padding:10px}}
@media(min-width:650px) and (max-height:650px){.chords-workspace{grid-template-columns:250px minmax(0,1fr);gap:16px}.chords-sidebar{gap:6px}.chords-sidebar .controls{gap:6px!important;padding:10px!important}.chords-sidebar select{min-height:32px;padding:4px;font-size:14px}.chords-sidebar .control-group label{font-size:12px;min-height:0}.chords-sidebar .play-btn{min-height:34px;padding:5px}.chords-sidebar .chords-fold>summary{min-height:30px;padding:6px 10px}.chords-sidebar .autoplay-lbl{min-height:22px;font-size:12px}.chords-sidebar .chords-display-options{gap:2px;padding-bottom:6px}.chords-fullscreen-button,.chords-help-button{padding:6px}.chords-stage .chord-symbol{font-size:28px}.chords-stage .letters{font-size:16px}}
@media(max-width:649px){.chords-workspace{grid-template-columns:1fr;gap:14px}.chords-sidebar{gap:8px}.chords-sidebar .controls{display:grid!important;grid-template-columns:1fr 1fr;padding:10px!important;gap:8px!important}.chords-sidebar .control-group:nth-child(2){grid-column:1/-1;order:3}.chords-sidebar select{min-height:38px;padding:5px}.chords-sidebar .play-btn{min-height:40px}.chords-stage #canvas-container{width:min(400px,100%);padding:8px}.chords-fullscreen-button{position:absolute;top:12px;inset-inline-end:12px;width:auto}.chords-stage .chord-symbol{font-size:28px}}
html.chords-fullscreen{position:fixed;inset:0;overflow:auto;background:var(--bg-page);z-index:9999}
@media(min-width:650px){.chords-workspace{min-height:calc(100dvh - 130px)}body>footer{margin:8px auto 0!important;padding:6px!important;font-size:11px!important}}
@media(min-width:650px) and (max-height:500px){h2{font-size:15px!important;margin:0 0 6px!important;line-height:20px!important}.chords-workspace{min-height:0;gap:10px;grid-template-columns:240px minmax(0,1fr)}.chords-sidebar{gap:4px}.chords-sidebar .controls{gap:3px!important;padding:6px 10px!important}.chords-sidebar .control-group label{margin:0!important;line-height:16px!important}.chords-sidebar select{min-height:27px!important;height:27px;padding:2px!important}.chords-sidebar .play-btn{min-height:29px!important;font-size:12px}.chords-fullscreen-button,.chords-help-button{font-size:12px;padding:4px}.chords-sidebar .chords-fold>summary{font-size:12px;min-height:26px;padding:4px 8px}.chords-stage #canvas-container{width:min(320px,100%,calc((100dvh - 160px)*1.35))}.chords-stage .chord-symbol{font-size:24px}.chords-stage .letters{margin-top:4px;font-size:14px}.chords-stage .degrees{margin-top:4px}.chords-stage .warning{margin-top:4px}body>footer{line-height:16px!important}}
@media(max-width:649px){h2{padding-top:38px!important;margin-top:0!important;margin-bottom:8px!important;font-size:15px!important}.chords-workspace{gap:8px}.chords-stage #canvas-container{width:min(320px,100%)}.chords-stage .letters{font-size:16px;margin-top:4px}body>footer{margin:8px auto 0!important;padding:6px!important;font-size:11px!important}}
@media(min-width:650px) and (max-width:768px) and (max-height:500px){h2{padding:0 50px!important}.chords-sidebar .control-group{gap:0!important}.chords-sidebar .controls .control-group:nth-child(2){order:0;grid-column:auto}.chords-sidebar .control-group label{font-size:11px!important}.chords-sidebar .play-row{gap:4px}.chords-stage .alt-symbols{font-size:11px;margin:0}.chords-stage .degrees{font-size:13px}.chords-stage #canvas-container{width:250px}}
.chords-fullscreen-button{font-family:inherit;font-size:15px;font-weight:700;line-height:1.3}
@media(min-width:650px) and (max-height:500px){body{padding-top:8px;padding-bottom:8px}.chords-fullscreen-button{font-size:12px}}
/* Persistent fullscreen action beside the color control, in every viewport. */
.chords-fullscreen-button{position:fixed!important;top:12px!important;left:70px!important;right:auto!important;inset-inline-end:auto!important;z-index:10001!important;width:146px!important;min-height:54px!important;padding:10px 12px!important;border:2px solid #63c9ef!important;border-radius:13px!important;background:#17415e!important;color:#f1fbff!important;font-size:16px!important;font-weight:800!important;line-height:1.25!important;box-shadow:0 0 0 4px #38bdf821,0 4px 12px #0003!important;white-space:nowrap}
.chords-fullscreen-button:hover{background:#205578!important;border-color:#a3eaff!important}
#spec-btn.spec-btn{position:fixed!important;top:12px!important;left:12px!important;right:auto!important;bottom:auto!important;width:46px!important;height:46px!important}
#spec-btn.spec-btn::after{display:none!important}
@media(max-width:649px){h2{padding-top:68px!important}}
@media print{.chords-fullscreen-button{display:none!important}}
.chords-fullscreen-button{inset-inline-start:auto!important;inset-inline-end:auto!important;left:70px!important;right:auto!important}
@media(min-width:650px){h2{padding-left:220px!important;padding-right:60px!important}}
/* Shared studio identity: P sits physically left of MusicGameStudio. */
.lite-heading .lite-studio-brand{display:flex;direction:ltr;align-items:center;justify-content:center;gap:8px;font:800 18px/1.2 system-ui;letter-spacing:0;margin-bottom:4px;color:var(--text-main)}
.lite-studio-brand img{width:32px;height:32px;object-fit:contain;flex:none}
.lite-heading .lite-app-title{display:block;font-size:14px;line-height:1.3}
@media(max-width:649px){.lite-heading .lite-studio-brand{font-size:17px}.lite-studio-brand img{width:29px;height:29px}.lite-heading .lite-app-title{font-size:12px}}
@media(min-width:650px) and (max-height:500px){.lite-heading .lite-studio-brand{font-size:14px;margin-bottom:2px}.lite-studio-brand img{width:25px;height:25px}.lite-heading .lite-app-title{font-size:11px}}
/* Studio brand belongs beside the Home action when the header has room. */
@media(min-width:650px){.lite-heading .lite-studio-brand{position:fixed;top:12px;right:64px;left:auto;min-height:42px;margin:0;z-index:9998;justify-content:flex-start}.lite-heading .lite-app-title{padding-top:52px}.lite-heading .lite-studio-brand img{width:32px;height:32px}}
@media(max-width:649px){.lite-heading .lite-studio-brand{justify-content:center}}

/* Fit the workspace below the real heading and above the footer. */
@media(min-width:650px){
 html{height:100%}
 body{height:100dvh;min-height:0;box-sizing:border-box;display:flex;flex-direction:column}
 body>.lite-heading,body>footer{flex:none}
 body>.chords-workspace{flex:1;min-height:0;width:100%}
 .chords-stage #canvas-container{width:min(440px,100%,calc((100dvh - 290px)*1.35))}
}
@media(min-width:650px) and (max-height:650px){.lite-heading .lite-app-title{padding-top:44px}.chords-stage #canvas-container{width:min(360px,100%,calc((100dvh - 230px)*1.35))}}

/* Retain the desktop split on phones, including when fullscreen ignores the viewport meta. */
.studio-phone-fit body{padding:10px 18px}
.studio-phone-fit .lite-heading{flex:none;margin:0 0 8px!important;padding:0 220px!important;font-size:20px!important;line-height:1.3!important}
.studio-phone-fit .lite-heading .lite-studio-brand{position:fixed;top:10px;right:64px;min-height:42px;font-size:18px}
.studio-phone-fit .lite-heading .lite-app-title{padding-top:50px;font-size:16px}
.studio-phone-fit .chords-workspace{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;flex:1;min-height:0;width:100%;align-items:center}
.studio-phone-fit .chords-sidebar{gap:6px;min-height:0}
.studio-phone-fit .chords-sidebar .controls{display:flex!important;flex-direction:column;gap:7px!important;padding:12px!important}
.studio-phone-fit .chords-sidebar .control-group{order:initial!important;gap:3px}
.studio-phone-fit .chords-sidebar select{min-height:36px;font-size:16px;padding:5px}
.studio-phone-fit .chords-sidebar .control-group label{font-size:14px;min-height:0}
.studio-phone-fit .chords-sidebar .play-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.studio-phone-fit .chords-sidebar .play-btn{min-height:38px;padding:5px;font-size:14px}
.studio-phone-fit .chords-fullscreen-button{position:fixed;top:10px;left:70px!important;padding:10px;font-size:16px;min-height:42px}
.studio-phone-fit .chords-stage #canvas-container{width:420px;max-width:100%;padding:8px}
.studio-phone-fit .chords-stage .chord-symbol{font-size:34px;margin:0 0 5px}
.studio-phone-fit .chords-stage .letters{font-size:20px;margin-top:6px}
.studio-phone-fit .chords-stage .degrees{margin-top:6px}
.studio-phone-fit .chords-fold>summary{min-height:32px;padding:6px 10px;font-size:14px}
.studio-phone-fit .chords-display-options{display:grid;grid-template-columns:1fr;gap:2px;padding:0 10px 6px}
.studio-phone-fit .chords-display-options .autoplay-lbl{min-height:25px;font-size:13px}
.studio-phone-fit body>footer{flex:none;margin:4px 0 0!important;padding:3px!important;font-size:10px!important}

/* Larger phone controls and notation, with very little unused space. */
.studio-phone-fit body{padding:8px 10px}
.studio-phone-fit .chords-workspace{max-width:none;grid-template-columns:260px minmax(0,1fr);gap:12px}
.studio-phone-fit .chords-stage #canvas-container{width:560px;max-width:96%;padding:8px}
.studio-phone-fit .chords-stage .chord-symbol{font-size:40px}
.studio-phone-fit .chords-stage .letters{font-size:24px}
.studio-phone-fit .chords-sidebar .controls{padding:8px!important;gap:5px!important}
.studio-phone-fit .chords-sidebar select{font-size:18px;min-height:36px}
.studio-phone-fit .lite-heading{padding:0 170px!important;margin-bottom:5px!important}
.studio-phone-fit .lite-heading .lite-app-title{padding-top:44px;font-size:15px}
.studio-phone-fit .chords-sidebar{gap:5px}
@media(orientation:portrait){
 .studio-phone-fit .lite-heading{padding:0 10px!important}
 .studio-phone-fit .lite-heading .lite-app-title{font-size:24px;padding-top:65px}
 .studio-phone-fit .lite-heading .lite-studio-brand{font-size:24px;right:75px}
 .studio-phone-fit .lite-studio-brand img{width:40px;height:40px}
 .studio-phone-fit .chords-fullscreen-button{font-size:20px;min-height:48px}
 .studio-phone-fit .chords-workspace{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:10px;align-items:start}
 .studio-phone-fit .chords-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .studio-phone-fit .chords-sidebar .controls{grid-column:1/-1;display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:8px!important;padding:12px!important}
 .studio-phone-fit .chords-sidebar .control-group:nth-child(2){grid-column:auto;order:initial}
 .studio-phone-fit .chords-sidebar .control-group label{font-size:22px;line-height:1.3}
 .studio-phone-fit .chords-sidebar select{font-size:24px;min-height:58px}
 .studio-phone-fit .chords-sidebar .play-row{grid-column:1/-1;gap:10px}
 .studio-phone-fit .chords-sidebar .play-btn{font-size:24px;min-height:58px}
 .studio-phone-fit .chords-fold>summary,.studio-phone-fit .chords-help-button{font-size:22px;min-height:48px}
 .studio-phone-fit .chords-display-options .autoplay-lbl{font-size:20px;min-height:36px}
 .studio-phone-fit .chords-stage{align-self:center}
 .studio-phone-fit .chords-stage #canvas-container{width:650px;max-width:98%}
 .studio-phone-fit .chords-stage .chord-symbol{font-size:56px}
 .studio-phone-fit .chords-stage .letters{font-size:32px}
 .studio-phone-fit body>footer{font-size:16px!important}
}

@media(orientation:landscape){.studio-phone-fit .chords-stage #canvas-container{width:min(560px,calc((var(--studio-height) - 200px)*1.35));max-width:96%}.studio-phone-fit .chords-stage{min-height:0}.studio-phone-fit .chords-stage .chord-symbol{font-size:32px}.studio-phone-fit .chords-stage .letters{font-size:22px}}

@media(orientation:portrait){.studio-phone-fit .chords-workspace{grid-template-rows:auto auto;align-content:start}.studio-phone-fit .chords-stage{align-self:start;margin-top:16px}.studio-phone-fit .chords-sidebar .controls{max-width:none}}

/* Separate full-height workspaces for portrait and landscape phones. */
.studio-phone-fit body{padding:6px 10px}
.studio-phone-fit .chords-workspace{align-items:stretch;min-height:0;gap:10px}
.studio-phone-fit .chords-stage{align-self:stretch!important;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto auto;gap:4px;min-height:0;margin:0!important}
.studio-phone-fit .chords-stage #canvas-container{grid-row:3;width:100%!important;max-width:100%!important;height:100%;min-height:0;margin:0!important;box-sizing:border-box;padding:6px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.studio-phone-fit #canvas-container svg{width:100%!important;height:100%!important;max-width:100%;max-height:100%;display:block}
.studio-phone-fit .chords-stage .chord-symbol,.studio-phone-fit .chords-stage .alt-symbols,.studio-phone-fit .chords-stage .letters,.studio-phone-fit .chords-stage .degrees,.studio-phone-fit .chords-stage .warning{margin:0!important}
.studio-phone-fit .chords-stage .warning:empty,.studio-phone-fit .chords-stage .degrees:empty{display:none}
@media(orientation:landscape){
 .studio-phone-fit .chords-workspace{grid-template-columns:270px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
 .studio-phone-fit .chords-sidebar{align-self:stretch;justify-content:center;gap:8px}
 .studio-phone-fit .chords-sidebar .controls{flex:1;justify-content:space-evenly;gap:4px!important;padding:10px!important}
 .studio-phone-fit .lite-heading{margin-bottom:4px!important}
 .studio-phone-fit .lite-heading .lite-app-title{padding-top:40px;font-size:15px}
 .studio-phone-fit .chords-stage .chord-symbol{font-size:30px;line-height:1.1}
 .studio-phone-fit .chords-stage .letters{font-size:22px;line-height:1.2}
}
@media(orientation:portrait){
 .studio-phone-fit .chords-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-content:stretch;gap:12px}
 .studio-phone-fit .chords-sidebar{gap:8px;align-self:start}
 .studio-phone-fit .chords-stage{height:100%;min-height:0}
 .studio-phone-fit .chords-stage .chord-symbol{font-size:50px;line-height:1.1}
 .studio-phone-fit .chords-stage .letters{font-size:30px;line-height:1.2}
 .studio-phone-fit .lite-heading .lite-app-title{padding-top:60px;font-size:22px}
 .studio-phone-fit .chords-sidebar .controls{padding:10px!important}
 .studio-phone-fit .chords-sidebar .control-group label{font-size:20px}
 .studio-phone-fit .chords-sidebar .play-btn{min-height:52px;font-size:22px}
 .studio-phone-fit .chords-fold>summary,.studio-phone-fit .chords-help-button{min-height:44px;font-size:20px}
}

/* Allow the exit label to fit the same navigation control. */
.chords-fullscreen-button{box-sizing:border-box;min-width:180px;width:max-content;white-space:nowrap;line-height:1.3}
.studio-phone-fit .chords-fullscreen-button{min-width:196px;width:max-content;max-width:270px;padding:9px 12px;white-space:normal;overflow-wrap:normal;text-align:center;line-height:1.3}
@media(orientation:portrait){.studio-phone-fit .chords-fullscreen-button{font-size:18px;max-width:245px}}

/* Match the larger touch-friendly Home control used in Effects Lab. */
.studio-phone-fit #mms-home-fab{width:78px!important;height:78px!important;top:4px!important;right:6px!important;left:auto!important;font-size:42px!important;border-radius:13px!important;box-sizing:border-box}
.studio-phone-fit .lite-heading .lite-studio-brand{right:94px}

html.studio-phone-fit>#mms-home-fab{position:fixed!important;top:calc(8 * var(--home-touch-unit,1px))!important;right:calc(8 * var(--home-touch-unit,1px))!important;left:auto!important;width:calc(48 * var(--home-touch-unit,1px))!important;height:calc(48 * var(--home-touch-unit,1px))!important;font-size:calc(28 * var(--home-touch-unit,1px))!important;transform:none!important;z-index:10000}
@media(orientation:portrait){.studio-phone-fit .lite-heading .lite-studio-brand{right:116px}}

html.studio-phone-fit>#mms-home-fab{width:calc(36 * var(--home-touch-unit,1px))!important;height:calc(36 * var(--home-touch-unit,1px))!important;font-size:calc(22 * var(--home-touch-unit,1px))!important;top:calc(5 * var(--home-touch-unit,1px))!important;right:calc(6 * var(--home-touch-unit,1px))!important}

html.studio-phone-fit>#mms-home-fab{width:calc(32 * var(--home-touch-unit,1px))!important;height:calc(32 * var(--home-touch-unit,1px))!important;font-size:calc(19 * var(--home-touch-unit,1px))!important}