/* PersonaScope 3.43 adaptive viewport layout */
:root{
  --ps-safe-left:max(12px,env(safe-area-inset-left));
  --ps-safe-right:max(12px,env(safe-area-inset-right));
  --ps-content-max:1180px;
  --ps-gap:clamp(10px,2.8vw,18px);
}
html{width:100%;min-width:0;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body,#app{width:100%;min-width:0;max-width:100%;overflow-x:hidden}
body{margin:0}
main{
  width:min(100%,var(--ps-content-max));
  max-width:var(--ps-content-max);
  min-width:0;
  margin-inline:auto;
  padding-left:var(--ps-safe-left)!important;
  padding-right:var(--ps-safe-right)!important;
}
.screen{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  padding-left:0!important;
  padding-right:0!important;
  overflow-wrap:anywhere;
}
.app-header{
  width:100%;min-width:0;
  padding-left:max(14px,env(safe-area-inset-left))!important;
  padding-right:max(14px,env(safe-area-inset-right))!important;
}
.brand-button{min-width:0;max-width:calc(100% - 52px)}
.brand-button>span:last-child{min-width:0}
#brandTitle,#brandSubtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-menu{max-width:calc(100vw - 24px);right:max(12px,env(safe-area-inset-right))!important}

/* All layout containers must shrink with the viewport. */
.hero-grid,.home-dashboard,.home-stat-grid,.quality-strip,.feature-grid,.choice-grid,.report-grid,
.detail-grid,.theory-entry-grid,.theory-grid,.library-grid,.lab-grid,.quiz-nav,.resume-actions,
.result-toolbar,.result-actions,.history-grid,.compact-actions,.action-grid,.report-actions{
  width:100%;min-width:0;max-width:100%;
}
.hero-grid>* ,.home-dashboard>* ,.home-stat-grid>* ,.quality-strip>* ,.feature-grid>*,
.choice-grid>* ,.report-grid>* ,.detail-grid>* ,.theory-entry-grid>* ,.theory-grid>*,
.library-grid>* ,.lab-grid>* ,.history-grid>*{min-width:0;max-width:100%}

/* Home hero and headline scale continuously instead of relying on device names. */
#home .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:clamp(18px,4vw,34px)}
#home .hero-copy{min-width:0;width:100%;max-width:100%}
#home .emotional-copy{
  display:block;width:100%;max-width:100%;
  font-size:clamp(20px,5.25vw,38px)!important;
  line-height:1.28!important;
  letter-spacing:clamp(-1.2px,-.12vw,-.2px)!important;
  white-space:normal!important;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
#home .hero-copy .lead{width:100%;max-width:760px;margin-inline:auto}
.home-history-preview,.home-type-card,.question-card,.theory-section,.chart-panel,.notice-card,.privacy-card,
.lab-panel,.library-panel,.quiz-panel,.result-card,.history-card{width:100%;min-width:0;max-width:100%}
.history-preview-head{min-width:0;gap:10px;flex-wrap:wrap}
.history-preview-head>div{min-width:0;flex:1 1 220px}
.history-preview-link{flex:0 1 auto;white-space:normal}
.history-preview-canvas-wrap{width:100%;min-width:0;overflow:hidden}
canvas{display:block;max-width:100%!important;height:auto!important;margin-inline:auto}

/* Buttons are fluid and never force a wider page. */
button,.button,[role="button"]{min-width:0;max-width:100%}
.hero-actions,.compact-actions,.action-grid,.report-actions,.quiz-nav,.resume-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--ps-gap)!important;
}
.hero-actions .button,.compact-actions .button,.action-grid .button,.report-actions .button,
.quiz-nav .button,.resume-actions .button{
  width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;
  white-space:normal!important;overflow-wrap:anywhere;text-align:center;justify-content:center;
}
.button.full,.ghost.full{width:100%!important}

/* Forms and long text */
input,select,textarea{width:100%;min-width:0}
pre,code{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
table{width:100%;max-width:100%;table-layout:fixed}
th,td{overflow-wrap:anywhere}

/* Adaptive breakpoints by viewport width. */
@media (max-width:820px){
  #home .hero-grid{grid-template-columns:1fr}
  .choice-grid.three-modes,.theory-entry-grid,.library-grid,.lab-grid{grid-template-columns:1fr!important}
  .home-history-preview{max-width:700px;margin-inline:auto}
}
@media (max-width:560px){
  :root{--ps-gap:10px}
  main{padding-left:max(12px,env(safe-area-inset-left))!important;padding-right:max(12px,env(safe-area-inset-right))!important}
  #home .emotional-copy{font-size:clamp(19px,5.45vw,29px)!important;line-height:1.32!important}
  .quality-strip,.feature-grid,.home-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .section-heading h1{font-size:clamp(25px,7vw,34px)}
}
@media (max-width:390px){
  #home .emotional-copy{font-size:clamp(18px,5.15vw,22px)!important;letter-spacing:-.35px!important}
  .hero-actions,.compact-actions,.action-grid,.report-actions,.quiz-nav,.resume-actions{grid-template-columns:1fr!important}
  .quality-strip,.feature-grid,.home-stat-grid{grid-template-columns:1fr!important}
  .app-header{padding-left:max(10px,env(safe-area-inset-left))!important;padding-right:max(10px,env(safe-area-inset-right))!important}
}
@media (min-width:1181px){
  main{padding-left:28px!important;padding-right:28px!important}
}

/* Footer remains in document flow and respects device safe areas. */
.app-credit{
  position:static!important;width:100%;max-width:var(--ps-content-max);margin:28px auto 0!important;
  padding:14px max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important;
  text-align:center;
}