/* v1.3: use the browser's usable viewport, including embedded-browser changes. */
:root{--viewport-height:100vh;--header-height:52px;--dock-height:104px;--page-gutter:20px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@supports(height:100dvh){:root{--viewport-height:100dvh}}
body[data-screen] .site-header{padding:6px var(--page-gutter);min-height:52px;gap:8px}
body[data-screen] .brand{font-size:14px;gap:8px;min-height:40px}
body[data-screen] .brand svg{width:23px;height:25px}
body[data-screen] .site-header>.quiet{font-size:12px;min-height:40px;padding:7px 4px}
body[data-screen] dialog{max-height:calc(var(--viewport-height) - 24px)}
.screen-dock{background:var(--bg);border-top:1px solid #49655b80}
body[data-screen="home"],body[data-screen="context"]{padding-bottom:calc(var(--dock-height) + var(--viewport-bottom-offset,0px))}
body[data-screen="home"] main{width:100%;padding:0 var(--page-gutter) 20px;min-height:0}
.home-first-screen{height:calc(var(--viewport-height) - var(--header-height) - var(--dock-height));min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:7px;padding:13px 0 8px}
.home-first-screen .home-kicker{margin:0 0 6px;font-size:12px;line-height:1.5}
.home-first-screen .home-intro h1{font-size:31px;line-height:1.25}
.home-first-screen .intro{font-size:13px;line-height:1.6;margin-top:7px}
.home-atlas-wrap{min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.home-atlas-wrap .persona-atlas{margin:0;flex:none;max-width:100%}
.home-atlas-wrap .compact-atlas .atlas-pair button{font-size:11px;min-height:33px;padding:4px 2px}
.home-atlas-wrap .compact-atlas .atlas-center strong{font-size:41px}
.home-atlas-wrap .compact-atlas .atlas-center span{font-size:10px;margin-top:4px}
.home-summary .atlas-hint{margin:0 0 8px;line-height:1.5;font-size:10px}
.home-summary .home-stats{margin:0}
.home-summary .home-stats div{padding:6px 4px}
.home-summary .home-stats b{font-size:23px;line-height:1.2}
.home-summary .home-stats span{font-size:11px;margin-top:2px}
body[data-screen="home"] .home-actions{position:fixed;z-index:6;left:50%;bottom:var(--viewport-bottom-offset,0px);transform:translateX(-50%);width:min(100%,510px);margin:0;padding:10px var(--page-gutter) max(6px,env(safe-area-inset-bottom));display:grid;gap:2px;box-shadow:0 -8px 24px #0d25222b}
.home-actions>.primary{min-height:48px;padding:10px 15px}
.home-dock-links{display:flex;justify-content:space-between;align-items:center;gap:8px;line-height:1.5}
.home-dock-links button{font-size:12px;min-height:32px;padding:5px 0}
.home-dock-links span{font-size:11px;color:var(--muted)}
.home-details{padding:15px 0 0}
.home-details .benefits{margin:0 0 15px;padding-top:12px;border-top:1px solid #49655b60}
body[data-screen="question"]{height:var(--viewport-height);min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}
body[data-screen="question"] .site-header{width:100%}
body[data-screen="question"] .site-footer{display:none}
body[data-screen="question"] main{height:100%;width:100%;max-width:510px;min-height:0;padding:0;overflow:hidden}
.question-shell{height:100%;min-height:0;display:flex;flex-direction:column}
.question-status{flex:none;padding:11px var(--page-gutter) 0}
.question-status .question-top{font-size:12px;line-height:1.5}
.question-status .progress{height:3px;margin:8px 0 0}
.question-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:15px var(--page-gutter) 5px;scroll-padding-block:10px;-webkit-overflow-scrolling:touch}
.question-scroll:focus-visible{outline-offset:-3px}
.question-scroll .question-title{font-size:21px;line-height:1.5;min-height:0;letter-spacing:0;margin:0}
.question-scroll .question-help{font-size:12px;line-height:1.6;margin:8px 0 13px}
.question-scroll .options{gap:8px}
.question-scroll .option{min-height:48px;padding:10px 14px;gap:13px;font-size:16px;line-height:1.5}
.question-scroll .option .letter{font-size:13px}
.question-scroll .skip{min-height:42px;margin:4px auto 0;padding:8px 0;font-size:12px;line-height:1.5}
.question-dock{flex:none;padding:10px var(--page-gutter) max(8px,env(safe-area-inset-bottom));box-shadow:0 -6px 18px #0d25222b}
.question-dock .question-actions{margin:0;gap:10px;grid-template-columns:1fr 2fr}
.question-dock .primary,.question-dock .secondary{min-height:48px;padding:10px 14px;line-height:1.5}
.question-dock .save-status{font-size:10px;line-height:1.5;margin:5px 0 0}
body[data-screen="context"] .context-actions.screen-dock{position:fixed;z-index:6;left:50%;bottom:var(--viewport-bottom-offset,0px);transform:translateX(-50%);width:min(100%,510px);padding:10px var(--page-gutter) max(6px,env(safe-area-inset-bottom));gap:0;margin:0}
body[data-screen="context"] .context-actions .primary{min-height:48px;padding:10px 14px}
body[data-screen="context"] .context-actions .quiet{min-height:36px;padding:5px;font-size:12px}
body[data-screen="context"] main{padding-bottom:20px;min-height:0}
body[data-screen="context"] .context-title{font-size:26px}
/* Short usable viewports: preserve legibility and touch targets, remove decoration. */
@media(max-height:700px){
 .home-first-screen{padding-top:10px;gap:5px}
 .home-first-screen .home-kicker{display:none}
 .home-first-screen .home-intro h1{font-size:29px}
 .home-summary .home-stats b{font-size:21px}
 .home-summary .home-stats div{padding:5px 3px}
 .question-scroll{padding-top:12px}
 .question-scroll .question-title{font-size:20px;line-height:1.45}
 .question-scroll .question-help{margin:7px 0 10px;font-size:11px}
 .question-scroll .option{min-height:46px;padding:9px 13px}
 .question-scroll .options{gap:7px}
}
@media(max-height:610px){
 .question-status{padding-top:8px}
 .question-scroll{padding-top:10px}
 .question-scroll .question-title{font-size:19px}
 .question-scroll .question-help{margin:6px 0 8px}
 .question-scroll .options{gap:6px}
 .question-scroll .option{min-height:44px;padding:8px 12px}
 .question-scroll .skip{min-height:38px;padding:6px 0}
 .question-dock{padding-top:8px}
}
body.short-viewport[data-screen="home"] .home-first-screen{grid-template-rows:auto minmax(0,1fr);gap:8px;padding-top:10px;padding-bottom:10px}
body.short-viewport[data-screen="home"] .home-summary{display:none}
body.short-viewport[data-screen="home"] .home-intro h1{font-size:27px}
body.short-viewport[data-screen="home"] .home-intro .intro{font-size:12px;margin-top:5px}
body.short-viewport[data-screen="home"] .home-atlas-wrap{overflow-y:auto;align-items:center}
body.short-viewport[data-screen="home"] .persona-atlas{height:auto!important;width:100%!important;aspect-ratio:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:2px;margin:0}
body.short-viewport[data-screen="home"] .atlas-lines,body.short-viewport[data-screen="home"] .atlas-center{display:none}
body.short-viewport[data-screen="home"] .atlas-pair{position:static;transform:none;max-width:none;width:auto;border-radius:10px}
body.short-viewport[data-screen="home"] .atlas-pair button{font-size:11px;min-height:35px;padding:5px 2px}
body.short-viewport[data-screen="home"] .home-dock-links span{font-size:10px}
@media(max-width:350px){:root{--page-gutter:16px}.question-scroll .question-title{font-size:18px}.question-scroll .question-help{font-size:10px}.home-first-screen .home-intro h1{font-size:28px}.home-dock-links span{font-size:10px}}
@media(min-width:800px){.home-first-screen{padding-top:18px}.home-first-screen .home-intro h1{font-size:36px}.question-scroll .question-title{font-size:23px}.question-scroll{padding-top:20px}.question-scroll .option{min-height:52px}.question-scroll .options{gap:10px}}
/* Browser chrome may shrink VisualViewport without changing CSS media height. */
body.compact-height .home-first-screen{padding-top:10px;gap:5px}
body.compact-height .home-first-screen .home-kicker{display:none}
body.compact-height .home-first-screen .home-intro h1{font-size:29px}
body.compact-height .home-summary .home-stats b{font-size:21px}
body.compact-height .home-summary .home-stats div{padding:5px 3px}
body.compact-height .question-scroll{padding-top:12px}
body.compact-height .question-scroll .question-title{font-size:20px;line-height:1.45}
body.compact-height .question-scroll .question-help{margin:7px 0 10px;font-size:11px}
body.compact-height .question-scroll .option{min-height:46px;padding:9px 13px}
body.compact-height .question-scroll .options{gap:7px}
body.tight-height .question-status{padding-top:8px}
body.tight-height .question-scroll{padding-top:10px}
body.tight-height .question-scroll .question-title{font-size:19px}
body.tight-height .question-scroll .question-help{margin:6px 0 8px}
body.tight-height .question-scroll .options{gap:6px}
body.tight-height .question-scroll .option{min-height:44px;padding:8px 12px}
body.tight-height .question-scroll .skip{min-height:38px;padding:6px 0}
body.tight-height .question-dock{padding-top:8px}
@media(max-width:350px){body.compact-height .question-scroll .question-title,body.tight-height .question-scroll .question-title{font-size:18px}}