/* Registration uses the shared settings controls; only its layout is specialized.
   Explicit registration scope prevents older login selectors winning the cascade. */
body.login-page .login-card:has(.account-register) {
  box-sizing: border-box;
  width: min(100%, 520px);
  padding: 24px;
  border: 1px solid var(--ml-color-border);
  border-top: 3px solid var(--ml-color-action);
  border-radius: var(--ml-radius-panel);
  box-shadow: var(--ml-shadow-card);
}

body.login-page .login-card .account-register > .eyebrow {
  margin: 0;
  color: var(--ml-color-action-dark);
  font-size: var(--ml-font-size-caption);
  font-weight: var(--ml-font-weight-label);
}

body.login-page .login-card .account-register h1 {
  margin: 0;
  color: var(--ml-color-ink);
  font-family: var(--ml-font-family);
  font-size: var(--ml-font-size-page-heading);
  font-weight: var(--ml-font-weight-bold);
  line-height: var(--ml-line-height-heading);
  letter-spacing: var(--ml-letter-spacing-heading);
}

body.login-page .account-register.ml-settings p {
  margin: 0 !important;
  font-size: var(--ml-font-size-body);
  line-height: 1.5;
}

body.login-page .login-card .account-register form {
  gap: var(--ml-card-gap);
  margin: var(--ml-space-3) 0 0 !important;
  justify-items: stretch;
}

body.login-page .account-register .account-name-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ml-card-gap);
  min-width: 0;
}

/* Keep signup fields comfortable while inheriting shared color, type and focus. */
body.login-page .account-register.ml-settings :is(input:not([type="hidden"]):not([type="checkbox"]), select, button) {
  min-height: var(--ml-control-height-touch) !important;
}

body.login-page .account-register.ml-settings button {
  width: 100% !important;
}

body.login-page .account-register .field-help {
  margin: 0;
  color: var(--ml-color-muted);
  font-size: var(--ml-font-size-caption);
  font-weight: var(--ml-font-weight-regular);
}

body.login-page .account-register.ml-settings .choice-card {
  box-sizing: border-box;
  min-height: var(--ml-control-height-touch);
  padding: var(--ml-space-8) !important;
  border: 1px solid var(--ml-color-border);
  border-radius: var(--ml-radius-control);
  background: var(--ml-color-surface-soft);
}

body.login-page .account-register .choice-card > span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

body.login-page .account-register .choice-card a { display: inline; }
body.login-page .account-register a {
  color: var(--ml-color-action-dark);
  font-weight: var(--ml-font-weight-semibold);
}
body.login-page .account-register a:hover { text-decoration: underline; }
body.login-page .account-register.ml-settings .account-support { font-size: var(--ml-font-size-caption); }

@media (max-width: 560px) {
  body.login-page .login-card:has(.account-register) { padding: var(--ml-space-11); }
  body.login-page .account-register .account-name-fields { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  /* Prevent mobile browsers zooming the page when a signup field receives focus. */
  body.login-page .account-register.ml-settings :is(input:not([type="hidden"]):not([type="checkbox"]), select) {
    font-size: var(--ml-font-size-panel-value) !important;
  }
}

.login-card .account-primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 46px;
  margin-top: 16px;
  padding: 10px 18px;
  border: 1px solid #087f7e;
  border-radius: 5px;
  background: #087f7e;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.login-card .account-primary-action:hover {
  border-color: #075f5c;
  background: #075f5c;
}

.login-card .account-primary-action:focus-visible {
  outline: 3px solid #36bdb4;
  outline-offset: 3px;
}