/* PersonaScope 3.35: integrated responsive and navigation audit */
:root{--ps-gutter:clamp(12px,4vw,24px)}
html,body,#app{width:100%;max-width:100%;overflow-x:clip}
body{margin:0}
*,*::before,*::after{box-sizing:border-box}
main{width:min(100%,980px);max-width:100%;margin-inline:auto;padding-inline:var(--ps-gutter)}
.screen,.hero-grid,.hero-copy,.home-history-preview,.home-dashboard,.question-card,.result-toolbar,.report-section,.theory-section{max-width:100%}

/* Home headline: centered, large and never wider than the viewport */
#home .hero-grid{display:block;width:100%;max-width:100%;text-align:center}
#home .hero-copy{width:100%;max-width:100%;margin-inline:auto;padding-inline:0;text-align:center}
#home .hero-copy .emotional-copy{
  width:100%!important;max-width:100%!important;margin:0 auto 20px!important;padding:0!important;
  display:block!important;white-space:nowrap!important;overflow:visible!important;
  text-align:center!important;font-size:clamp(17px,4.35vw,30px)!important;
  line-height:1.35!important;letter-spacing:-.055em!important;font-weight:800!important;
  transform:none!important;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;
}
#home .hero-copy .lead{width:min(100%,720px);max-width:100%;margin-inline:auto;white-space:normal;overflow-wrap:anywhere;text-wrap:pretty}

/* Shared card alignment */
.home-history-preview,.home-type-card,.home-dashboard,.radar-panel{width:100%;max-width:100%;margin-inline:auto}
.history-preview-head{align-items:center;text-align:center}
.history-preview-head>div{width:100%;text-align:center}
.history-preview-canvas-wrap{width:100%;display:grid;place-items:center;overflow:hidden}
#homeHistoryChart,.radar-panel canvas{display:block!important;max-width:100%!important;height:auto!important;margin-inline:auto!important}

/* Result actions: stable two-column layout with no wrapper borders */
.result-toolbar.compact-actions{width:100%!important;max-width:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:12px!important;margin:22px 0!important;padding:0!important;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
.result-toolbar.compact-actions>.button,.result-toolbar.compact-actions>.result-more>summary{width:100%!important;max-width:100%!important;min-height:56px!important;margin:0!important;padding:12px 10px!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;font-size:16px!important;line-height:1.2!important;white-space:nowrap!important}
.result-more{width:100%;max-width:100%;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important}
.result-more-menu{max-width:min(310px,calc(100vw - 24px));right:0}

/* Theory navigation and content */
.theory-mode-switch{width:100%;max-width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.theory-mode-switch button{white-space:normal;overflow-wrap:anywhere}
.theory-mode-panel,.theory-mode-panel>*{max-width:100%}
.comparison-matrix>div,.factor-action-table>div{max-width:100%}

/* Footer stays in normal document flow */
.app-credit{position:static!important;inset:auto!important;width:100%;max-width:100%;margin:0;padding:28px var(--ps-gutter) calc(18px + env(safe-area-inset-bottom));text-align:right;font-size:11px;line-height:1.4;pointer-events:none}

/* Accessible focus and reduced motion */
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid rgba(134,190,255,.8);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

@media(max-width:430px){
  main{padding-inline:12px}
  #home .hero-copy .emotional-copy{font-size:clamp(16px,4.15vw,19px)!important;letter-spacing:-.065em!important}
  .result-toolbar.compact-actions{gap:10px!important}
  .result-toolbar.compact-actions>.button,.result-toolbar.compact-actions>.result-more>summary{font-size:15px!important;padding-inline:6px!important}
}
@media(max-width:350px){
  #home .hero-copy .emotional-copy{font-size:14.5px!important;letter-spacing:-.07em!important}
  .result-toolbar.compact-actions{grid-template-columns:1fr!important}
}