/*
 * login.css — pixel-faithful parity with the iOS LoginView.
 * Spec: /Users/sachb/acfc-wellness/PlayerSurveys/Features/Login/LoginView.swift
 *
 * iOS layout: ZStack(BgBase, ignoresSafeArea) over a VStack(spacing: 0) of:
 *   Spacer · logo · Spacer(60) · Apple btn · pad12 · Google btn · [error] · Spacer · footer(pad-bottom 32)
 * Reproduced with a full-viewport flex column + justify-content: space-between to
 * mimic the top/bottom Spacers, the logo group centered, buttons stacked, footer
 * pinned near the bottom. Buttons are full width minus 32px horizontal margin.
 *
 * Uses design tokens from tokens.css. Own classes are .login-* and intentionally
 * DO NOT reuse app.css's .login / .login-card / .gsi-button (which centre a card).
 */

.login-screen {
  /* Full-viewport background == BgBase (ignoresSafeArea). The body already
     applies safe-area padding; we want the bg to bleed under it, hence the
     negative-margin trick so the rose-free base fills the whole viewport. */
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* Top/bottom breathing room equivalent to the leading/trailing Spacers. */
  padding: 48px 0 32px;
  text-align: center;
}

/* The middle block (logo + buttons) sits in a flex child that grows so the
   footer is pushed to the bottom while the logo stays vertically centred-ish
   between the two Spacers — matches Spacer · logo · Spacer(60) · buttons · Spacer. */
.login-main {
  flex: 1 1 auto;
  width: 100%;
  /* Desktop guard: on a wide viewport, stop the buttons stretching full-bleed.
     No effect on a phone (100% < 420px). */
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ---- Logo group: VStack(spacing: 12) ---- */
.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  /* Spacer().frame(height: 60) between logo and the first button. */
  margin-bottom: 60px;
}

.login-logo-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  display: block;
}

.login-logo-title {
  /* Theme.Fonts.largeTitle = .largeTitle rounded heavy (~34px). */
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}

.login-logo-subtitle {
  /* Theme.Fonts.caption + .uppercase + tracking(2). */
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-secondary);
  margin: 0;
}

/* ---- Buttons: full width minus 32px horizontal margin (.padding(.horizontal, 32)) ---- */
.login-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* 32px margin each side. */
  padding: 0 32px;
}

.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}

.login-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Apple: white bg, black text, height 48, radius 12. Appearance-only on web. */
.login-apple-btn {
  height: 48px;
  background: #FFFFFF;
  color: #000000;
  font-weight: var(--weight-semibold);
  /* iOS .white Apple button is FLAT (no card elevation). A hairline keeps the
     white button visible on the white BgBase without faking a floating shadow. */
  border: 1px solid var(--hairline);
  /* 12px gap before the Google button (.padding(.bottom, 12)). */
  margin-bottom: 12px;
}

.login-apple-glyph {
  width: 18px;
  height: 18px;
  display: block;
  /* The inline SVG inherits this as its fill. */
  color: #000000;
}

/* Google: Sol Rosa bg, black text, 14px vertical padding, radius 12. */
.login-google-btn {
  padding: 14px 0;
  background: var(--accent);
  color: #000000;
  /* "Login", .fontWeight(.semibold). */
  font-weight: var(--weight-semibold);
}

.login-google-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

/* GIS-rendered button host: keep it full-width-ish and centred. The Google
   Identity Services iframe button replaces our custom Google button when a
   client id is present. */
.login-gsi-host {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* ---- Error: Theme.danger, centred, .padding(.top 12, .horizontal 32) ---- */
.login-error {
  color: var(--danger);
  font-size: 12px;
  font-weight: var(--weight-medium);
  text-align: center;
  margin: 12px 32px 0;
  line-height: 1.4;
}

/* ---- Inline note (Apple deferred / not-configured): secondary, smaller ---- */
.login-note {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: var(--weight-medium);
  text-align: center;
  margin: 12px 32px 0;
  line-height: 1.4;
}

/* ---- Busy line ---- */
.login-busy {
  color: var(--text-secondary);
  font-size: 13px;
  margin: 12px 0 0;
}

/* ---- Footer: caption, secondary, pinned near bottom (pad-bottom 32 handled
        by .login-screen padding). ---- */
.login-footer {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  margin: 0;
}