/* ⚠️ Extracted from Login.razor's <style> block BEFORE the .razor was deleted — see DECISION-009.
   Verbatim content, only the outer <style> tags removed. */

html, body { margin: 0; }

/* Black chrome behind the card, exactly like the top bar and rail: the frame recedes and the
   card is the only lit thing on screen. */
.fo-login { min-height: 100vh; display: flex; align-items: center; justify-content: center;
            padding: var(--s5) var(--s4);
            background: linear-gradient(160deg, var(--brand-black-soft), var(--brand-black)); }

/* .fo-card.auth, not .auth: a bare .auth ties with theme's .fo-card on specificity and would
   only win by document order. Two classes wins outright. */
.fo-card.auth { width: min(380px, 100%); box-sizing: border-box; padding: var(--s6); }

/* Brand panel: the mark on BLACK, bleeding to the card edges.
   Not decoration — the "STURDY" letters in the logo are white with a thin black
   outline, so on a white card they wash out. On black they read the way they do in
   the top bar, and the sign-in card ends up framed by the same chrome as the rest
   of the product. The negative margin cancels the card's own padding so the panel
   reaches the edges; the top corners follow the card's radius. */
.brand { display: flex; flex-direction: column; align-items: center; gap: var(--s2);
         margin: calc(var(--s6) * -1) calc(var(--s6) * -1) var(--s5);
         padding: var(--s5) var(--s4); background: var(--brand-black);
         border-radius: var(--radius) var(--radius) 0 0; }
.brand .mark { width: min(140px, 50%); height: auto; display: block; }   /* square black-ox tile (2026-10-04) */
.brand .word { font-size: var(--fs-small); font-weight: 700; color: var(--rail-ink);
               text-transform: uppercase; letter-spacing: .18em; }
.auth .sub { text-align: center; color: var(--ink-3); font-size: var(--fs-small);
             margin: var(--s2) 0 var(--s5); }

/* Attempt status. Colour = data, so each state maps to a semantic pair and nothing else. */
.msg { padding: var(--s3); border-radius: var(--radius-sm); font-size: var(--fs-small);
       margin: 0 0 var(--s4); border-left: 3px solid transparent; }
.msg.err  { background: var(--bad-bg);  color: var(--bad);  border-left-color: var(--bad); }
.msg.ok   { background: var(--good-bg); color: var(--good); border-left-color: var(--good); }
.msg.info { background: var(--warn-bg); color: var(--warn); border-left-color: var(--warn); }

.auth label { display: block; font-size: var(--fs-small); color: var(--ink-3);
              font-weight: 600; margin: var(--s3) 0 var(--s1); }
/* The 16px floor is deliberate and must not be "tidied" back to a bare --fs-body. iOS Safari
   zooms the whole page in whenever you focus an input under 16px, and --fs-body is 14.4px — on a
   crew phone that makes the sign-in card jump and need pinching back out. The page this replaced
   used 1rem for exactly this reason; max() keeps the token as the source of truth. */
.auth form input { width: 100%; box-sizing: border-box; padding: var(--s3);
                   border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
                   background: var(--paper); color: var(--ink);
                   font-size: max(var(--fs-body), 16px);
                   font-family: inherit; }

/* Taller than a stock .fo-btn: these are the full-width targets a crew member taps on a phone.
   theme's var(--s2) padding renders a 34px button — under Apple's 44px and Android's 48dp
   guidance, and shorter than the ~43px this page had before. var(--s3) restores that without
   naming a new size. */
.auth .fo-btn { width: 100%; justify-content: center; margin-top: var(--s5);
                padding: var(--s3) var(--s4); }

/* Purple is what you click. Body size, not --fs-small: this summary is the ONLY route a new
   crew member has to an account, so demoting it below the primary button must not shrink it
   below readable — it was 14.4px before the restyle. */
.signup { margin-top: var(--s5); border-top: 1px solid var(--line); padding-top: var(--s4); }
.signup > summary { cursor: pointer; color: var(--brand-purple); font-weight: 600;
                    font-size: var(--fs-body); }

/* Deliberately muted: legal links are a legal requirement, not a call to action. --ink-2 and
   not --ink-3 because --ink-3 at --fs-small falls under 4.5:1 on white. */
.legal-links { text-align: center; margin: var(--s5) 0 0; padding-top: var(--s4);
               border-top: 1px solid var(--line); font-size: var(--fs-small); }
.legal-links a { color: var(--ink-2); text-decoration: none; }
.legal-links a:hover { color: var(--brand-purple); text-decoration: underline; }

/* Client-side validation errors — hidden until foMatch() adds .show. */
.mismatch { display: none; color: var(--bad); font-size: var(--fs-small); margin: var(--s2) 0 0; }
.mismatch.show { display: block; }

/* Customer or employee. Two big targets rather than a select: it is the question that decides
   what the rest of the form is for, so it should not look like a minor setting. */
.kind { display: flex; gap: var(--s2); }
.kind .pick { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--s2);
              margin: 0; padding: var(--s3); cursor: pointer;
              border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
              background: var(--paper); color: var(--ink); font-weight: 600;
              font-size: max(var(--fs-body), 16px); }
.kind .pick:has(input:checked) { border-color: var(--brand-purple);
                                 box-shadow: inset 0 0 0 1px var(--brand-purple); }
.kind .pick input { width: auto; margin: 0; }

/* ══ FORGOT PASSWORD (2026-09-24) ══════════════════════════════════════════════════════════════════
   The /forgot and /reset pages reuse this whole stylesheet so they look like the card they came from.
   These are the only rules they add. .head uses --fs-title (defined in theme.css) rather than the
   undefined --fs-h2 verify.css inherited from Blazor. */
.head { font-size: var(--fs-title); margin: 0 0 var(--s2); text-align: center; }
/* Right under the Sign in button, small and quiet: a way out for the few, not a call to action for
   everyone. Purple because purple is what you click. */
.forgot { text-align: right; margin: var(--s2) 0 0; font-size: var(--fs-small); }
.forgot a { color: var(--brand-purple); text-decoration: none; }
.forgot a:hover { text-decoration: underline; }
/* The dead-link page's "Send me a new link" is an <a> styled as the primary button: no underline,
   and border-box so width:100% does not overflow the card by its own padding. */
.auth a.fo-btn { text-decoration: none; box-sizing: border-box; }