/* The SIGN-IN CARD — Login, Forgot, Reset and Verify all wear this one stylesheet (house style piece 10,
   2026-10-05; Verify used to carry a near-copy, verify.css, which is gone).

   HOUSE STYLE: the sign-in page is the one place the identity colour may stand large (HOUSE-STYLE.md, colour
   roles) — here as the stripe across the top of the card and the focus ring on a field. It is identity only: the
   Sign in button is the ordinary yellow primary, the message lines are the six meanings. Tokens only — no raw colour. */

html, body { margin: 0; }

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

/* .fo-card.auth, not .auth: a bare .auth ties with theme's .fo-card on specificity. The identity stripe is the
   card's own top border (3px) — a border, because the brand panel's background would paint over an inset shadow. */
.fo-card.auth { width: min(380px, 100%); box-sizing: border-box; padding: var(--s6); overflow: hidden;
                border-top: 3px solid var(--color-identity); }

/* Brand panel: the mark on the chrome, bleeding to the card edges (the "STURDY" letters are white with a thin
   black outline, so they need the dark panel the top bar gives them). The negative margin cancels the card's
   padding; the identity stripe is the card's top border, just above it. */
.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(--color-chrome);
         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(--hs-dense); font-weight: 700; color: var(--color-chrome-muted);
               text-transform: uppercase; letter-spacing: .18em; }
.auth .sub { text-align: center; color: var(--color-muted-foreground); font-size: var(--hs-ui);
             margin: var(--s2) 0 var(--s5); }

/* Attempt status: the shared state line's look (theme.css .fo-state), kept as .msg because the page models hand
   the class names (err / ok / info). Colour = meaning: err = fault, ok = good, info (pending) = attention. */
.msg { padding: var(--s3); border-radius: var(--radius-sm); font-size: var(--hs-ui);
       margin: 0 0 var(--s4); border-left: 3px solid transparent; }
.msg.err  { background: var(--color-fault-bg);     color: var(--color-fault-text);     border-left-color: var(--color-fault-text); }
.msg.ok   { background: var(--color-good-bg);      color: var(--color-good-text);      border-left-color: var(--color-good-text); }
.msg.info { background: var(--color-attention-bg); color: var(--color-attention-text); border-left-color: var(--color-attention-text); }

.auth label { display: block; font-size: var(--hs-ui); color: var(--color-muted-foreground);
              font-weight: 600; margin: var(--s3) 0 var(--s1); }
/* The 16px floor is deliberate and must not be "tidied" back to the 13px body size. iOS Safari zooms the whole
   page in whenever you focus an input under 16px, which on a crew phone makes the sign-in card jump. It is an
   input's text, not the page type scale. The identity focus ring is the house ring. */
.auth form input { width: 100%; box-sizing: border-box; padding: var(--s3);
                   border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
                   background: var(--color-card); color: var(--color-foreground);
                   font-size: 16px; font-family: inherit; }
.auth form input:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 1px; }

/* THE HOUSE BUTTON (13px text) at full width, and the touch HEIGHT kept (48): these are the targets a crew
   member taps on a phone. The old taller 18px-ish button is replaced, not kept. */
.auth .fo-btn { width: 100%; justify-content: center; margin-top: var(--s5); min-height: 48px; }

/* The one safe route to an account for a new person, so it reads as a link, not as the quiet footnote. */
.signup { margin-top: var(--s5); border-top: 1px solid var(--color-border); padding-top: var(--s4); }
.signup > summary { cursor: pointer; color: var(--color-link); font-weight: 600;
                    font-size: var(--hs-ui); padding: var(--s3) 0; }   /* padding, not flex: a flex summary loses its disclosure arrow */
.signup > summary:hover { color: var(--color-link-hover); }

/* Deliberately muted: legal links are a requirement, not a call to action. */
.legal-links { text-align: center; margin: var(--s5) 0 0; padding-top: var(--s4);
               border-top: 1px solid var(--color-border); font-size: var(--hs-ui); }
.legal-links a { color: var(--color-foreground-2); text-decoration: none; }
.legal-links a:hover { color: var(--color-link-hover); text-decoration: underline; }

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

/* Customer or employee: two targets rather than a select, because it decides what the rest of the form is for.
   The chosen one is outlined in the identity (identity only; it is not a status). */
.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; min-height: 48px; box-sizing: border-box;
              border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
              background: var(--color-card); color: var(--color-foreground); font-weight: 600;
              font-size: var(--hs-ui); }
.kind .pick:has(input:checked) { border-color: var(--color-identity); box-shadow: inset 0 0 0 1px var(--color-identity); }
.kind .pick input { width: auto; margin: 0; }

/* ══ FORGOT / RESET / VERIFY ═══════════════════════════════════════════════════════════════════════
   These pages reuse this whole stylesheet so they look like the card they came from; .head is their title. */
.head { font-size: var(--hs-title); font-weight: 650; margin: 0 0 var(--s2); text-align: center; }
/* Right under the Sign in button, small and quiet: a way out for the few. */
.forgot { text-align: right; margin: var(--s2) 0 0; font-size: var(--hs-ui); }
.forgot a { color: var(--color-link); text-decoration: none; }
.forgot a:hover { color: var(--color-link-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; }