/* ──────────────────────────────────────────────────────────────────
 * VannaQ sign-in page shell.
 *
 * Hosts a centered Clerk prebuilt SignIn card on a dark fintech
 * background. No outer heading — the SignIn component carries its
 * own card title at runtime, so duplicating it in static HTML
 * created a confusing "Sign in to VannaQ" + "Sign in" stack.
 *
 * Loaded only by sign-in.html (alongside the shared app.css that
 * styles the nav). Other pages do not pick this file up.
 *
 * No inline <style> in HTML — every rule lives here so CSP
 * `style-src-elem 'self' https://fonts.googleapis.com` is enough
 * for the static page; the looser `'unsafe-inline'` allowance from
 * the Task 15 SIGN_IN CSP profile only kicks in for Clerk's
 * runtime <style> injection inside the card.
 * ────────────────────────────────────────────────────────────────── */

body.sign-in-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #050505;
  color: #f5f5f5;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The shell flex-fills the viewport between nav and footer (none on
 * sign-in) so the card sits in the optical centre rather than at
 * the top of the page. min-height accounts for the 70-80px nav. */
.sign-in-shell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
  min-height: calc(100vh - 80px);
}

/* Constrain the Clerk mount to a fintech-app-sized card. Clerk's
 * own theming handles the inner padding, fonts, and accent colour
 * via its component defaults; the wrapper just bounds the width
 * so the card does not stretch on a desktop viewport. */
.clerk-mount {
  width: min(440px, 100%);
}

/* Visible only when JavaScript is disabled — Clerk's UI never
 * mounts in that case, so the noscript copy explains why. */
.sign-in-fallback {
  margin: 0;
  padding: 16px 20px;
  text-align: center;
  color: #c7c7cc;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  background: rgba(28, 28, 30, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
}

@media (max-width: 600px) {
  .sign-in-shell {
    padding: 32px 16px;
    min-height: calc(100vh - 70px);
  }
}