/* RolandGym mobile and PWA finalization v5.3.6. Presentation and device ergonomics only. */

:root{
  --rg-viewport-height:100vh;
  --rg-large-viewport-height:100vh;
  --rg-viewport-width:100vw;
  --rg-keyboard-inset:0px;
}

@supports (height:100svh){:root{--rg-viewport-height:100svh}}
@supports (height:100dvh){:root{--rg-viewport-height:100dvh}}
@supports (height:100lvh){:root{--rg-large-viewport-height:100lvh}}

html,body{max-width:100%;overflow-x:clip}
body.rg-modal-open,body.rg-scroll-lock,body.rg-trainer-menu-open{overflow:hidden;overscroll-behavior:none}
.rgds-app{min-height:100vh;min-height:100svh;min-height:100dvh}

.rgPwaStatusHost{
  position:fixed;
  z-index:100000;
  right:max(.75rem,env(safe-area-inset-right));
  bottom:max(.75rem,env(safe-area-inset-bottom));
  left:max(.75rem,env(safe-area-inset-left));
  display:grid;
  justify-items:center;
  gap:.5rem;
  pointer-events:none;
}
.rgPwaNotice{
  display:flex;
  width:min(100%,38rem);
  min-height:3.5rem;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.65rem .75rem .65rem 1rem;
  border:1px solid rgba(244,178,27,.34);
  border-radius:var(--rgds-radius-lg,8px);
  background:rgba(11,15,20,.97);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  color:var(--rgds-color-text,#f8fafc);
  font-size:.8rem;
  line-height:1.35;
  pointer-events:auto;
  backdrop-filter:blur(18px);
}
.rgPwaNotice[hidden]{display:none}
.rgPwaNotice strong{display:block;color:var(--rgds-color-gold,#f4b21b);font-size:.72rem}
.rgPwaNoticeActions{display:flex;flex:0 0 auto;gap:.35rem}
.rgPwaNotice button{
  min-width:2.75rem;
  min-height:2.75rem;
  padding:.45rem .65rem;
  border:1px solid var(--rgds-color-line-strong,rgba(244,178,27,.35));
  border-radius:var(--rgds-radius-md,6px);
  background:transparent;
  color:var(--rgds-color-text,#f8fafc);
  font:inherit;
  font-weight:900;
}
.rgPwaNotice button[data-primary]{border-color:var(--rgds-color-gold,#f4b21b);background:var(--rgds-color-gold,#f4b21b);color:#111317}
.rgPwaOffline{justify-content:center;border-color:rgba(148,163,184,.32);color:var(--rgds-color-text-muted,#94a3b8);text-align:center}

.rg-client-premium .app,.rg-trainer-premium .trainer-shell{min-height:var(--rg-viewport-height)}
.rg-pwa-standalone body{min-height:var(--rg-large-viewport-height)}
.rg-client-premium #rest .restBg{min-height:calc(var(--rg-viewport-height) - 5rem)}
.rgds-dialog,.exercise-modal-card,.rgLoginCard,#rgFinishOverlay>div{max-height:calc(var(--rg-viewport-height) - 2rem - var(--rg-keyboard-inset))}

@media (max-width:47.99rem){
  html{scroll-padding-top:calc(4.5rem + env(safe-area-inset-top));scroll-padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}
  input,select,textarea{font-size:16px!important}
  button,a,[role="button"],input,select,textarea{min-block-size:44px}

  .rg-client-premium .app{padding:0 0 calc(5.15rem + env(safe-area-inset-bottom))!important}
  .rg-client-premium #start.screen.active{
    width:100%;
    min-height:var(--rg-viewport-height);
    margin:0!important;
    padding:0!important;
  }
  .rg-client-premium #start .hero{
    width:100%;
    min-height:var(--rg-viewport-height);
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .rg-client-premium #start .heroContent{
    min-height:var(--rg-viewport-height);
    padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));
  }
  .rg-client-premium .screen:not(#start){
    width:100%!important;
    padding-right:max(.75rem,env(safe-area-inset-right))!important;
    padding-left:max(.75rem,env(safe-area-inset-left))!important;
  }
  .rg-client-premium .topbar{padding-top:calc(.7rem + env(safe-area-inset-top))}
  .rg-client-premium .nav{
    min-height:calc(4.6rem + env(safe-area-inset-bottom));
    padding-right:max(.2rem,env(safe-area-inset-right))!important;
    padding-bottom:max(.35rem,env(safe-area-inset-bottom))!important;
    padding-left:max(.2rem,env(safe-area-inset-left))!important;
  }
  .rg-client-premium .nav button{min-height:3.65rem!important}
  .rg-client-premium #exercise .targetGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rg-client-premium #exercise .restBtns,.rg-client-premium #rest .chips{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rg-client-premium #exercise .seriesActions{grid-template-columns:1fr 1fr}
  .rg-client-premium #exercise .seriesActions>*:last-child{grid-column:1/-1}
  .rg-client-premium #measurements .measureForm{grid-template-columns:1fr}
  .rg-client-premium #measurements .measureForm .full{grid-column:auto}
  .rg-client-premium .photoGrid{grid-template-columns:repeat(2,minmax(0,1fr))}

  .rgLoginOverlay{
    align-items:stretch!important;
    min-height:var(--rg-viewport-height);
    padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))!important;
    overflow-y:auto;
  }
  .rgLoginCard{
    width:100%!important;
    max-width:30rem;
    min-height:min(100%,42rem);
    margin:auto;
    padding:clamp(1rem,4vh,2rem) 0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .rgLoginCard img{width:min(14rem,70%)}

  .rgds-dialog-backdrop,.exercise-modal{
    align-items:end!important;
    min-height:var(--rg-viewport-height);
    padding:0!important;
  }
  .rgds-dialog,.exercise-modal-card{
    width:100%!important;
    max-height:calc(var(--rg-viewport-height) - env(safe-area-inset-top) - var(--rg-keyboard-inset))!important;
    padding-right:max(1rem,env(safe-area-inset-right))!important;
    padding-bottom:max(1rem,env(safe-area-inset-bottom))!important;
    padding-left:max(1rem,env(safe-area-inset-left))!important;
    border-right:0!important;
    border-bottom:0!important;
    border-left:0!important;
    border-radius:var(--rgds-radius-lg,8px) var(--rgds-radius-lg,8px) 0 0!important;
    overscroll-behavior:contain;
  }
  #rgFinishOverlay.active{align-items:end!important;padding:0!important}
  #rgFinishOverlay .rgProgramCompleteCard{
    width:100%!important;
    max-height:calc(var(--rg-viewport-height) - env(safe-area-inset-top))!important;
    padding-bottom:max(1rem,env(safe-area-inset-bottom))!important;
    border-radius:var(--rgds-radius-lg,8px) var(--rgds-radius-lg,8px) 0 0!important;
    overflow-y:auto!important;
  }

  .rgTrainerMenuBackdrop{
    position:fixed;
    z-index:calc(var(--rgds-z-fixed) - 2);
    inset:0;
    display:block;
    width:100%;
    min-height:var(--rg-viewport-height);
    padding:0;
    border:0;
    background:rgba(0,0,0,.64);
    opacity:0;
    pointer-events:none;
    transition:opacity var(--rgds-duration-medium) var(--rgds-ease-standard);
    backdrop-filter:blur(5px);
  }
  .rgTrainerMenuBackdrop[aria-hidden="false"]{opacity:1;pointer-events:auto}
  .rg-trainer-premium .sidebar{
    z-index:calc(var(--rgds-z-fixed) - 1)!important;
    inset:0 0 0 auto!important;
    width:min(88vw,24rem);
    max-height:none!important;
    min-height:var(--rg-viewport-height);
    padding:max(5rem,calc(4rem + env(safe-area-inset-top))) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) 1rem!important;
    border:0!important;
    border-left:1px solid var(--rgds-color-line)!important;
    border-radius:0!important;
    box-shadow:-24px 0 70px rgba(0,0,0,.5);
    transform:translateX(105%)!important;
    overscroll-behavior:contain;
  }
  .rg-trainer-menu-open .sidebar{transform:none!important}
  .rg-trainer-premium .menu{grid-template-columns:1fr!important;gap:.15rem!important}
  .rg-trainer-premium .menu-button{min-height:3rem!important;border-color:transparent!important;background:transparent!important}
  .rg-trainer-premium .menu-button.active{border-color:var(--rgds-color-line-strong)!important;background:var(--rgds-color-gold-soft)!important}
  .rgTrainerMenuToggle{width:2.75rem!important;height:2.75rem!important;min-width:2.75rem!important;min-height:2.75rem!important}
  .rgTrainerQuickActions{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:.5rem!important}
  .rgTrainerQuickActions button{min-height:3.25rem!important;padding:.5rem!important;font-size:.68rem!important}
  .rgTrainerQuickActions button:nth-child(n+4){display:none}
  .rg-trainer-premium .workspace-header{padding-top:.5rem!important}
  .rg-trainer-premium .workspace-body{padding-top:1rem}
  .rg-trainer-premium .exercise-table-wrap,.rg-trainer-premium .table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
  .rg-client-premium canvas,.rg-client-premium svg,.rg-trainer-premium canvas,.rg-trainer-premium svg{max-width:100%}
  .rg-client-premium .chart,.rg-client-premium .statsChart,.rg-trainer-premium .chart,.rg-trainer-premium .trainer-stats-chart{min-width:0;overflow-x:auto;overscroll-behavior-inline:contain}
}

@media (max-width:22.5rem){
  .rgPwaNotice{align-items:flex-start;flex-direction:column}
  .rgPwaNoticeActions{width:100%}
  .rgPwaNotice button{flex:1}
  .rg-client-premium #exercise .targetGrid{grid-template-columns:1fr}
  .rg-client-premium #exercise .targetGrid>div{border-right:0;border-bottom:1px solid var(--rgds-color-line)}
  .rg-client-premium #exercise .targetGrid>div:last-child{border-bottom:0}
  .rg-client-premium .photoGrid{grid-template-columns:1fr}
}

@media (max-width:47.99rem) and (orientation:landscape){
  .rg-client-premium #start .logoText.logoImageBox{margin-top:max(1rem,env(safe-area-inset-top))!important}
  .rg-client-premium #start .startLogo{width:min(42vw,18rem)!important}
  .rg-client-premium #start .heroBottom h1{font-size:1.5rem!important;}
  .rg-client-premium #rest .restBg{padding-block:.75rem}
  .rg-client-premium #rest .restCircle{width:min(42vh,15rem);height:min(42vh,15rem)}
  .rg-client-premium #rest .restTime{font-size:3rem}
  .rgLoginCard{padding-block:.75rem!important}
}

html.rg-keyboard-open .rg-client-premium .nav{transform:translateY(120%)!important;pointer-events:none}
html.rg-keyboard-open .rgPwaStatusHost{display:none}
html.rg-keyboard-open .rgds-dialog,html.rg-keyboard-open .exercise-modal-card,html.rg-keyboard-open .rgLoginCard{max-height:calc(var(--rg-viewport-height) - .5rem)!important}

@media (prefers-reduced-motion:reduce){
  .rgPwaNotice,.rgTrainerMenuBackdrop,.rg-trainer-premium .sidebar{transition:none!important}
}
