* {
  box-sizing: border-box;
}

:root {
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  font-family: var(--identity-font-family);
}

body {
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  margin: var(--identity-space-none);
  min-height: var(--identity-screen-min);
}

a {
  color: inherit;
}

.auth-page-shell {
  display: grid;
  min-height: var(--identity-screen-min);
  padding: var(--identity-space-page);
  place-items: center;
}

.auth-page-suite {
  display: grid;
  gap: var(--identity-space-md);
  min-inline-size: 0;
  width: min(var(--identity-shell-max), var(--identity-shell-fluid));
}

.brand-bar,
.actions,
.page-heading {
  align-items: center;
  display: flex;
  gap: var(--identity-space-sm);
  justify-content: space-between;
}

.surface {
  background: var(--color-surface-base);
  border: var(--identity-border-width) solid var(--color-border-default);
  border-radius: var(--identity-radius-md);
  box-shadow: var(--shadow-card);
}

.auth-page-panel {
  display: grid;
  gap: var(--identity-space-lg);
  padding: var(--identity-space-panel);
}

.brand-bar {
  justify-content: flex-start;
}

.brand-bar span {
  color: var(--color-text-secondary);
}

.page-heading {
  align-items: flex-start;
  display: grid;
  justify-content: stretch;
}

.page-heading h1,
.page-heading p {
  margin: var(--identity-space-none);
}

.page-heading h1 {
  font-size: var(--identity-font-title);
  line-height: var(--identity-line-tight);
}

.page-heading p,
.form-control input::placeholder {
  color: var(--color-text-secondary);
}

.page-heading p,
.form-banner,
.form-control {
  overflow-wrap: anywhere;
}

.form-control {
  font-size: var(--identity-font-small);
}

form,
.stack,
.form-control,
.source-list,
.form-banner {
  display: grid;
  gap: var(--identity-space-sm);
}

.form-control {
  gap: var(--identity-space-xs);
}

.form-control input {
  background: var(--color-surface-base);
  border: var(--identity-border-width) solid var(--color-border-default);
  border-radius: var(--identity-radius-sm);
  color: var(--color-text-primary);
  font: inherit;
  min-height: var(--identity-control-min);
  padding: var(--identity-space-xs) var(--identity-space-sm);
}

.form-control input:focus {
  border-color: var(--color-brand-primary);
  outline: var(--identity-focus-size) solid var(--icon-button-focus-ring);
}

.form-banner {
  background: var(--color-status-info-bg);
  border: 0;
  border-radius: var(--identity-radius-sm);
  box-shadow: none;
  padding: var(--identity-space-sm);
}

.form-banner[data-component="FormErrorBanner"] {
  background: var(--color-status-warning-bg);
  border-inline-start: 3px solid var(--color-status-warning);
}

.form-banner[data-component="FormSuccessBanner"] {
  background: var(--color-status-success-bg);
  border-inline-start: 3px solid var(--color-status-success);
}

[dir="rtl"] .auth-page-suite {
  text-align: start;
}

