/* One phone layout for all top-level pages; keep small content gutters, no landscape frame. */
@media(max-width:760px){
 html,body{margin:0!important;padding:0!important;max-width:100%;background:#fff!important}
 body>.livingLandscape,body>.pageLandscape,body>.assessmentLandscape,body>.landscapeScene,.livingLandscapeCanvas{display:none!important}
 body>main,body>main.shell,body>.accountShell,body>.coupleShell,body>.toolPage{width:100%!important;max-width:none!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;box-sizing:border-box}
 body>main.shell{padding:0!important}
 body>main.shell>.card{border:0!important;border-radius:0!important;box-shadow:none!important;padding-inline:16px!important}
 body>.accountShell,body>.toolPage{padding-inline:14px!important}
 body>.coupleShell{padding:0!important}
 body>main:not(.shell):not(.coupleShell):not(.accountShell){padding-inline:14px!important}
 html,body{overflow-x:clip}
}

/* Keep result labels inside the phone, including with larger text settings. */
@media(max-width:760px){
 body.assessmentMode main.shell>.card{width:100%;max-width:100%;min-width:0;margin-inline:0;box-sizing:border-box}
 #result,.blendVisual,.blendVisual .chartbox{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
 html[lang] .chartFrame{width:100%;max-width:100%;grid-template-columns:4rem minmax(0,1fr) 4rem;gap:4px;box-sizing:border-box}
 html[lang] .chartFrame .sideLabel{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center;font-size:.9rem;line-height:1.4}
 .chartFrame #chart{min-width:0;max-width:100%}
 .chartExplanation{overflow-wrap:anywhere}
 .smallBlend,.elementPercentSide,.elementPercent{min-width:0;max-width:100%;box-sizing:border-box}
 body.assessmentMode .shell>.compactHeader{margin-inline:0;width:100%;box-sizing:border-box}
}

/* Legacy pages used html body !important backgrounds; win consistently. */
html:root:has(body:not(.welcomeMode)){background:#fff!important}
html:root body:not(.welcomeMode){background:#fff!important}
html:root body:not(.welcomeMode)>.pageLandscape,
html:root body:not(.welcomeMode)>.livingLandscape,
html:root body:not(.welcomeMode)>.assessmentLandscape,
html:root body:not(.welcomeMode)>.landscapeScene{display:none!important}
/* Preserve the intentional alternating assessment question background. */
html:root:has(body.assessmentMode #quiz.basicAlternate:not(.hidden)),
html:root body.assessmentMode:has(#quiz.basicAlternate:not(.hidden)){background:#e6eef5!important}
body.assessmentMode .shell>#footerText{padding-inline:26px;box-sizing:border-box}
@media(max-width:760px){
 html:root body{background:#fff!important}
 body.assessmentMode .shell>#footerText{padding-inline:16px}
}