/* public/asksolve/signin.css — the Sign in card on the street wall (DESIGN-SYSTEM.md 5: STRICT).
 * Every colour is a token from tokens.css; the only literal colours are the board's own black shadows.
 * Sizes, weights and radii are copied from the boards' inline styles (SignInNight*.html / *Mobile*).
 * Desktop: the wall-desk photo full bleed, a 420 card floating (padding-top 70 on the stage).
 * Phone (390 boards): the wall-phone photo, and the card becomes a sheet rising from a per-state top
 * (data-top on the state: Welcome 330, Wrong 250, Reset 330, Sent 330, NewPass 300, Code 150,
 * Expired 400, Locked 300). Poppins 400/700/900 only; the smallest text here is 10px.
 * Only drawn states: the ticks are accent (the boards draw no other tick colour), the eye is mute2
 * shown or hidden, a field's border is panelLine at rest and focused, bad when the server said so. */
html, body { min-height: 100%; }
body { position: relative; min-height: calc(100dvh / var(--z, 1)); overflow-x: hidden; }
.wall { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.wall img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ⚖ G-AUDIT-29-46 #26 (29-46 #6d, proven at 3440x1440): object-fit cover crops equally from top and bottom at
   center (the default 50% 50%), and the wordmark sits near the top of wall-desk's own photo, so an ultra-wide
   viewport (short relative to the image once it is stretched to fill the width) cut it off first. The same
   W-M1 ultra-wide floor (min-width:1920px, ui.css) anchors the desk wall to its top instead: the posters and the
   floating card the boards draw are unchanged, only the crop moves to the bottom, where nothing drawn sits. */
@media (min-width: 1920px) {
  .wall-desk img { object-position: 50% 0%; }
}
/* three responsive sets (FS-M1/FS-M2, image-quality table): desk (the default here), tablet and phone
   (max-width 640, the sheet boards). Exactly one is ever visible.
   ⚖ XW-H1 (Josh saw it at 768 on 09/25): the tablet crop drew the Solve logo huge and cut the posters off at the
   bottom, a look no board draws. No board draws 641-1024, so the drawn walls decide it: a landscape tablet
   (1024x768) keeps the desk wall and the floating card exactly as desktop; a PORTRAIT tablet (768x1024) wears
   the phone wall pinned to its top (logo on top, the three posters under it, as SignIn*Mobile draws them) with
   the desktop card floating in the open wall below the posters. The tablet crop stays in the page, unused. */
.wall-tablet, .wall-phone { display: none; }
@media (max-width: 1024px) and (min-width: 641px) and (orientation: portrait) {
  .wall-desk { display: none; }
  .wall-phone { display: block; }
  .wall-phone img { object-position: 50% 0; }
  body .stage { justify-content: flex-start; padding: calc(80vw / var(--z, 1)) 16px 24px; }
}

/* the stage and the card (desktop) */
.stage { position: relative; z-index: 1; min-height: calc(100dvh / var(--z, 1)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 70px 16px 24px; box-sizing: border-box; }
.card { width: 420px; max-width: 100%; box-sizing: border-box; border-radius: 18px; padding: 30px 30px 26px 30px; background: var(--panel); border: 1px solid var(--panelLine); box-shadow: 0 30px 70px rgba(0,0,0,0.55); }
.state { display: none; flex-direction: column; gap: 16px; }
.state.on { display: flex; }
.state form { display: flex; flex-direction: column; gap: 16px; }

/* words */
.head { display: flex; flex-direction: column; gap: 8px; }
.h { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
.sub { margin: 0; font-size: 12px; font-weight: 400; color: var(--ink2); line-height: 1.4; }
.sub:empty { display: none; }
.note { margin: 0; font-size: 11px; font-weight: 400; color: var(--mute2); text-align: center; }
.alert { display: none; padding: 11px 13px; border-radius: 12px; background: var(--alertBg); border: 1px solid var(--alertLine); font-size: 12px; line-height: 1.35; color: var(--alertInk); }
.alert.on { display: flex; }
.tick { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink2); line-height: 1.4; }
.tick svg { flex-shrink: 0; }

/* fields */
.field { display: flex; flex-direction: column; gap: 6px; }
.lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.box { box-sizing: border-box; width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--panelLine); background: var(--track); display: flex; align-items: center; gap: 8px; }
.box.bad { border-color: var(--bad); }
.box input { flex-grow: 1; min-width: 0; height: 100%; border: 0; padding: 0; margin: 0; background: transparent; color: var(--ink); font-size: 14px; font-weight: 400; outline: none; }
.box input::placeholder { color: var(--mute2); opacity: 1; }
.eye { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -14px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.eye svg { display: block; }

/* buttons (DESIGN-SYSTEM.md: primary accent pill 48; secondary rowOn fill, panelLine border, accent text) */
.btn { display: flex; align-items: center; justify-content: center; box-sizing: border-box; white-space: nowrap; border: 0; cursor: pointer; padding: 0; }
.btn.primary { height: 48px; border-radius: 24px; background: var(--accent); color: var(--onAccent); font-size: 14.5px; font-weight: 700; }
.btn.secondary { height: 44px; border-radius: 22px; background: var(--rowOn); border: 1px solid var(--panelLine); color: var(--accent); font-size: 13.5px; font-weight: 700; }
.link { font-size: 12px; font-weight: 700; color: var(--accent); align-self: center; }

/* phone: the sheet over the wall-phone photo (boards SignIn*Mobile*, 390 x 844) */
@media (max-width: 640px) {
  .wall-desk { display: none; }
  .wall-tablet { display: none; }
  .wall-phone { display: block; }
  /* the sheet's offset is PADDING on the stage, not a margin on the card: a margin collapses through
     body onto html and makes the page scroll by exactly that many pixels */
  .stage { display: block; padding: var(--sheet-top, 330px) 0 0 0; min-height: calc(100dvh / var(--z, 1)); }
  .card { width: 100%; min-height: calc(calc(100dvh / var(--z, 1)) - var(--sheet-top, 330px)); border-radius: 22px 22px 0 0; border: 0; border-top: 1px solid var(--panelLine); box-shadow: 0 -18px 40px rgba(0,0,0,0.45); padding: 28px 22px 26px 22px; }
}