:root{--v33-content:1180px}

/* V0.33 public entry: one centered content frame and a stable form column. */
.login-layout{
  width:min(calc(100% - 48px),var(--v33-content));
  margin-inline:auto;
  padding:clamp(44px,7vh,82px) 0 72px;
  grid-template-columns:minmax(0,1fr) minmax(360px,440px);
  gap:clamp(48px,8vw,112px);
}
.login-copy{min-width:0;max-width:570px}
.login-panel{box-sizing:border-box;width:100%;max-width:440px;justify-self:end}

/* Registration and pre-authentication steps use the same frame as the login. */
#app>.page-heading,
#app>.registration-layout,
#app>.invitation-layout,
#app>.admission-status{
  box-sizing:border-box;
  width:min(calc(100% - 48px),var(--v33-content));
  margin-inline:auto;
}
#app>.page-heading{padding-top:clamp(28px,5vh,56px)}
#app>.registration-layout{padding-bottom:64px}

/* Field help stays beside the label; controls always use the full form width. */
.login-panel label.field{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:8px;
}
.login-panel label.field>.field-info{
  grid-column:2;
  grid-row:1;
  align-self:center;
  margin:0;
}
.login-panel label.field>input,
.login-panel label.field>select,
.login-panel label.field>textarea,
.login-panel label.field>.input-explanation{
  grid-column:1/-1;
}
.login-panel .v32-password>span:first-child{grid-column:1;grid-row:1}
.login-panel .v32-password>[data-password-toggle]{grid-column:1/-1;width:100%;min-height:44px}

@media(max-width:900px){
  .login-layout{width:min(calc(100% - 32px),680px);grid-template-columns:1fr;gap:30px;padding:32px 0 52px}
  .login-copy,.login-panel{max-width:none}
  .login-panel{order:-1;justify-self:stretch}
  #app>.page-heading,#app>.registration-layout,#app>.invitation-layout,#app>.admission-status{width:min(calc(100% - 32px),680px)}
  #app>.registration-layout{grid-template-columns:1fr;gap:24px}
}
@media(max-width:520px){
  .login-layout{width:calc(100% - 24px);padding:24px 0 40px}
  .login-copy h1{font-size:clamp(42px,14vw,55px)}
  .login-panel{padding:24px 20px}
  #app>.page-heading,#app>.registration-layout,#app>.invitation-layout,#app>.admission-status{width:calc(100% - 24px)}
}