/* iPhone layout refinements shared by the app, exercise library and community. */
html{
  width:100%;
  min-height:100%;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  overflow-x:clip;
}
img,svg,canvas,video{max-width:100%}
input,select,textarea{font-size:16px}

@media(max-width:700px){
  :root{--iphone-gutter:max(14px,env(safe-area-inset-left));--iphone-nav-space:calc(86px + env(safe-area-inset-bottom))}
  body{padding-bottom:var(--iphone-nav-space)!important}
  body>.topbar{padding-top:env(safe-area-inset-top)}
  body>.topbar .navrow{width:auto;margin-left:var(--iphone-gutter);margin-right:max(14px,env(safe-area-inset-right))}
  body>.topbar .brand{min-width:0}
  body>.topbar .brand span{overflow:hidden;text-overflow:ellipsis}

  .mobile-primary{
    left:max(12px,env(safe-area-inset-left))!important;
    right:max(12px,env(safe-area-inset-right))!important;
    bottom:max(10px,env(safe-area-inset-bottom))!important;
    width:auto!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:3px!important;
    padding:6px!important;
  }
  .mobile-primary a{min-width:0;min-height:48px;padding:0 4px;white-space:nowrap}

  .goal-ui.module-mode main.wrap,
  .module-mode main.wrap{
    width:auto!important;
    max-width:none!important;
    margin-left:var(--iphone-gutter)!important;
    margin-right:max(14px,env(safe-area-inset-right))!important;
  }
  .module-mode main>section{min-width:0}
  .goal-heading h1,.goal-home-heading h1,.goal-target h2,.today-card h2{overflow-wrap:anywhere}
  .goal-bottom{bottom:var(--iphone-nav-space)!important}
  .goal-today-actions,.today-card-actions,.btnrow{min-width:0}
  .goal-today-actions .btn,.today-card-actions .btn{min-width:0;white-space:normal}

  .social-shell{width:100%;min-width:0}
  .social-panel{border-radius:18px}
  .auth-main{padding:20px 18px 22px}
  .social-tabs{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:3px;
    margin-bottom:24px;
  }
  .social-tabs button{min-width:0;padding:8px 4px;font-size:13px;white-space:nowrap}
  .social-form{gap:14px}
  .social-form h3{font-size:24px;line-height:1.3}
  .social-form input,.social-form button{min-height:48px}
  .account-head,.account-tools,.friends-area{padding-left:18px;padding-right:18px}
  .friend-code-box strong{font-size:clamp(20px,7vw,25px);overflow-wrap:anywhere}
  .friend-card{min-width:0}
  .friend-person,.friend-stats{min-width:0}
  .account-foot{padding-left:18px;padding-right:18px}

  .focus-workout,.workout-complete,.full-plan{min-width:0}
  .focus-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .focus-inputs input{width:100%;min-width:0}
  .workout-dock{
    padding-bottom:calc(10px + env(safe-area-inset-bottom))!important;
    padding-left:max(12px,env(safe-area-inset-left))!important;
    padding-right:max(12px,env(safe-area-inset-right))!important;
  }
  body.workout-active{padding-bottom:calc(82px + env(safe-area-inset-bottom))!important}
  .ubear-motion{max-height:calc(100dvh - env(safe-area-inset-top));overflow:auto}

  .workspace{width:auto!important;margin-left:12px!important;margin-right:12px!important}
  .workspace .library,.workspace .detail{min-width:0}
  .workspace .bubble-tools{min-width:0}
  .workspace .search{min-width:0}
  .workspace .catalog-layout{min-width:0}
  #exercise-dialog{max-height:100dvh;margin:0;padding-bottom:calc(20px + env(safe-area-inset-bottom))}

  button,a,input,select,textarea,summary{touch-action:manipulation}
  input,select,textarea,button{scroll-margin-bottom:calc(18px + env(safe-area-inset-bottom))}
}

@media(max-width:380px){
  :root{--iphone-gutter:max(10px,env(safe-area-inset-left))}
  .mobile-primary{left:max(8px,env(safe-area-inset-left))!important;right:max(8px,env(safe-area-inset-right))!important}
  .mobile-primary a{font-size:13px!important}
  .goal-choices{gap:8px}
  .goal-choice{padding-left:8px;padding-right:8px}
  .goal-choice strong{font-size:16px}
  .goal-choice .goal-bear{width:clamp(70px,26vw,96px)}
  .social-tabs button{font-size:12px}
  .auth-main{padding-left:14px;padding-right:14px}
  .focus-inputs{grid-template-columns:1fr}
  .complete-actions{grid-template-columns:1fr}
  .workspace{margin-left:8px!important;margin-right:8px!important}
}

/* The message composer opens the keyboard; move the app nav out of its way. */
@media(max-width:700px){
  body:has(textarea:focus) .mobile-primary{
    opacity:0;
    pointer-events:none;
    transform:translateY(calc(100% + 28px));
  }
}

@media(max-width:700px) and (orientation:landscape) and (max-height:500px){
  body{padding-bottom:18px!important}
  .mobile-primary{position:static!important;margin:18px 12px 0}
  .goal-bottom{position:static!important}
  .ubear-motion{max-height:100dvh;border-radius:0}
}

@media(prefers-reduced-motion:reduce){
  .mobile-primary{transition:none!important}
}