/* Querencia shared responsive foundation
   Applies to the shared General shell and the specialised Family / Repair shells.
   Keep app-specific visual styling in each template's own styles.css. */
:root{
  --q-safe-top:env(safe-area-inset-top, 0px);
  --q-safe-right:env(safe-area-inset-right, 0px);
  --q-safe-bottom:env(safe-area-inset-bottom, 0px);
  --q-safe-left:env(safe-area-inset-left, 0px);
  --q-viewport-height:100vh;
}
@supports (height:100svh){:root{--q-viewport-height:100svh}}
@supports (height:100dvh){:root{--q-viewport-height:100dvh}}

html,body{
  width:100%;
  min-height:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{min-height:var(--q-viewport-height)}
img,svg,video,canvas{max-width:100%}
button,a,input,textarea,select{max-width:100%}
button,a,select,input,textarea{-webkit-tap-highlight-color:transparent}

/* Prevent grid and flex children from forcing horizontal overflow. */
.main,.screen,.stack,.row,.pathway-grid,.pathway-tile,.pathway-copy,.deck-card,.deck-card-copy,
.active-pathway-banner,.controls,.question-screen,.question-wrap,.question-top,.question-card,
.section-grid,.icon-card,.card-title,.card-sub,.top-title,.bf-guide-screen,.bf-prompt-card,
.focus-overlay,.focus-inner,.focus-question,.focus-deeper{min-width:0}
.pathway-title,.pathway-sub,.deck-card-copy,.title,.sub,.card-title,.card-sub,.top-title,
.question-text,.followup,.focus-question,.focus-deeper li,.bf-prompt-text,.bf-followup{
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Shared General / Repair shells: use the full phone width on real phones. */
@media (max-width:520px){
  .app-shell{min-height:var(--q-viewport-height);padding:0}
  .phone{
    width:100%;
    min-height:var(--q-viewport-height);
    border-radius:0;
    border-left:0;
    border-right:0;
    box-shadow:none;
  }
  .topbar{
    padding:calc(10px + var(--q-safe-top)) max(14px,var(--q-safe-right)) 10px max(14px,var(--q-safe-left));
  }
  .brand-wordmark{width:122px}
  .brand-slogan{font-size:9px;letter-spacing:.085em}
  .top-btn{min-height:40px;padding:7px 10px}
  .main{padding:17px max(14px,var(--q-safe-right)) 18px max(14px,var(--q-safe-left))}
  .footer{padding:10px max(14px,var(--q-safe-right)) calc(10px + var(--q-safe-bottom)) max(14px,var(--q-safe-left))}
  h1{font-size:clamp(31px,9.2vw,43px)}
  h2{font-size:clamp(27px,8vw,31px)}
  .lead{font-size:15px;line-height:1.42;margin:13px 0 18px}
  .pathway-tile{grid-template-columns:minmax(70px,25%) minmax(0,1fr) auto;gap:10px;padding:9px 10px 9px 9px;min-height:96px}
  .pathway-thumb{min-height:76px;border-radius:13px}
  .pathway-title{font-size:clamp(19px,6vw,22px)}
  .pathway-sub{font-size:11.5px;line-height:1.28}
  .pathway-count{font-size:10px;padding:3px 7px}
  .pathway-chevron{font-size:27px}
  .active-pathway-banner{min-height:102px;padding:13px;border-radius:16px}
  .active-pathway-banner strong{font-size:23px}
  .active-pathway-banner span{font-size:12px}
  .deck-card{grid-template-columns:74px minmax(0,1fr);gap:10px;padding:10px}
  .deck-card-thumb{min-height:70px;border-radius:12px}
  .deck-card-copy{gap:5px}
  .title{font-size:16px}
  .sub{font-size:12.5px;line-height:1.34}
  .deck-banner{height:118px;margin-bottom:13px;border-radius:16px}
  .controls{grid-template-columns:1fr;gap:8px}
  .question-screen{border-radius:15px;padding:13px}
  .question-card{padding:18px 15px;border-radius:16px}
  .question-text{font-size:clamp(27px,8.4vw,32px);line-height:1.1}
  .deeper{padding-top:14px;margin-top:14px}
  .deeper ul{font-size:15px;line-height:1.42}
  .badge-row{margin:13px 0 14px}
  .actions{gap:8px}
  .primary,.secondary,.danger{min-height:42px;padding:11px 12px}
}

/* General / Repair focus mode must scroll on short screens. */
.focus-overlay{
  min-height:var(--q-viewport-height);
  max-height:var(--q-viewport-height);
  overflow-y:auto;
  justify-content:flex-start;
  padding:calc(72px + var(--q-safe-top)) max(16px,var(--q-safe-right)) calc(112px + var(--q-safe-bottom)) max(16px,var(--q-safe-left));
}
.focus-inner{width:min(100%,780px);margin:auto;max-height:none;overflow:visible}
.focus-controls{
  position:fixed;
  left:max(14px,var(--q-safe-left));
  right:max(14px,var(--q-safe-right));
  bottom:calc(38px + var(--q-safe-bottom));
}
.focus-foot{position:fixed}
.focus-question{font-size:clamp(30px,8.4vw,58px)}
.focus-deeper ul{font-size:clamp(17px,5vw,20px)}

/* Family shell: use dynamic viewport units and permit scroll fallback. */
#app.app-shell{min-height:var(--q-viewport-height)}
#app .screen{min-height:var(--q-viewport-height)}
#app .hero-content{padding-left:max(18px,var(--q-safe-left));padding-right:max(18px,var(--q-safe-right))}
#app .topbar{padding-top:var(--q-safe-top)}
#app .icon-card{grid-template-columns:54px minmax(0,1fr) auto}
#app .icon-card.has-thumb{grid-template-columns:74px minmax(0,1fr) auto}
#app .question-screen{min-height:var(--q-viewport-height);height:auto;overflow-y:auto}
#app .question-wrap{
  min-height:var(--q-viewport-height);
  height:auto;
  max-height:var(--q-viewport-height);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  padding:calc(14px + var(--q-safe-top)) max(14px,var(--q-safe-right)) calc(10px + var(--q-safe-bottom)) max(14px,var(--q-safe-left));
}
#app .question-top{position:sticky;top:0;z-index:4;padding:3px 0 5px;background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,0))}
#app .question-card{flex:1 0 auto;overflow:visible;padding:clamp(18px,6vh,54px) 2px 10px}
#app .question-text{font-size:clamp(31px,9vw,60px);line-height:1.03}
#app .followup{font-size:clamp(21px,5.8vw,38px);line-height:1.28}
#app .follow-button-row{position:sticky;bottom:64px;z-index:3;min-height:54px;padding:3px 0}
#app .question-actions{
  position:sticky;
  bottom:2px;
  z-index:4;
  padding:7px 0 max(2px,var(--q-safe-bottom));
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.46) 26%,rgba(0,0,0,.62));
}
#app .bf-guide-screen{min-height:var(--q-viewport-height);height:auto;overflow-y:auto}
#app .bf-topbar{padding-top:calc(.6rem + var(--q-safe-top))}
#app .bf-prompt-card{flex:1 0 auto;min-height:0;overflow:visible}
#app .bf-guide-actions{position:sticky;bottom:0;z-index:3;padding-bottom:calc(.75rem + var(--q-safe-bottom));background:linear-gradient(180deg,rgba(250,249,247,0),rgba(250,249,247,.96) 28%)}

