/* css/signin.css — the sign-in and set-password page.
   One of the files src/index.html links in order; see tokens.css for why. */

/* ==========================================================================
   Sign-in
   ========================================================================== */
.signin{max-width:24rem;margin:4rem auto}
.signin .card{padding:var(--gap-lg)}
.signin .wordmark{font-size:1.5rem;margin-bottom:.35rem}

/* THE PARAGRAPH THAT INTRODUCES THE FORM NEEDS ROOM UNDER IT — CIT-3, found by
   looking at it. `.help` carries `margin:.35rem 0 0` because it is normally the
   line UNDER a control; here it is the sentence above the first field, and at
   390px "Choose your own to finish." and "New password (required)" were about ten
   pixels apart, which reads as one block of text with an input in it. Scoped to a
   .help that is a direct child of the FORM, so the help lines inside fields — the
   ones the rule was written for — are untouched.

   OF THE FORM AND NOT OF THE CARD, and the first attempt got that wrong: scoped to
   `.signin .card > .help` it matched nothing and changed nothing, because the
   sentence lives inside the <form> beside the heading it introduces. The second
   390 shot is what said so. */
.signin form > .help{margin-bottom:var(--gap)}

/* AND THE NOTICE UNDER THE CARD IS NOT PART OF THE CARD — same run, same shot.
   The gate's "this is the only page you can use right now" sits outside the card
   deliberately: it is about the whole app rather than about the password boxes.
   With no gap its top edge met the card's bottom border and the two read as one
   panel with a rule through it, which is the opposite of what the placement is
   saying. */
.signin > .notice{margin-top:var(--gap)}
/* NO SIGN-UP LINK EXISTS. A person exists because a lead admin created them or
   approved their request, so the copy says who to ask instead. */
.signin .no-signup{font-family:var(--legible);font-size:.875rem;color:var(--ink-soft);margin-top:var(--gap)}