/* Authentication card bridging a white header field and a soft color base. */
body.auth-view{
  --auth-split-y:54%;
  background:#fff!important;
}

body.auth-view #app{background:#fff}

body.auth-view.signup-landing-view{
  height:100dvh!important;
  min-height:100dvh!important;
  display:flex!important;
  flex-direction:column;
  overflow:hidden!important;
}

body.auth-view.signup-landing-view>#app{
  display:flex!important;
  flex:1 1 auto!important;
  min-height:0!important;
  flex-direction:column;
}

body.auth-view .auth-shell{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 9% 55%,#dceaf4 0,transparent 32%) bottom/100% calc(100% - var(--auth-split-y)) no-repeat,
    radial-gradient(circle at 91% 35%,#f4ddb2 0,transparent 34%) bottom/100% calc(100% - var(--auth-split-y)) no-repeat,
    linear-gradient(to bottom,#fff 0 var(--auth-split-y),#f3f4ef var(--auth-split-y) 100%)!important;
  overflow:hidden;
}
body.auth-view .auth-topbar{
  min-height:calc(85px + env(safe-area-inset-top))!important;
  padding-top:calc(32px + env(safe-area-inset-top))!important;
}

body.auth-view.signup-landing-view .auth-shell{
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr);
  height:100%!important;
  min-height:0!important;
  flex:1 1 auto;
}

body.auth-view .auth-shell:before,
body.auth-view .auth-shell:after{opacity:.25}

body.auth-view .auth-layout,
body.auth-view .signup-landing-layout{
  display:flex!important;
  width:min(500px,100%)!important;
  max-width:500px!important;
  margin:auto!important;
  padding:22px 24px 44px!important;
  align-items:center!important;
  justify-content:center!important;
}

body.auth-view .auth-story{display:none!important}

body.auth-view .auth-card,
body.auth-view .signup-intro-card{
  position:relative;
  z-index:2;
  width:100%!important;
  max-width:440px!important;
  margin:auto!important;
  padding:27px 29px!important;
  background:#fff!important;
  border:1px solid #e3e6e8!important;
  border-radius:24px!important;
  box-shadow:0 18px 52px #18315318!important;
  color:var(--ink)!important;
  text-align:start!important;
}

body.auth-view .signup-intro-card .auth-card-mark{display:grid}
body.auth-view .signup-intro-card h2{font-size:25px;line-height:1.45}
body.auth-view .signup-intro-card .auth-subtitle{margin:7px 0 22px}
body.auth-view .signup-intro-card .auth-switch{justify-content:center}

body.auth-view>.release-footer{
  background:#fff!important;
  border-top:1px solid #edf0f2;
  color:#7b8793;
}

@media(max-width:700px){
  html.phone-ui body.auth-view .auth-topbar,
  body.auth-view .auth-topbar{
    min-height:calc(78px + env(safe-area-inset-top))!important;
    padding-top:calc(24px + env(safe-area-inset-top))!important;
  }
  body.auth-view .auth-shell{overflow-x:hidden;overflow-y:auto}
  body.auth-view .auth-layout,
  body.auth-view .signup-landing-layout{
    width:100%!important;
    max-width:480px!important;
    padding:18px max(15px,env(safe-area-inset-right)) 30px max(15px,env(safe-area-inset-left))!important;
  }
  body.auth-view .auth-card,
  body.auth-view .signup-intro-card{
    max-width:440px!important;
    padding:21px 19px!important;
    border-radius:21px!important;
  }
  body.auth-view .signup-intro-card .auth-card-mark{display:grid}
  body.auth-view .signup-intro-card h2{font-size:21px}
  body.auth-view .signup-intro-card .auth-subtitle{margin:5px 0 17px}
}

@media(max-width:380px){
  body.auth-view .auth-card,
  body.auth-view .signup-intro-card{padding:18px 16px!important}
}
/* Give the public introduction and authentication cards a little more presence. */
body.auth-view .signup-intro-card,
body.auth-view .auth-path-card{min-height:460px;padding-block:38px!important}
@media(max-width:700px){body.auth-view .signup-intro-card,body.auth-view .auth-path-card{padding-block:34px!important}}
@media(max-height:700px){body.auth-view .signup-intro-card,body.auth-view .auth-path-card{min-height:0}}

/* Lower page headers while retaining the iPhone safe-area offset. */
@media(min-width:701px){
  body.garage-view:not(.assistant-view) .topbar{height:86px;padding-top:8px}
  body.assistant-view .ai-immersive-top{min-height:calc(72px + env(safe-area-inset-top));padding-top:calc(18px + env(safe-area-inset-top))}
}
body.auth-view .auth-topbar{
  min-height:calc(93px + env(safe-area-inset-top))!important;
  padding-top:calc(40px + env(safe-area-inset-top))!important;
}
@media(max-width:700px){
  html.phone-ui body.garage-view:not(.assistant-view) .topbar,
  body.garage-view:not(.assistant-view) .topbar{
    min-height:calc(72px + env(safe-area-inset-top))!important;
    padding-top:calc(20px + env(safe-area-inset-top))!important;
  }
  body.assistant-view .ai-immersive-top,
  html.phone-ui body.assistant-view .ai-immersive-top{
    min-height:calc(80px + env(safe-area-inset-top))!important;
    padding-top:calc(22px + env(safe-area-inset-top))!important;
  }
  html.phone-ui body.auth-view .auth-topbar,
  body.auth-view .auth-topbar{
    min-height:calc(86px + env(safe-area-inset-top))!important;
    padding-top:calc(32px + env(safe-area-inset-top))!important;
  }
}