/* Phone fit: iPhone SE (375 x 667) up to Pro Max (430 x 932), small Android (360 and 320 wide), notch, curved corners, home bar and the on screen keyboard.
   Loaded by the member app, the staff layout, the coach layout and the sign in pages. Works with public/js/native-viewport.js, which sets
   --vvh (visible height), --vvtop and --kb (keyboard height) and the class gs-kb on the page root. Without that script everything falls back to dvh and env(). */
:root{--vvh:100vh;--vvtop:0px;--kb:0px}
@supports (height:100dvh){:root{--vvh:100dvh}}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:rgba(119,103,154,.18)}
a,button,[role=button],input,select,textarea,label,summary{touch-action:manipulation}
button,[role=button]{-webkit-tap-highlight-color:transparent}
body{overflow-x:hidden}
/* Full screen pages follow the screen that is really visible, not the one with the browser bars hidden. */
@supports (height:100dvh){
  html .min-h-screen{min-height:100dvh}
  html .h-screen{height:100dvh}
  html .max-h-screen{max-height:100dvh}
}
/* Fields stay at 16px on phones so iPhone does not zoom in when one is tapped. */
@media (max-width:639px){input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px}}
/* Sign in and status pages: keep clear of the notch, curved corners and home bar. */
body.gs-safe-pad{box-sizing:border-box;padding-top:max(1rem,var(--sat));padding-bottom:max(1rem,var(--sab));padding-left:max(1rem,var(--sal));padding-right:max(1rem,var(--sar))}
/* Nothing may make a page wider than the screen. */
.max-w-md>main{overflow-wrap:break-word;min-width:0}
.max-w-md>main img,.max-w-md>main video,.max-w-md>main iframe{max-width:100%}
.max-w-md>main pre,.max-w-md>main code{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}
.max-w-md>main.pb-24{padding-bottom:calc(4.75rem + var(--sab))}
@media (orientation:landscape) and (max-height:500px){.max-w-md>main,.max-w-md>header{padding-left:max(1rem,var(--sal));padding-right:max(1rem,var(--sar))}}
/* Bottom tab bars: stay inside tiny screens (up to 9 tabs on 320 wide), and clear the home bar. */
nav.fixed.bottom-0{min-width:0}
nav.fixed.bottom-0>a{min-width:0}
@media (max-width:359px){nav.fixed.bottom-0{font-size:10px;padding-left:4px!important;padding-right:4px!important}}
[data-coach-nav]{padding-bottom:var(--sab)}
[data-preview-feedback]{bottom:calc(5rem + var(--sab))}
#vtoast{bottom:calc(1.25rem + var(--sab))}
#gpsToast{bottom:calc(6rem + var(--sab))}
@media (max-width:639px){#achToast{padding-bottom:calc(6rem + var(--sab))}}
/* The tab bar stays where it is while the keyboard is up (the keyboard simply covers it). */
html.gs-kb [data-preview-feedback]{display:none}
/* Chat message box (member thread, community comments): fixed above the tab bar and the home bar, and lifted above the keyboard. */
.gs-chat-bar{position:fixed;left:0;right:0;margin-left:auto;margin-right:auto;max-width:28rem;padding:0 1rem;z-index:30;bottom:calc(4rem + var(--sab));transform:translateY(calc(-1 * var(--kb,0px)));will-change:transform}
html.gs-kb .gs-chat-bar{bottom:calc(.5rem + var(--sab))}
.gs-chat-bar textarea{max-height:7rem;overscroll-behavior:contain}
.gs-chat-pad{margin-bottom:calc(7rem + var(--sab))}
html.gs-kb .gs-chat-pad{margin-bottom:calc(5rem + var(--kb,0px))}
/* Ask GymStrato panel: always exactly the visible screen. */
#gs-assist{top:var(--vvtop,0px);bottom:auto;height:100vh;height:var(--vvh,100dvh);max-height:100%;padding-top:var(--sat);padding-bottom:var(--sab);overscroll-behavior:contain}
html.gs-kb #gs-assist{padding-bottom:0}
#gs-assist-log{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;overflow-wrap:anywhere}
/* Staff team chat and staff inbox. */
.hq-scroll,#conv{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media (max-width:767px){html.gs-kb .hq-pane{height:max(11rem,calc(var(--vvh,100dvh) - 7.5rem))}}
@media (max-width:1023px){#memberList{max-height:70vh;max-height:70dvh}#conv{max-height:60vh;max-height:60dvh}html.gs-kb #conv{max-height:max(8rem,calc(var(--vvh,100dvh) - 17rem))}}
@media (max-width:767px){#vsidebar{height:100vh;height:100dvh;bottom:auto;overflow-y:auto;overscroll-behavior:contain;padding-bottom:var(--sab)}}
/* Sheets and pop ups: never taller than the visible screen, scroll inside, close button always reachable. */
[role=dialog]{overscroll-behavior:contain}
@supports (height:100dvh){
  #planModal>div{max-height:calc(100dvh - var(--sat) - .75rem)}
  #gst-share [role=dialog]{max-height:calc(100dvh - var(--sat) - .5rem)}
  [data-book-sheet-root] [data-sheet-body]{padding-bottom:var(--sab)}
  [data-book-sheet-root]>div:last-child{max-height:calc(100dvh - var(--sat) - 1rem)}
}
#planModal>div,#gst-share [role=dialog],#stillModal>div,#gpsNotScanned>div,#achToast>div{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#gst-share [role=dialog]{padding-bottom:var(--sab)}
#stillModal>div,#gpsNotScanned>div,#achToast>div{max-height:calc(var(--vvh,100dvh) - 2rem - var(--sat))}
#stillModal,#gpsNotScanned{padding-top:max(1rem,var(--sat));padding-bottom:max(1rem,var(--sab))}
html.gs-kb #stillModal,html.gs-kb #gpsNotScanned,html.gs-kb #planModal{top:var(--vvtop,0px);bottom:auto;height:var(--vvh,100dvh)}
@media (max-width:1023px){.gs-conv-pane{min-height:60vh;min-height:60dvh}html.gs-kb .gs-conv-pane{min-height:0}}

/* ---------- Safe areas, status bar cover, no text selection, chat page shell (Oct 14) ---------- */
/* env() is used when the phone reports it. When the app web view reports nothing, public/js/native-viewport.js fills --gs-sat and --gs-sab from the phone size. */
:root{--gs-sat:0px;--gs-sab:0px;--gs-sal:0px;--gs-sar:0px;--sat:max(env(safe-area-inset-top,0px),var(--gs-sat));--sab:max(env(safe-area-inset-bottom,0px),var(--gs-sab));--sal:max(env(safe-area-inset-left,0px),var(--gs-sal));--sar:max(env(safe-area-inset-right,0px),var(--gs-sar))}
/* In the app the page runs edge to edge, so a strip the height of the status bar sits over the top and nothing scrolls under the clock. */
html.gs-native body::before{content:"";position:fixed;top:0;left:0;right:0;height:var(--sat);background-color:var(--gs-top,transparent);background-image:var(--gs-top-img,none);background-size:100% var(--gs-top-h,100%);background-repeat:no-repeat;z-index:55;pointer-events:none}
/* Nothing in the app is meant to be selected and copied. Typing fields still work. */
html.gs-native,html.gs-native *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.gs-native input,html.gs-native textarea,html.gs-native [contenteditable=true],html.gs-native [contenteditable=""]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
/* Chat thread page: header at the top, messages scroll in the middle, message box and tab bar at the bottom. The whole shell is exactly the part of the screen you can see. */
html.gs-chat,html.gs-chat body{height:100%;overflow:hidden;overscroll-behavior:none}
html.gs-chat body>div.max-w-md.flex.flex-col{position:fixed;left:0;right:0;top:var(--vvtop,0px);height:var(--vvh,100dvh);min-height:0;width:100%;margin:0 auto}
html.gs-chat body>div.max-w-md.flex.flex-col>header{flex:none;padding-bottom:.75rem}
html.gs-chat body>div.max-w-md.flex.flex-col>header .tracking-wide.truncate{display:none}
html.gs-chat body>div.max-w-md.flex.flex-col>main{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:.5rem}
html.gs-chat main>nav[aria-label="Social links"],html.gs-chat main>div.mt-6.mb-2,html.gs-chat body>div.max-w-md.mx-auto.pb-20{display:none}
html.gs-chat nav.fixed.bottom-0{position:static;flex:none;width:100%;margin:0}
html.gs-chat .gs-chat-bar{position:sticky;bottom:0;left:auto;right:auto;max-width:none;margin:0;padding:.5rem 0 0;transform:none;z-index:5;background:var(--gs-page-bg,#fff)}
html.gs-chat .gs-chat-pad,html.gs-chat.gs-kb .gs-chat-pad{margin-bottom:0}
/* Sticky bars stop just under the status bar strip, not behind it. */
html.gs-native .sticky.top-0:not([data-sticky-search]){top:var(--sat,0px)}
/* Back bar: on every page that is not a tab page, a slim bar under the status bar holds a clear Back arrow and stays at the top while the page scrolls. The page title fades into it once the page header has scrolled away. */
.gs-bar{position:sticky;top:0;z-index:50;padding-top:var(--sat,0px);background:#1f1535;border-bottom:1px solid rgba(255,255,255,.14)}
.gs-bar-in{max-width:28rem;margin:0 auto;height:48px;display:flex;align-items:center;gap:12px;padding:0 max(var(--sar,0px),min(30px,7.6vw)) 0 max(calc(var(--sal,0px) + 6px),calc(min(30px,7.6vw) - 8px))}
.gs-back{height:38px;padding:0 14px 0 10px;border-radius:9999px;display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.18);color:#fff;font-size:15px;font-weight:600;-webkit-tap-highlight-color:transparent;touch-action:manipulation;flex:none}
.gs-back:active{background:rgba(255,255,255,.3)}
.gs-bar-title{color:#fff;font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;opacity:0;transition:opacity .18s ease}
.gs-bar.titled .gs-bar-title{opacity:1}
html.gs-chat .gs-bar{position:static}
@media (prefers-reduced-motion:reduce){.gs-bar-title{transition:none}}
/* Sticky bits on a page that has the back bar sit under it. */
body:has([data-gs-bar]) .sticky.top-0:not([data-sticky-search]){top:calc(var(--sat,0px) + 48px)}
body:has([data-gs-bar]) .sticky.top-0[data-sticky-search]{top:calc(var(--sat,0px) + 48px);padding-top:.5rem !important}
html.gs-chat .gs-chat-sec{margin-bottom:.75rem}
/* Back to top: a small round arrow bottom right once the page has scrolled well down. */
.gs-top{position:fixed;z-index:40;width:40px;height:40px;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(31,21,53,.86);color:#fff;border:1px solid rgba(255,255,255,.35);box-shadow:0 2px 8px rgba(0,0,0,.28);bottom:calc(4.75rem + var(--sab,0px));left:max(calc(var(--sal,0px) + 14px),calc(50vw - 14rem + 14px));-webkit-tap-highlight-color:transparent}
.gs-top[hidden]{display:none}
html.gs-kb .gs-top{display:none}
/* iPad and other tablets: the member app column is wider than a phone (Chris 14 Oct: it should fill an iPad, not sit in a phone sized strip). Phones are untouched. */
@media (min-width:768px){
  div.mx-auto.max-w-md.min-h-full.flex.flex-col{max-width:60rem}
  nav[data-new-nav],nav[data-default-nav],nav[data-guest-nav],nav[data-family-nav]{max-width:60rem}
}