/* PersonaScope 3.42 UI stabilization */
:root{--ps-page-pad:clamp(14px,4vw,28px)}
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:clip}
body{min-width:0}
.app-shell,.app-main,.screen,.section-shell,.card,.panel,article,section,nav,header,footer{min-width:0;max-width:100%}
img,svg,canvas,video{max-width:100%;height:auto}
button,input,select,textarea{max-width:100%;font:inherit}
.screen{width:100%;padding-inline:max(var(--ps-page-pad),env(safe-area-inset-left));padding-right:max(var(--ps-page-pad),env(safe-area-inset-right))}
.topbar{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}

/* Hero: centered, readable and never wider than the viewport */
#home .hero-copy{width:min(100%,980px);margin-inline:auto;text-align:center}
#home .emotional-copy{
  width:100%;max-width:100%;margin:0 auto 16px;text-align:center;
  font-size:clamp(20px,5.7vw,40px);line-height:1.25;font-weight:800;
  letter-spacing:-.035em;white-space:normal;overflow-wrap:anywhere;
  border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;
}
#home .hero-copy .lead{max-width:760px;font-size:clamp(14px,3.8vw,18px);line-height:1.8}

/* Common grids: no overflow, balanced alignment */
.hero-actions,.compact-actions,.action-grid,.report-actions,.theory-entry-grid,.feature-grid,.quality-strip,.report-grid,.lab-grid,.library-grid{
  width:100%;max-width:100%;margin-inline:auto
}
.hero-actions,.compact-actions,.action-grid,.report-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important}
.hero-actions .button,.compact-actions .button,.action-grid .button,.report-actions .button{
  width:100%!important;min-width:0!important;margin:0!important;justify-content:center;text-align:center;
  min-height:50px;padding:12px 10px;font-size:clamp(14px,3.7vw,17px);line-height:1.25;white-space:normal
}

/* Charts and result cards stay centered */
#home canvas,#result canvas,#history canvas,.chart-wrap,.radar-wrap,.history-chart,.result-chart{display:block;margin-inline:auto;max-width:100%!important}
#home .home-type-card,#home .history-preview,#home .quality-strip,#home .feature-grid,#result .result-card,#history .history-card{margin-left:auto;margin-right:auto}

/* Footer credit is in normal flow and never overlays content */
.app-credit{position:static!important;inset:auto!important;width:100%;margin:28px auto 10px;padding:14px var(--ps-page-pad) max(12px,env(safe-area-inset-bottom));text-align:center;font-size:11px;line-height:1.4;opacity:.58;pointer-events:none}

/* App dialog replacing browser alerts */
.ps-dialog{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.ps-dialog.hidden{display:none!important}
.ps-dialog-backdrop{position:absolute;inset:0;background:rgba(2,7,18,.72);backdrop-filter:blur(8px)}
.ps-dialog-panel{position:relative;width:min(100%,420px);max-height:min(80dvh,620px);overflow:auto;padding:24px;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:linear-gradient(160deg,rgba(18,30,54,.98),rgba(7,15,30,.98));box-shadow:0 24px 80px rgba(0,0,0,.5);text-align:center}
.ps-dialog-panel h2{margin:4px 0 10px;font-size:clamp(20px,5vw,26px)}
.ps-dialog-panel #psDialogMessage{margin:0 0 20px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.75;font-size:clamp(15px,4vw,17px)}
.ps-dialog-panel .button{width:100%;min-height:48px;font-size:16px}
body.ps-dialog-open{overflow:hidden}

@media(max-width:430px){
  :root{--ps-page-pad:14px}
  .screen{padding-inline:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  #home .emotional-copy{font-size:clamp(19px,5.25vw,24px);letter-spacing:-.045em}
  .hero-actions,.compact-actions,.action-grid,.report-actions{gap:9px!important}
  .hero-actions .button,.compact-actions .button,.action-grid .button,.report-actions .button{padding:11px 7px;font-size:14px}
}
@media(max-width:350px){
  #home .emotional-copy{font-size:18px}
  .hero-actions,.compact-actions,.action-grid,.report-actions{grid-template-columns:1fr}
}
@media(min-width:768px){
  .screen{padding-inline:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right))}
  .app-main{max-width:1180px;margin-inline:auto}
}