/* Sign-in page. Builds on ../css/styles.css. Content sits centred. */

/* The page is short: the footer is pinned to the bottom of the viewport and
   the box sits in the middle of what is left. The header's 120px fade is
   pulled back so the middle is measured from the header row, not the fade. */
body { min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1; display: flex; align-items: center; justify-content: center; margin-top: -120px; }

.signin { width: 100%; padding-block: 40px; }
.signin-box { max-width: 440px; margin-inline: auto; text-align: center; }
.signin h1 { font-size: var(--fs-6); max-width: none; }
.signin .lede { margin-top: 14px; font-size: var(--fs-3); line-height: 1.4; margin-inline: auto; }
.signin-form { margin-top: 36px; }

/* States: loading, unconfigured, signed_out, signed_in */
body[data-state="loading"] .signin-form { visibility: hidden; }
.only-signed-out, .only-signed-in, .unconfigured-note { display: none; }
body[data-state="signed_out"] .only-signed-out, body[data-state="unconfigured"] .only-signed-out { display: block; }
body[data-state="signed_in"] .only-signed-in { display: block; }
body[data-state="unconfigured"] .unconfigured-note { display: block; }
body[data-state="unconfigured"] .signin-form button, body[data-state="unconfigured"] .signin-form input { pointer-events: none; opacity: 0.55; }
body.no-google .btn-google, body.no-google .or { display: none; }

.signin-form .btn { border-radius: 999px; }
.btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 13px 16px;
  background: var(--white); color: #1f1f1f; border: 1px solid #747775;
}
.btn-google:hover { background: #f2f2f2; color: #1f1f1f; border-color: #747775; }
.btn-google .g { flex: none; }
.or { margin: 14px 0 0; font-size: var(--fs-1); color: var(--ink-2); text-align: center; }
.email-form, .code-form { margin-top: 10px; text-align: left; }
.email-form label, .code-form label { display: block; font-size: var(--fs-1); font-weight: 500; margin-bottom: 8px; }
.email-form input, .code-form input { display: block; width: 100%; padding: 13px 18px; background: var(--white); color: var(--ink); border: 1px solid var(--ink); border-radius: 999px; }
.email-form input::placeholder { color: var(--ink-2); }
.email-form .btn, .code-form .btn { margin-top: 12px; width: 100%; }
.code-form input { letter-spacing: 0.18em; font-variant-numeric: tabular-nums; }
.code-sent { font-size: var(--fs-1); margin: 0 0 14px; }
.code-actions { margin: 14px 0 0; font-size: var(--fs-1); color: var(--ink-2); text-align: center; }

/* Two steps: the address, then the code that went to it. */
.code-form { display: none; }
.only-signed-out[data-step="code"] .btn-google, .only-signed-out[data-step="code"] .or, .only-signed-out[data-step="code"] .email-form { display: none; }
.only-signed-out[data-step="code"] .code-form { display: block; }
.signin-who { font-size: var(--fs-2); margin-inline: auto; }
.signed-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
.msg { margin-top: 12px; margin-inline: auto; font-size: var(--fs-1); color: var(--blue-deep); min-height: 1.4em; }
.msg.is-error { color: #b42318; }
.unconfigured-note { margin-inline: auto; margin-top: 20px; font-size: var(--fs-1); color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: 14px; }