/* HealthyBound Quest mobile-only layout safeguards.
   Desktop is intentionally untouched: every rule is scoped to <= 768px. */
@media (max-width:768px){
  html,body{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
  body{padding-bottom:env(safe-area-inset-bottom)}
  img,video,canvas,svg{max-width:100%;height:auto}
  main,.screen,.card,.form-card,.section-title,.modal-card{min-width:0;max-width:100%}
  main{padding-left:12px!important;padding-right:12px!important}

  /* Comfortable, accessible touch controls and no iOS input zoom. */
  button,.tab,.nav-btn,.text-btn,input,select,textarea{font-size:16px}
  button,.tab,.nav-btn{min-height:44px}
  input,select,textarea{max-width:100%;width:100%;min-height:44px}
  input[type="checkbox"],input[type="radio"]{width:24px;min-height:24px}

  /* Header and screen headings wrap instead of forcing horizontal scroll. */
  .topbar{padding:10px 12px;gap:8px;align-items:center}
  .brand{min-width:0}.brand-title{font-size:1rem}.brand-tagline{display:none}
  .header-actions{gap:6px}.header-actions button{padding:8px 10px;white-space:nowrap}
  .section-title,.vp-card-header,.vp-summary-heading,.vp-food-day-heading{align-items:flex-start;flex-wrap:wrap;gap:10px}
  .section-title>*,.vp-card-header>*{min-width:0}
  h1,h2,h3,p,small,strong{overflow-wrap:anywhere}

  /* Generic multi-column content becomes a readable single column. */
  .row,.grid-2,.grid-3,.form-grid,.vp-top-grid,.vp-middle-grid,.vp-summary-grid,
  .vp-insight-grid,.snapshot-grid,.quick-grid,.vp-metabolic-grid,.vp-day-summary,
  .vp-columns,.vp-report-grid,.vp-admin-grid{grid-template-columns:1fr!important}
  .search-row{display:grid!important;grid-template-columns:1fr!important;gap:8px}
  .search-row button,.wide{width:100%}

  /* Tabs remain usable without shrinking labels into tiny targets. */
  .tabs,.vp-workout-tabs{display:flex!important;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:5px;gap:7px}
  .tabs .tab,.vp-workout-tabs .tab{flex:0 0 auto!important;width:auto!important;min-width:112px;
    white-space:nowrap;scroll-snap-align:start}

  /* Workout Plans and the new Lazy Yoga plan. */
  .vp-template-grid,.vp-exercise-library,.vp-equipment-grid{grid-template-columns:1fr!important}
  .vp-template-card{width:100%;min-height:0;padding:16px;text-align:left}
  .vp-workout-datebar{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important}
  .vp-workout-datebar label,.vp-workout-datebar button{width:100%!important;max-width:none!important}
  .vp-builder-card-top,.vp-workout-item-top{grid-template-columns:28px minmax(0,1fr) auto!important;gap:8px!important}
  .vp-builder-details,.vp-workout-item-details{grid-template-columns:1fr!important;margin-left:0!important}
  .vp-builder-details label,.vp-workout-item-details label,.vp-save-item{grid-column:1!important}
  .vp-builder-edit,.vp-workout-edit{min-width:54px;padding:8px}
  .vp-workout-builder-actions,.vp-workout-plan-actions{display:grid!important;grid-template-columns:1fr!important;width:100%}
  .vp-workout-builder-actions button,.vp-workout-plan-actions button{width:100%}

  /* Exercise guide uses the full phone viewport with large, uncropped steps. */
  #exerciseGuideModal{padding:0!important}
  #exerciseGuideModal .modal-card{width:100%!important;height:100dvh!important;max-height:none!important;border-radius:0!important}
  .vp-detail-content{padding:12px 12px calc(28px + env(safe-area-inset-bottom))!important}
  .vp-detail-title-row,.vp-guide-actions{display:grid!important;grid-template-columns:1fr!important;width:100%;gap:9px}
  .vp-guide-actions button{width:100%!important}
  .vp-photo-steps,.vp-lower-grid,.vp-detail-right,.vp-program-levels{grid-template-columns:1fr!important}
  .vp-photo-steps img{width:100%!important;height:auto!important;aspect-ratio:4/3;object-fit:contain!important}
  .vp-similar-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* Recipes and meal planning remain one-handed and readable. */
  .vp-recipe-toolbar,.vp-recipe-grid,.vp-import-controls{grid-template-columns:1fr!important}
  .vp-recipe-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vp-recipe-card .vp-exercise-actions{display:grid!important;grid-template-columns:1fr!important}
  .vp-recipe-card .vp-exercise-actions button{width:100%}
  .vp-recipe-nutrition-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hbq-week-planner,.hbq-grocery,.hbq-calendar-detail{max-width:100%;overflow:hidden}

  /* Forms and dialogs become bottom sheets that fit the visible phone height. */
  .modal{padding:0!important;align-items:flex-end!important}
  .modal-card:not(.vp-guide-modal-card){width:100%!important;max-width:none!important;max-height:92dvh!important;
    margin:0!important;border-radius:18px 18px 0 0!important;overflow-y:auto!important;
    padding:16px 14px calc(18px + env(safe-area-inset-bottom))!important}
  .modal-head{position:sticky;top:0;z-index:5;background:inherit;padding:8px 0 10px}
  .modal-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px}
  .modal-actions button{width:100%}

  /* Wide data tables scroll inside their cards, never the entire page. */
  .table-wrap,.vp-food-table-wrap,.vp-table-wrap{max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  table{max-width:none}
  .vp-food-table{min-width:760px}

  /* Dashboard and daily logging controls. */
  .vp-welcome{display:grid!important;grid-template-columns:1fr!important;gap:14px!important}
  .vp-welcome>div:first-child{min-width:0!important}
  .vp-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vp-quick-grid button{min-width:0;white-space:normal}
  .vp-week{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .vp-plan-item,.vp-history-row,.vp-myday-workout-item{min-width:0}
  .vp-myday-workout-item{align-items:flex-start;flex-wrap:wrap}

  /* Companion/chat: keep controls visible above mobile browser bars. */
  .vpc-hero,.vpc-myday,.vpa-profile,.vpa-columns{grid-template-columns:1fr!important}
  .vpc-rings,.vpa-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vpc-choices{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vpc-dialog{max-height:92dvh!important;padding:16px!important}
  .vpc-dialog-actions{display:grid!important;grid-template-columns:1fr!important}
  .vpc-dialog-actions button{width:100%}

  /* Navigation accounts for notches and browser safe areas. */
  .bottom-nav{padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .bottom-nav button{min-width:0;font-size:.72rem}
}

@media (max-width:380px){
  main{padding-left:8px!important;padding-right:8px!important}
  .card{padding-left:12px!important;padding-right:12px!important}
  .vp-quick-grid,.vpc-rings,.vpa-metrics{grid-template-columns:1fr!important}
  .vp-similar-row{grid-template-columns:1fr!important}
}

@media (hover:none) and (pointer:coarse){
  button,.tab,.nav-btn,.text-btn,[role="button"]{touch-action:manipulation}
}

/* 2026-09-19 mobile parity patch
   Mobile uses the same exact dashboard/Companion guidance generated for desktop.
   Only the layout changes; companion data and message logic remain shared. */
@media (max-width:979px){
  body.vpx-dashboard-mode #dashboard>*:not(#vpExactDashboard){display:none!important}
  body.vpx-dashboard-mode #vpExactDashboard{display:block!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0 0 18px!important;box-sizing:border-box!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-side{display:none!important}

  body.vpx-dashboard-mode #vpExactDashboard .vpx-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px!important;margin:4px 0 14px!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-greet{display:flex!important;align-items:center!important;gap:9px!important;min-width:0!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-sun{font-size:28px!important;flex:0 0 auto!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-greet h1{margin:0 0 3px!important;font-size:27px!important;line-height:1.05!important;color:var(--text,#f7f8ff)!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-greet p{margin:0!important;font-size:13px!important;line-height:1.35!important;color:var(--muted,#aebbd3)!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-date{flex:0 0 auto!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:999px!important;padding:8px 10px!important;font-size:11px!important;color:inherit!important;background:rgba(255,255,255,.04)!important}

  /* Same Companion + guidance block as desktop, stacked for a phone. */
  body.vpx-dashboard-mode #vpExactDashboard .vpx-hero{display:grid!important;grid-template-columns:1fr!important;width:100%!important;max-width:100%!important;min-height:0!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:16px!important;overflow:hidden!important;background:#11161c!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-character{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:310px!important;padding:16px 16px 112px!important;box-sizing:border-box!important;background:#0d1218!important;overflow:hidden!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-character:after{display:none!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-character:before{content:""!important;display:block!important;width:min(250px,72vw)!important;height:190px!important;border-radius:14px!important;background-image:var(--vpx-avatar)!important;background-repeat:no-repeat!important;background-size:contain!important;background-position:center center!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-character[data-companion-type="wolf"]:before,
  body.vpx-dashboard-mode #vpExactDashboard .vpx-character[data-companion-type="raven"]:before{background-size:contain!important;background-position:center!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-character-card{position:absolute!important;z-index:2!important;left:12px!important;right:12px!important;bottom:12px!important;max-width:none!important;padding:9px 11px!important;box-sizing:border-box!important;border:1px solid rgba(255,255,255,.15)!important;border-radius:10px!important;background:rgba(10,14,19,.96)!important;color:#fff!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-character-card strong{font-size:17px!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-character-card small{display:block!important;margin-top:2px!important;font-size:11px!important;color:#c8cbd2!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-xp{height:5px!important;margin-top:6px!important;border-radius:99px!important;overflow:hidden!important;background:#2a3038!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-xp span{display:block!important;height:100%!important;background:#9d596f!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-strength-meter{right:10px!important;top:12px!important;bottom:auto!important;max-height:205px!important}

  body.vpx-dashboard-mode #vpExactDashboard .vpx-progress{display:flex!important;flex-direction:column!important;min-width:0!important;padding:14px!important;box-sizing:border-box!important;overflow:visible!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-companion-bubble{display:block!important;position:relative!important;width:100%!important;max-width:100%!important;margin:0 0 14px!important;padding:14px 15px!important;min-height:0!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:14px!important;background:#171d25!important;color:#fff!important;text-align:left!important;font-size:14px!important;line-height:1.45!important;box-sizing:border-box!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-companion-bubble span{display:block!important;color:#fff!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-companion-bubble small{display:block!important;margin-top:6px!important;color:#d58aa5!important;font-weight:800!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-progress-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-progress-head h2{margin:0!important;font-size:20px!important;color:inherit!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-link{border:0!important;background:transparent!important;color:#d58aa5!important;padding:6px!important;font-weight:800!important;min-height:0!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-rings{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px 8px!important;width:100%!important;margin:15px 0!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-ring-wrap{text-align:center!important;min-width:0!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-ring{width:82px!important;height:82px!important;margin:auto!important;border-radius:50%!important;display:grid!important;place-items:center!important;position:relative!important;background:conic-gradient(var(--ring) calc(var(--pct)*1%),#292f36 0)!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-ring:before{content:""!important;position:absolute!important;inset:8px!important;border-radius:50%!important;background:#11161c!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-ring div{position:relative!important;z-index:1!important;font-size:18px!important;font-weight:900!important;color:#fff!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-ring div span{display:none!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-ring-wrap b{display:block!important;margin-top:6px!important;font-size:13px!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-ring-wrap small{display:block!important;margin-top:2px!important;font-size:11px!important;color:#aeb5bf!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-says{display:block!important;padding:12px!important;border:1px solid rgba(255,255,255,.12)!important;border-left:3px solid #9d596f!important;border-radius:9px!important;background:#151b22!important;font-size:13px!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-says b{display:block!important;margin-bottom:3px!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-says span{color:#c9cdd5!important}

  /* Keep the rest of the desktop dashboard available below the Companion. */
  body.vpx-dashboard-mode #vpExactDashboard .vpx-grid{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;margin-top:12px!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-card{padding:14px!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:12px!important;background:#121820!important;box-sizing:border-box!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-card-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin-bottom:10px!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-card h2{margin:0!important;font-size:18px!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-plan-row,
  body.vpx-dashboard-mode #vpExactDashboard .vpx-quest{display:grid!important;grid-template-columns:38px minmax(0,1fr) auto!important;gap:8px!important;align-items:center!important;padding:9px!important;margin:6px 0!important;border-radius:8px!important;background:#171f28!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-quote{min-height:180px!important;padding:18px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:12px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;text-align:center!important;background:#171b22!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-quote blockquote{margin:0 0 12px!important;font-size:19px!important;font-weight:800!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-actions button{width:100%!important;padding:10px 7px!important;border-radius:8px!important;border:1px solid rgba(255,255,255,.12)!important;background:#1a222c!important;color:#fff!important;font-weight:800!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-chooser-mini{display:none!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-footer{margin-top:12px!important;padding:13px!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:10px!important;text-align:center!important;font-size:12px!important;background:#151a21!important}

  /* Exercise Library parity: How To/Start/History/Add remain visible on phones. */
  .vp-exercise-card .vp-exercise-actions,
  .vp-workout-item .vp-item-action-row,
  .vp-builder-card .vp-item-action-row{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;width:100%!important}
  .vp-exercise-card .vp-exercise-actions button,
  .vp-howto-btn,.vp-start-card{display:block!important;visibility:visible!important;opacity:1!important;width:100%!important;min-height:44px!important;margin:0!important}
}

@media (max-width:520px){
  body.vpx-dashboard-mode #vpExactDashboard .vpx-head{display:grid!important;grid-template-columns:1fr!important}
  body.vpx-dashboard-mode #vpExactDashboard .vpx-date{justify-self:start!important}
}

/* 2026-09-19 mobile Companion portrait/status refinement.
   Preserve the desktop Companion pieces; only reflow them for narrow screens. */
@media (max-width:979px){
  body.vpx-dashboard-mode #vpExactDashboard .vpx-character{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 54px!important;
    grid-template-rows:auto auto!important;
    align-items:stretch!important;
    gap:12px 10px!important;
    min-height:0!important;
    padding:14px!important;
    overflow:visible!important;
  }
  body.vpx-dashboard-mode #vpExactDashboard .vpx-character:before{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    height:300px!important;
    min-height:300px!important;
    border-radius:14px!important;
    background-size:cover!important;
    background-position:center 30%!important;
    border:1px solid #303943!important;
    box-sizing:border-box!important;
  }
  body.vpx-dashboard-mode #vpExactDashboard .vpx-character[data-companion-type="wolf"]:before,
  body.vpx-dashboard-mode #vpExactDashboard .vpx-character[data-companion-type="raven"]:before{
    background-size:cover!important;
    background-position:center 30%!important;
  }
  body.vpx-dashboard-mode #vpExactDashboard .vpx-strength-meter{
    grid-column:2!important;
    grid-row:1!important;
    position:static!important;
    width:54px!important;
    height:300px!important;
    max-height:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:7px!important;
    padding:3px 0!important;
    box-sizing:border-box!important;
    color:#f4dce7!important;
  }
  body.vpx-dashboard-mode #vpExactDashboard .vpx-strength-meter b{
    display:block!important;
    flex:0 0 auto!important;
    font-size:10px!important;
    line-height:1!important;
    letter-spacing:.1em!important;
    text-transform:uppercase!important;
    writing-mode:vertical-rl!important;
    transform:rotate(180deg)!important;
    white-space:nowrap!important;
  }
  body.vpx-dashboard-mode #vpExactDashboard .vpx-strength-track{
    display:block!important;
    position:relative!important;
    flex:1 1 auto!important;
    width:14px!important;
    min-height:130px!important;
    border:1px solid #4a3a45!important;
    border-radius:999px!important;
    background:#242931!important;
    overflow:hidden!important;
    box-shadow:inset 0 0 0 2px rgba(0,0,0,.18)!important;
  }
  body.vpx-dashboard-mode #vpExactDashboard .vpx-strength-track span{
    display:block!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:0;
    border-radius:999px!important;
    background:linear-gradient(0deg,#8f294f,#d45e91 55%,#f4a2c4)!important;
  }
  body.vpx-dashboard-mode #vpExactDashboard .vpx-strength-meter small{
    display:block!important;
    flex:0 0 auto!important;
    font-size:11px!important;
    line-height:1.1!important;
    font-weight:800!important;
    color:#e89ab9!important;
    white-space:nowrap!important;
  }
  body.vpx-dashboard-mode #vpExactDashboard .vpx-character-card{
    grid-column:1 / -1!important;
    grid-row:2!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:12px 14px!important;
    border-radius:12px!important;
    box-sizing:border-box!important;
  }
  body.vpx-dashboard-mode #vpExactDashboard .vpx-character-card .hbq-vitality{
    margin-top:8px!important;
    padding-top:8px!important;
  }
  body.vpx-dashboard-mode #vpExactDashboard .vpx-character-card .hbq-needs{
    max-height:none!important;
    overflow:visible!important;
  }
  body.vpx-dashboard-mode #vpExactDashboard .hbq-vitality-score,
  body.vpx-dashboard-mode #vpExactDashboard .hbq-needs>div{
    min-width:0!important;
  }
}

@media (max-width:430px){
  body.vpx-dashboard-mode #vpExactDashboard .vpx-character{
    grid-template-columns:minmax(0,1fr) 46px!important;
    gap:10px 8px!important;
    padding:12px!important;
  }
  body.vpx-dashboard-mode #vpExactDashboard .vpx-character:before{
    height:270px!important;
    min-height:270px!important;
  }
  body.vpx-dashboard-mode #vpExactDashboard .vpx-strength-meter{
    width:46px!important;
    height:270px!important;
  }
}