/* ---------------------------------------------------------------------
   Login-page styling — mirrors workreef/marketing/site/src/index.css.

   Scoped to the login surface (not loaded by base.html's inline style).
   The platform's tokens.css already mirrors the marketing palette, so
   we only need to redeclare the parts of the marketing visual language
   that aren't carried over: typography, pill buttons, animated gradient,
   soft glass cards, generous padding.

   Loaded via login.html's {% block head %}, AFTER base.html's inline
   <style>, so its overrides win.
   --------------------------------------------------------------------- */

/* Hide the marketing top-bar chrome on the auth page — clean,
   distraction-free sign-in. The platform topbar is short on context
   (no tenant scope yet) and the marketing site doesn't surface a nav
   on its access page either. */
header.topbar { display: none; }

/* Break out of base.html's narrow .container so the animated
   gradient fills the whole viewport. */
main.container {
  max-width: none;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--wr-bg);
  background-image:
    radial-gradient(at 0% 0%,     rgba(59,  77, 140, 0.22) 0px, transparent 50%),
    radial-gradient(at 100% 0%,   rgba(38,  74, 120, 0.18) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(122, 98,  56, 0.12) 0px, transparent 50%),
    radial-gradient(at 0% 100%,   rgba(59, 100, 160, 0.14) 0px, transparent 50%);
  background-size: 400% 400%;
  animation: wr-undertow 18s ease-in-out infinite alternate;
  font-family: var(--wr-font-body);
  color: var(--wr-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

@keyframes wr-undertow {
  0%   { background-position: 0% 0%; }
  25%  { background-position: 100% 0%; }
  50%  { background-position: 100% 100%; }
  75%  { background-position: 0% 100%; }
  100% { background-position: 50% 50%; }
}

/* Respect prefers-reduced-motion — kill the gradient drift entirely. */
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}

.wr-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
}

.wr-auth-shell {
  width: 100%;
  max-width: 440px;
}

.wr-auth-brand {
  text-align: center;
  margin-bottom: 2.25rem;
  font-family: var(--wr-font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--wr-text);
}

.wr-auth-brand .accent { color: var(--wr-ocean); }

.wr-auth-card {
  background: var(--wr-surface);
  border: 1px solid var(--wr-glass-border);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 8px 28px rgba(26, 43, 94, 0.06);
}

.wr-auth-eyebrow {
  font-family: var(--wr-font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--wr-warm);
  margin-bottom: 0.85rem;
}

.wr-auth-title {
  font-family: var(--wr-font-display);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--wr-text);
  margin: 0 0 0.5rem;
}

.wr-auth-lead {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--wr-text-muted);
  margin: 0 0 1.75rem;
}

.wr-auth-error {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--wr-error-bg);
  border: 1px solid var(--wr-error-border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: var(--wr-error);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.wr-auth-form { display: grid; gap: 1rem; }

.wr-auth-field { display: grid; gap: 0.4rem; }

/* Override base.html's all-caps mini label — marketing uses a softer,
   sentence-case label sized to the input. */
.wr-auth-field label {
  font-family: var(--wr-font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--wr-text-muted);
  text-transform: none;
  margin: 0;
}

.wr-auth-field input {
  font-family: var(--wr-font-body);
  font-size: 0.95rem;
  color: var(--wr-text);
  background: var(--wr-bg);
  border: 1px solid var(--wr-glass-border);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  width: 100%;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.wr-auth-field input:focus-visible {
  border-color: var(--wr-ocean);
  background: var(--wr-surface);
  box-shadow: 0 0 0 3px var(--wr-focus-ring);
}

/* Password-step context line — shows the email the user already
   entered so they know which account they're authenticating. */
.wr-auth-context {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--wr-text-muted);
  margin: 0 0 0.5rem;
}

.wr-auth-context strong {
  color: var(--wr-text);
  font-weight: 600;
}

/* Marketing's primary button: dark pill, subtle lift on hover. */
.wr-auth-submit {
  width: 100%;
  background: var(--wr-text);
  color: var(--wr-surface);
  font-family: var(--wr-font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 0.9rem 2.25rem;
  cursor: pointer;
  text-transform: none;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 0.5rem;
}

.wr-auth-submit:hover {
  background: var(--wr-btn-hover);
  transform: translateY(-1px);
  box-shadow: var(--wr-shadow-lg);
}

.wr-auth-submit:active { transform: translateY(0); }

.wr-auth-meta {
  margin-top: 1.5rem;
  font-size: 0.825rem;
  text-align: center;
  color: var(--wr-text-subtle);
}

.wr-auth-meta a {
  color: var(--wr-ocean);
  text-decoration: none;
  font-weight: 500;
}

.wr-auth-meta a:hover { text-decoration: underline; }

/* Mobile polish — keep the card breathable on a narrow viewport. */
@media (max-width: 480px) {
  .wr-auth-page  { padding: 1.5rem 1rem; }
  .wr-auth-card  { padding: 1.75rem 1.5rem; border-radius: 12px; }
  .wr-auth-title { font-size: 1.75rem; }
  .wr-auth-brand { margin-bottom: 1.5rem; }
}