/* Auth has one viewport-sized frame; long forms scroll inside that frame. */
body:is([data-page="login"], [data-page="register"], [data-page="recover"]) {
  min-height: 0;
  height: var(--auth-viewport-height, 100vh);
  overflow: hidden;
  overscroll-behavior: none;
}

@supports (height: 100dvh) {
  body:is([data-page="login"], [data-page="register"], [data-page="recover"]) {
    height: var(--auth-viewport-height, 100dvh);
  }
}

body:is([data-page="login"], [data-page="register"], [data-page="recover"]) #app {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body:is([data-page="login"], [data-page="register"], [data-page="recover"]) .auth {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scroll-padding-block: 16px;
  padding: max(16px, env(safe-area-inset-top, 0px))
    max(20px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(20px, env(safe-area-inset-left, 0px));
}

body:is([data-page="login"], [data-page="register"], [data-page="recover"]) .authbox {
  width: min(100%, 520px);
  min-width: 0;
  flex: 0 0 auto;
  /* Auto margins centre a short form, but become zero when it needs scrolling. */
  margin: auto;
  overflow-wrap: anywhere;
}

body:is([data-page="login"], [data-page="register"], [data-page="recover"]) .authbox input {
  font-size: 16px;
}

body:is([data-page="login"], [data-page="register"], [data-page="recover"]) .authbox .error:empty {
  display: none;
}

@media (max-width: 520px), (max-height: 600px) {
  body:is([data-page="login"], [data-page="register"], [data-page="recover"]) .authbox {
    padding: 24px;
  }
}


/* Plennor production auth parity */
body:is([data-page="login"],[data-page="register"],[data-page="recover"]){
  background:#080808!important;color:#f3f3f3!important;
}
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .ambient{display:none!important}
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .auth{
  scrollbar-width:none!important;
  background:#080808!important;
  padding:max(22px,env(safe-area-inset-top,0px))
    max(24px,env(safe-area-inset-right,0px))
    max(22px,env(safe-area-inset-bottom,0px))
    max(24px,env(safe-area-inset-left,0px))!important;
}
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .auth::-webkit-scrollbar{display:none}
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .authbox{
  width:min(100%,520px)!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:none!important;
}
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .public-brand{
  display:inline-flex!important;
  align-items:center!important;
  min-height:44px!important;
  color:#f5f5f5!important;
  font-size:22px!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:-.045em!important;
  text-decoration:none!important;
  margin-bottom:34px!important;
}
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .authbox h1{
  margin:0 0 28px!important;
  color:#f5f5f5!important;
  font-size:clamp(42px,11vw,54px)!important;
  line-height:.98!important;
  letter-spacing:-.06em!important;
  font-weight:700!important;
}
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .field{
  margin:0 0 14px!important;
}
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .field label{
  color:#b7b7b7!important;font-size:13px!important;margin:0 0 7px!important;
}
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .field input{
  min-height:54px!important;
  padding:12px 14px!important;
  border:1px solid #414141!important;
  border-radius:16px!important;
  background:#1d1d1d!important;
  color:#fff!important;
  box-shadow:none!important;
  font-size:16px!important;
}
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .field input:focus{
  outline:2px solid #a8bca1!important;outline-offset:2px!important;border-color:#414141!important;
}
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .field-hint,
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .authfoot,
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .check-row{
  color:#a9a9a9!important;
}
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .auth-submit{
  width:100%!important;
  min-height:54px!important;
  border:0!important;border-radius:16px!important;
  background:#e8ebdf!important;color:#141812!important;
  box-shadow:none!important;
  font-weight:600!important;
}
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .auth-submit:active{
  transform:scale(.98)!important;
}
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .authfoot{
  margin-top:20px!important;text-align:center!important;font-size:14px!important;
}
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .authfoot a,
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .check-row a{color:#e5e5e5!important}
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .ff-password-wrap{position:relative}
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .ff-password-wrap input{padding-right:56px!important}
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .ff-password-toggle{
  position:absolute;right:5px;bottom:5px;width:44px;height:44px;
  padding:0;border:0;border-radius:999px;background:transparent;color:#cfcfcf;
  display:grid;place-items:center;
}
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .ff-password-toggle:active{background:#292929}
body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .ff-password-toggle svg{width:22px;height:22px}
@media(max-width:520px){
  body:is([data-page="login"],[data-page="register"],[data-page="recover"]) .authbox{padding:0!important}
}