@media (max-width:390px){
  #app .screen{padding:14px max(13px,var(--q-safe-right)) calc(16px + var(--q-safe-bottom)) max(13px,var(--q-safe-left));gap:14px}
  #app .hero-screen{padding:0}
  #app .hero-content{padding:22px max(17px,var(--q-safe-right)) calc(22px + var(--q-safe-bottom)) max(17px,var(--q-safe-left))}
  #app .hero-logo{width:min(330px,82vw);margin-bottom:14px}
  #app .hero-title{font-size:clamp(42px,12vw,70px)}
  #app .hero-subtitle{font-size:clamp(18px,5vw,23px);margin-bottom:15px}
  #app .hero-copy{font-size:14px;line-height:1.43;margin-bottom:16px}
  #app .section-heading{font-size:clamp(32px,9.5vw,38px)}
  #app .section-lead{font-size:14px;line-height:1.42}
  #app .section-grid{gap:10px}
  #app .icon-card{grid-template-columns:46px minmax(0,1fr) auto;gap:9px;padding:11px;border-radius:18px;min-height:48px}
  #app .icon-card.has-thumb{grid-template-columns:58px minmax(0,1fr) auto}
  #app .icon{width:44px;height:44px;border-radius:15px;font-size:22px}
  #app .card-thumb{width:56px;height:52px;border-radius:14px}
  #app .card-title{font-size:16px}
  #app .card-sub{font-size:12px;line-height:1.27;margin-top:3px}
  #app .count-pill{font-size:11px;padding:5px 7px}
  #app .back-btn{padding:8px 11px;min-height:40px}
  #app .top-title{font-size:14px;line-height:1.2}
  #app .question-text{font-size:clamp(29px,8.6vw,48px)}
  #app .followup{font-size:clamp(20px,5.5vw,32px)}
  #app .followups{gap:10px;margin-top:16px}
  #app .follow-btn{padding:11px 15px;font-size:14px}
  #app .question-actions{gap:8px}
  #app .question-actions button{padding:11px 10px;min-height:42px}
  #app .bf-step-header{padding:1rem 1.1rem .65rem}
  #app .bf-prompt-card{margin:.75rem .85rem;padding:1rem;gap:.55rem}
  #app .bf-guide-actions{padding:.55rem .85rem calc(.7rem + var(--q-safe-bottom))}
}

