/* Sign-in / sign-up / reset pages: spacing and centering on top of site.css (.auth). Loaded from the auth pages' Styles section. */
.auth { --auth-form-w: calc(var(--ds-sp-16) * 7); }
.auth .auth-form-side { justify-content: center; align-items: center; }
.auth .auth-form { max-width: var(--auth-form-w); margin-inline: auto; gap: var(--ds-sp-5); }
.auth .auth-form-side:has(> .auth-back) { flex-direction: column; }
.auth .auth-back { --auth-back-icon: 16px; --auth-back-outdent: calc(var(--auth-back-icon) + var(--ds-sp-1)); display: inline-flex; align-items: center; gap: var(--ds-sp-1); align-self: flex-start; min-height: var(--ds-tap); margin-inline-start: calc(max(0px, calc((100% - var(--auth-form-w)) / 2)) - var(--auth-back-outdent)); margin-block-end: var(--ds-sp-5); font-size: 15px; font-weight: var(--ds-fw-medium); color: var(--text-muted); }
.auth .auth-back:hover { color: var(--blue); }
.auth .auth-back svg { flex: none; width: var(--auth-back-icon); height: var(--auth-back-icon); }
.auth .auth-logo { display: flex; align-self: flex-start; }
.auth .auth-form h1 { margin-bottom: var(--ds-sp-2); }
.auth .auth-form .fields { gap: var(--ds-sp-4); }
.auth .auth-form .field .err { min-height: 0; }
/* The eye button site.js wraps around a password input (the old .field rules, for an sm-field). */
.auth .sm-field .pw-box { position: relative; display: block; }
.auth .sm-field .pw-box input { width: 100%; padding-inline-end: 52px; }
.auth .auth-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-sp-2) var(--ds-sp-4); margin-top: calc(var(--ds-sp-2) * -1); }
.auth .auth-row .auth-forgot { margin: 0; text-align: right; }
.auth .auth-row .auth-remember { min-height: var(--ds-tap); }
.auth .btn-auth, .auth .auth-form > .fields > .sm-btn { margin-top: var(--ds-sp-2); }
.auth .auth-alt { margin: 0; }
.auth .auth-alt + .auth-alt { padding-top: var(--ds-sp-4); border-top: 1px solid var(--ds-border); }
.auth .auth-social { display: flex; gap: var(--ds-sp-3); }
.auth .auth-social .btn { flex: 1 1 0; min-width: 0; padding-inline: 0; }
.auth .auth-aside { justify-content: center; }
.auth .auth-aside-inner { width: 100%; max-width: calc(var(--ds-sp-16) * 8); }
@media (max-width: 768px) {
  .auth .auth-form-side { align-items: flex-start; }
  .auth .auth-row { flex-direction: column-reverse; align-items: flex-start; }
  .auth .auth-back { --auth-back-outdent: 0px; }
}

/* A submit button held back by auth-submit-gate.js until the form is complete: dimmed, not busy. */
.auth .btn-auth:disabled:not([aria-busy="true"]), .auth .sm-btn:disabled:not([aria-busy="true"]) { cursor: not-allowed; opacity: .5; box-shadow: none; }

/* Said above the sign-up form when its invitation is for another address than the session that opened it. */
.auth .auth-notice { margin: 0 0 var(--ds-sp-4); padding: var(--ds-sp-3) var(--ds-sp-4); font-size: var(--ds-fs-value); line-height: var(--ds-lh-body);
  color: var(--ds-text); background: var(--ds-surface-2, var(--ds-surface)); border: 1px solid var(--ds-border); border-left: 3px solid var(--ds-brand-600); border-radius: var(--ds-r-md); overflow-wrap: anywhere; }

/* Pages without .smp-auth keep the original text-field look (small radius, 1.5px border, 52px, 15px/600) on the shared sm-field markup. The design-system auth pages
   (.smp-auth) skip it, so their layered rules apply directly (this used to be undone with revert-layer in sm-interop.css). */
.auth:where(:not(.smp-auth)) .sm-field { gap: 8px; }
.auth:where(:not(.smp-auth)) .sm-field .sm-field__label { font-size: 12.5px; font-weight: 700; color: var(--navy); }
.auth:where(:not(.smp-auth)) .sm-field .sm-input { height: 52px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); box-shadow: none;
  font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--navy); outline: none; transition: border-color .2s ease; }
.auth:where(:not(.smp-auth)) .sm-field .sm-input:focus { border-color: var(--blue); box-shadow: none; }
.auth .sm-field .sm-input.input-invalid { border-color: var(--bad); }
.auth:where(:not(.smp-auth)) .sm-field .sm-input::placeholder { font-weight: 400; color: var(--text-faint); }
.auth:where(:not(.smp-auth)) .sm-field .sm-field__hint { font-size: 12px; font-weight: 400; color: var(--text-faint); }
.auth:where(:not(.smp-auth)) .sm-field .sm-field__error { font-size: 12.5px; font-weight: 600; color: var(--bad-ink); }
.auth .auth-form[hidden], .auth .callout[hidden] { display: none; }
.auth .auth-form-side[data-step="2"] > .auth-back { display: none; }
.auth .btn.is-picked { box-shadow: 0 0 0 2px var(--blue); }

html.themeable[data-theme="dark"] .auth .btn-white { background: var(--surface); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
html.themeable[data-theme="dark"] .auth .btn-white:hover, html.themeable[data-theme="dark"] .auth .btn-white:focus-visible { background: var(--surface-hover); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--blue); }
html.themeable[data-theme="dark"] .auth .btn-white.is-picked { box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 2px var(--blue); }
html.themeable[data-theme="dark"] .auth img[src*="/images/auth/apple-white.svg"] { filter: invert(1); }

.auth .auth-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-sp-4); }
.auth .invitation-request-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 480px) {
  .auth .auth-pair { grid-template-columns: 1fr; }
}

.auth .invitation-request { margin: 0; font-size: 13px; color: var(--text-muted); }
.auth .invitation-request a { font-weight: var(--ds-fw-bold); }

/* The invitation-code step's error alert keeps the callout classes so auth-invitation-code.js can find and toggle it; the design-system alert look wins over the old callout (site.css `.callout` rules skip `.sm-alert`). */
.auth .sm-alert.callout[hidden] { display: none; }

/* Tablet: the stacked form-over-brand layout (below 960px) fills the screen, so the page never ends in a blank strip under the brand panel. */
@media (max-width: 959px) {
  .auth .auth-aside { flex: 1 0 auto; }
}
/* Tablet and touch: 1rem text stops iPad Safari zooming the page when a field gets focus (it zooms any field under 16px), and a normal line height with no native
   appearance keeps the placeholder and the typed text on the same centered line in every browser. */
.auth .sm-field .sm-input { -webkit-appearance: none; appearance: none; line-height: normal; }
.auth .sm-field .sm-input::placeholder { line-height: normal; opacity: 1; }
@media (max-width: 1180px), (pointer: coarse) {
  .auth .sm-field .sm-input { font-size: 1rem; }
}