/*
 * The sign-in page's layout. The colours, type, radii, controls and the glass come from the
 * design system's shared web package (/consumer/static/design/*, DESIGN-SYSTEM.md section 5.2),
 * linked before this file; this file only places things. Every length here is a token or a
 * package class, and the few page-local classes are named sign-in-<thing>.
 */
html, body { max-width: 100%; overflow-x: hidden; }
body { min-height: 100dvh; }

/* Page frame: the bar stays at the top; the content sits in the reading measure. */
.page-shell { display: flex; min-height: 100dvh; flex-direction: column; }
.page-bar-wrap { position: sticky; top: 0; z-index: 20; padding: max(var(--space-2), env(safe-area-inset-top)) var(--space-4) var(--space-2); }
.page-bar { max-width: var(--space-measure); margin: 0 auto; }
.page-content { display: grid; width: 100%; max-width: var(--space-measure); margin: 0 auto; gap: var(--space-8); padding: var(--space-8) var(--space-4) var(--space-16); }
.page-heading { display: grid; gap: var(--space-2); justify-items: start; }
.page-face { margin-bottom: var(--space-4); }
.page-title { overflow-wrap: anywhere; }
.page-subtitle { color: var(--muted); font-size: var(--type-subhead-rem); line-height: var(--type-subhead-line); }
.page-subtitle:empty { display: none; }

/* The form column. Clerk's sign-up challenge mounts after <main>, inside the same column and spacing. */
.sign-in-column { display: grid; min-width: 0; gap: var(--space-4); overflow-wrap: anywhere; }
#sign-in, #sign-in form { display: grid; min-width: 0; gap: var(--space-4); }
#clerk-captcha { display: grid; justify-items: center; }
#clerk-captcha:empty { display: none; }
#clerk-captcha iframe { max-width: 100%; }
noscript { color: var(--muted); font-size: var(--type-footnote-rem); line-height: var(--type-footnote-line); }

/* Fields are the package's: .field-group, .field-label, and .field--prefixed for the country prefix. */
.sign-in-code { text-align: center; }

/* The code step: who the code went to, then the resend and the way back, centred. */
.sign-in-intro { display: grid; gap: var(--space-1); }
.sign-in-resend, .sign-in-actions { display: grid; justify-items: center; gap: var(--space-1); }
/* A long masked email in "Send a code to … instead" wraps inside the column instead of widening the page. */
.sign-in-resend .btn { max-width: 100%; height: auto; min-height: var(--space-touch); white-space: normal; overflow-wrap: anywhere; text-align: center; }

/* Progress is the package's .spinner, alone with a word (.spinner-labelled) and inside the primary button. */

/* A page-level failure is the package's notice with one action after the message; on a phone
   the action drops under the message. */
.sign-in-notice .btn { flex: none; align-self: center; }
@media (min-width: 720px) { .page-bar-wrap { padding-top: var(--space-4); } }
@media (max-width: 559px) {
  .page-content { padding: var(--space-4) var(--space-4) var(--space-12); }
  .sign-in-notice { flex-wrap: wrap; }
  .sign-in-notice .btn { width: 100%; }
}