/*
 * The sign-in page's layout. Everything that paints (the frame and the card, the lockup, type,
 * fields, buttons, notices and the loader) is the design package's rails.css, linked before this
 * file (packages/design/README.md; DESIGN-SYSTEM.md 5.3, 5.4 and 7): the body is the page family
 * and the card its narrow form card, the screen itself under 600 px. This file only places
 * things. Every length is a v2 token, and the page-local classes are named sign-in-<thing>.
 */
html, body { max-width: 100%; overflow-x: hidden; }
/* Under 600 the screen is the card, and its content starts at the top (under the safe area, which
   the package's compact card pads for) and stays there from step to step. At 600 and wider the
   card stays centred on the frame. PACKAGE GAP (F2): the package centres a compact body.page too;
   start alignment there would fix this page, connect (C4) and consent (C5) at once. */
@media (width < 600px) {
  body.page { align-content: start; }
}

/* The card, top to bottom: the lockup, 24, the title, 4, the subtitle, 24, the form. */
.sign-in-card { display: grid; min-inline-size: 0; gap: var(--space-step-24); }
.sign-in-head { display: grid; min-inline-size: 0; justify-items: start; }
/* The lockup takes its size from the font size it sits in (DESIGN-SYSTEM 3.3). */
.sign-in-lockup { margin-block-end: var(--space-step-24); font-size: var(--space-step-24); }
#agent-name { overflow-wrap: anywhere; }
#sign-in-subtitle { margin-block-start: var(--space-step-4); }

/* The form column. Clerk's sign-up challenge mounts after <main>, in the same column and spacing. */
.sign-in-column, #sign-in, #sign-in form { display: grid; min-inline-size: 0; gap: var(--space-step-16); }
.sign-in-column { overflow-wrap: anywhere; }
#clerk-captcha { display: grid; justify-items: center; }
#clerk-captcha:empty { display: none; }
#clerk-captcha iframe { max-inline-size: 100%; }

/* A field: its label over the bubble, then the hint and the error, as the package spaces them. */
.sign-in-field { display: grid; min-inline-size: 0; }
.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-step-4); }
.sign-in-resend, .sign-in-actions { display: grid; justify-items: center; gap: var(--space-step-4); }
/* A long masked email in "Send a code to … instead" wraps inside the card instead of widening it. */
.sign-in-resend .btn { max-inline-size: 100%; block-size: auto; white-space: normal; overflow-wrap: anywhere; text-align: center; }

/* A page-level failure is the package's neutral notice with one small action at its end. At every
   width the sentence wraps beside the action, as the package's and the brand page's notice does. */
.sign-in-notice > p { flex: 1; min-inline-size: 0; }