[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[name="verification_code"],
[dir="rtl"] input[name="delete_confirm_label"],
[dir="rtl"] [data-bidi-isolate] {
  direction: ltr;
  unicode-bidi: isolate;
}

.form-banner:focus {
  outline: none;
}

.action {
  align-items: center;
  border-radius: var(--identity-radius-sm);
  display: inline-flex;
  font: inherit;
  font-weight: var(--identity-weight-strong);
  justify-content: center;
  min-height: var(--identity-control-min);
  padding: var(--identity-space-xs) var(--identity-space-md);
  text-decoration: none;
}

.action.primary {
  background: var(--color-brand-primary);
  border: var(--identity-border-width) solid var(--color-brand-primary);
  color: var(--color-surface-base);
}

.action.secondary {
  background: var(--color-surface-base);
  border: var(--identity-border-width) solid var(--color-border-default);
  color: var(--color-text-primary);
}

.action:disabled {
  background: var(--color-status-info-bg);
  border-color: var(--color-border-default);
  color: var(--color-disabled-text);
}

.primary-slot {
  display: contents;
}

[hidden] {
  display: none !important;
}

.actions > .action,
.primary-slot > .action {
  flex: 1 1 0;
}

.auth-help-link {
  display: block;
  width: fit-content;
  margin: var(--space-4) auto 0;
  color: var(--color-brand-text);
  font-size: var(--font-sm);
  font-weight: 600;
  text-align: center;
}

@media (max-width: 42rem) {
  .actions {
    align-items: stretch;
    flex-direction: column;
  }

  .actions > .action,
  .primary-slot > .action {
    width: 100%;
  }
}

.password-control { position: relative; }
.password-control input { padding-inline-end: 7.5rem; }
.password-control > button { position: absolute; inset-inline-end: .5rem; bottom: .35rem; min-height: 44px; background: transparent; border: 0; color: inherit; cursor: pointer; }
.password-control > button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Hosted MFA shares the existing auth shell and tokens. */
.security-page { align-items: start; padding-block: clamp(24px, 7vh, 72px); }
.security-page .auth-page-suite { width: min(32rem, 100%); }
.security-page .auth-page-panel { gap: 1.5rem; padding: clamp(20px, 5vw, 36px); }
.security-page h2 { margin: 0; font-size: 1rem; line-height: 1.5; }
.security-page p { margin: 0; line-height: 1.65; overflow-wrap: anywhere; }
.security-page form { gap: 1rem; }
.security-page button { cursor: pointer; }
.security-page button:not(.action):not([data-password-toggle]) { min-height: 44px; }
.security-back { width: fit-content; color: var(--color-text-secondary); font-size: .875rem; text-underline-offset: 3px; }
.security-brand { font-size: 1.125rem; font-weight: 700; letter-spacing: -.04em; }
.security-setup { display: grid; gap: 1rem; }
.security-setup figure { display: grid; place-items: center; margin: 0; padding: 1rem; background: white; border: 1px solid var(--color-border-default); border-radius: var(--identity-radius-sm); }
.security-setup figure svg { display: block; width: 208px; height: 208px; max-width: 100%; }
.security-page details { min-width: 0; }
.security-page summary { cursor: pointer; padding-block: .5rem; line-height: 1.5; }
.security-page details code { display: block; padding: .75rem; background: var(--color-status-info-bg); overflow-wrap: anywhere; }
.security-recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: 0; list-style: none; }
.security-recovery-codes code { display: block; padding: .5rem; background: var(--color-status-info-bg); overflow-wrap: anywhere; font-size: .875rem; }
.security-advanced { border-top: 1px solid var(--color-border-default); padding-top: .5rem; }
.security-advanced form { padding-top: .75rem; }
.security-status { padding-inline-start: .75rem; border-inline-start: 3px solid var(--color-brand-primary); font-weight: 600; }
.security-help { display: grid; gap: .5rem; border-top: 1px solid var(--color-border-default); padding-top: 1rem; color: var(--color-text-secondary); font-size: .8125rem; }
.security-help a { text-underline-offset: 3px; }
@media (max-width: 360px) { .security-recovery-codes { grid-template-columns: 1fr; } }
.security-page .auth-page-panel,
.security-page form,
.security-page .form-control { min-inline-size: 0; }
.security-page input:not([type="checkbox"]) { min-inline-size: 0; width: 100%; }
/* Account history stays separate from browser autofill and the login fields. */
[data-auth-page-kind="login"] .auth-page-panel,
[data-auth-page-kind="login"] form,
[data-auth-page-kind="login"] .form-control,
[data-auth-page-kind="login"] .password-control { min-inline-size: 0; }
[data-auth-page-kind="login"] input { min-inline-size: 0; width: 100%; }
.login-account-history { margin-top: 1rem; font-size: .875rem; }
.login-account-history summary { cursor: pointer; }
.login-account-history ul { list-style: none; padding: 0; margin: .5rem 0; }
.login-account-history li { display: flex; align-items: center; gap: .5rem; margin: .375rem 0; }
.login-account-history button { font: inherit; cursor: pointer; }
.login-account-history li button:first-child { flex: 1; min-width: 0; text-align: start; overflow-wrap: anywhere; }
.login-account-history[hidden] { display: none; }