/* ===================================================================
   OppFarm authentication surfaces.

   One stylesheet for /signin/, /login, /reset-password/ and
   /auth/complete/, so the four pages that stand in front of the app stop
   drifting from each other and from the app behind them.

   Presentation only. No auth flow, route, field name, form action or
   message string is defined here.
   =================================================================== */

:root {
  color-scheme: dark;
  --background: #08070B;
  --surface-1: #120015;
  --surface-2: #1C071F;
  --surface-3: #251029;
  --brand-pink: #FF0066;
  --brand-purple: #7A00FF;
  --text-primary: #FFFFFF;
  --text-secondary: #B8AFC0;
  --text-muted: #766D7C;
  --hairline: rgba(255, 255, 255, .09);
  --hairline-strong: rgba(255, 255, 255, .16);
  --glass: rgba(255, 255, 255, .045);
  --danger: #FF7AA8;
  --ok: #7BE3B1;
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-interface: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
:root[data-theme="light"] {
  color-scheme: light;
  --background: #FFFBFE;
  --surface-1: #FFFFFF;
  --surface-2: #F5EDF4;
  --surface-3: #EADDEA;
  --text-primary: #1D0D1C;
  --text-secondary: #614D60;
  --text-muted: #806E7F;
  --hairline: rgba(29, 13, 28, .1);
  --hairline-strong: rgba(29, 13, 28, .18);
  --glass: rgba(29, 13, 28, .03);
  --danger: #C2185B;
  --ok: #12855A;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 28px 20px calc(28px + env(safe-area-inset-bottom));
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-interface);
}
/* The same aurora the app uses, so signing in does not look like a
   different product from the one behind it. */
body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255, 0, 102, .18), transparent 60%),
    radial-gradient(90% 55% at 100% 0%, rgba(122, 0, 255, .14), transparent 62%);
  content: "";
  pointer-events: none;
}

/* ---- the card ---------------------------------------------------- */
.card {
  width: min(100%, 380px);
  display: grid;
  gap: 14px;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  padding: 26px 22px;
  background: var(--surface-1);
  box-shadow: 0 30px 70px -32px rgba(0, 0, 0, .92);
  text-align: left;
}
:root[data-theme="light"] .card { box-shadow: 0 28px 60px -34px rgba(67, 31, 65, .45); }

.brand { margin: 0 0 4px; }
.brand img { display: block; width: 168px; height: auto; margin: 0; }
.brand-light { display: none !important; }
:root[data-theme="light"] .brand-dark { display: none !important; }
:root[data-theme="light"] .brand-light { display: block !important; }

/* ---- fields ------------------------------------------------------- */
.field { display: grid; gap: 6px; }
.field > span {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
input {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 0 15px;
  background: var(--surface-2);
  color: var(--text-primary);
  font: 550 16px var(--font-interface);
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
input::placeholder { color: var(--text-muted); }
input:focus { border-color: rgba(255, 0, 102, .6); box-shadow: 0 0 0 3px rgba(255, 0, 102, .13); }

.form { display: grid; gap: 12px; }

/* ---- buttons ------------------------------------------------------ */
button {
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  font-family: var(--font-interface);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.15px;
  cursor: pointer;
  transition: transform 150ms var(--ease-out), opacity 150ms ease;
}
button:active:not(:disabled) { transform: scale(.985); }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid var(--brand-pink);
  outline-offset: 2px;
}

/* Primary: the app's own gradient. */
.btn-primary, button[type="submit"]:not(.secondary):not(.link) {
  background: linear-gradient(135deg, var(--brand-pink), #C500A1);
  color: #FFFFFF;
  box-shadow: 0 14px 30px -16px rgba(255, 0, 102, 1);
}
/* Secondary keeps the existing relationship between the two sign-in
   methods -- this pass restyles them, it does not re-rank them. */
button.secondary {
  border: 1px solid var(--hairline-strong);
  background: var(--glass);
  color: var(--text-primary);
}

/* Google keeps its conventional treatment so it is identifiable at a
   glance, with the mark it never had. */
.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--hairline-strong);
  background: #FFFFFF;
  color: #1F1F1F;
}
.btn-google svg { width: 18px; height: 18px; flex: 0 0 auto; }
.btn-google:disabled { opacity: .6; }

.link {
  justify-self: start;
  min-height: 0;
  padding: 2px 0;
  background: none;
  border: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link:hover { color: var(--text-primary); }

/* ---- divider ------------------------------------------------------ */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.divider::before, .divider::after { flex: 1; height: 1px; background: var(--hairline); content: ""; }

/* ---- messages ----------------------------------------------------- */
.note { margin: 0; color: var(--text-muted); font-size: 11.5px; line-height: 1.5; }
.err, .ok {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  border: 1px solid currentColor;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
}
.err { color: var(--danger); background: rgba(255, 122, 168, .09); }
.ok { color: var(--ok); background: rgba(123, 227, 177, .09); }
.err::before, .ok::before { flex: 0 0 auto; font-weight: 700; }
.err::before { content: "!"; }
.ok::before { content: "\2713"; }
.err:empty, .ok:empty { display: none; }

/* ---- status page (/auth/complete/) -------------------------------- */
.authstatus { display: grid; justify-items: center; gap: 14px; text-align: center; }
.authstatus .spinner {
  width: 26px;
  height: 26px;
  border: 2px solid var(--hairline-strong);
  border-top-color: var(--brand-pink);
  border-radius: 50%;
  animation: authspin .8s linear infinite;
}
@keyframes authspin { to { transform: rotate(360deg); } }
.authstatus p { margin: 0; color: var(--text-secondary); font-size: 13.5px; line-height: 1.5; }
.authstatus p.err { justify-content: center; color: var(--danger); }
/* The spinner claims work is still happening; once the page has failed it
   would be asserting progress that has stopped. */
.authstatus:has(p.err) .spinner { display: none; }
@media (prefers-reduced-motion: reduce) { .authstatus .spinner { animation: none; } }

/* ---- responsive ---------------------------------------------------- */
@media (min-width: 768px) {
  .card { width: min(100%, 412px); gap: 16px; padding: 32px 28px; }
  .brand img { width: 182px; }
}
@media (prefers-reduced-motion: reduce) {
  button:active:not(:disabled) { transform: none; }
}