@media (max-height:700px) and (orientation:portrait){
  #app .question-card{padding-top:14px}
  #app .question-text{font-size:clamp(27px,8vw,44px)}
  #app .followup{font-size:clamp(19px,5vw,29px)}
  #app .follow-button-row{min-height:48px;bottom:58px}
  #app .question-actions button{padding:10px}
  .focus-overlay{padding-top:calc(62px + var(--q-safe-top));padding-bottom:calc(102px + var(--q-safe-bottom))}
  .focus-question{font-size:clamp(28px,7.6vw,48px)}
}

/* Landscape on small phones: keep controls reachable and allow vertical scrolling. */
@media (orientation:landscape) and (max-height:520px){
  .app-shell{padding:0;min-height:var(--q-viewport-height)}
  .phone{min-height:var(--q-viewport-height);border-radius:0;box-shadow:none}
  .topbar{padding:calc(6px + var(--q-safe-top)) max(12px,var(--q-safe-right)) 6px max(12px,var(--q-safe-left))}
  .main{padding:11px max(12px,var(--q-safe-right)) 12px max(12px,var(--q-safe-left))}
  .footer{padding:7px max(12px,var(--q-safe-right)) calc(7px + var(--q-safe-bottom)) max(12px,var(--q-safe-left))}
  .hero{min-height:var(--q-viewport-height);padding:18px max(18px,var(--q-safe-right)) calc(14px + var(--q-safe-bottom)) max(18px,var(--q-safe-left))}
  .hero-card{padding:14px 16px}
  .lead{margin:9px 0 13px}
  .deck-banner{height:88px}
  .focus-overlay{padding:calc(54px + var(--q-safe-top)) max(14px,var(--q-safe-right)) calc(86px + var(--q-safe-bottom)) max(14px,var(--q-safe-left))}
  .focus-question{font-size:clamp(25px,5.7vw,42px);margin-bottom:13px}
  .focus-deeper h3{margin-bottom:7px}
  .focus-deeper ul{font-size:clamp(15px,3.3vw,18px);line-height:1.32}
  .focus-controls{bottom:calc(26px + var(--q-safe-bottom))}
  .focus-nav{min-height:38px;padding:8px 12px}
  .focus-foot{bottom:calc(6px + var(--q-safe-bottom))}

  #app .screen{min-height:var(--q-viewport-height);padding:10px max(12px,var(--q-safe-right)) calc(10px + var(--q-safe-bottom)) max(12px,var(--q-safe-left));gap:10px}
  #app .hero-screen{padding:0}
  #app .hero-content{padding:14px max(18px,var(--q-safe-right)) calc(12px + var(--q-safe-bottom)) max(18px,var(--q-safe-left))}
  #app .hero-logo{width:min(240px,42vw);margin-bottom:6px}
  #app .hero-title{font-size:clamp(35px,7vw,54px);margin-bottom:7px}
  #app .hero-subtitle{font-size:clamp(16px,3.4vw,21px);margin-bottom:8px}
  #app .hero-copy{font-size:12.5px;line-height:1.35;margin-bottom:10px;max-width:44em}
  #app .primary{min-height:42px;padding:10px 14px}
  #app .question-wrap{padding:calc(8px + var(--q-safe-top)) max(12px,var(--q-safe-right)) calc(5px + var(--q-safe-bottom)) max(12px,var(--q-safe-left));gap:8px}
  #app .question-top{padding:0 0 3px}
  #app .question-top button{padding:7px 10px;min-height:38px}
  #app .fav{width:38px;height:38px;font-size:20px}
  #app .question-card{padding:8px 2px 4px}
  #app .cat-kicker{font-size:10px;margin-bottom:7px}
  #app .question-text{font-size:clamp(25px,5.4vw,42px)}
  #app .followups{margin-top:10px;gap:7px}
  #app .followup{font-size:clamp(18px,3.8vw,28px)}
  #app .follow-button-row{min-height:42px;bottom:48px}
  #app .follow-btn{padding:9px 13px;font-size:13px}
  #app .question-actions{padding:5px 0 max(1px,var(--q-safe-bottom));gap:8px}
  #app .question-actions button{min-height:38px;padding:8px 10px}
  #app .bf-guide-screen{min-height:var(--q-viewport-height)}
  #app .bf-step-header{padding:.55rem 1rem .45rem}
  #app .bf-step-name{font-size:1.25rem}
  #app .bf-step-subtitle{font-size:.78rem}
  #app .bf-prompt-card{margin:.45rem .75rem;padding:.75rem;gap:.4rem}
  #app .bf-prompt-text{font-size:1.05rem}
  #app .bf-followup{font-size:.77rem;padding:.45rem .6rem}
  #app .bf-guide-actions{padding:.42rem .75rem calc(.5rem + var(--q-safe-bottom))}
  #app .bf-guide-actions button{padding:.55rem .95rem;font-size:.86rem}
}