/* Aurea AM sign-in surface. Standalone document (does NOT extend _base.html or
 * load the app-shell CSS) — this file is self-contained so the login page reads
 * as a calm front door, not the working app. Mirrors the Aurea look at
 * app.withaurea.com: an animated aurora backdrop behind a single elevated card.
 * Palette + shadows are lifted from Batch 2's design schema (accent #4178E5). */

:root {
  /* Palette (schema §2) */
  --accent:         #4178E5;
  --accent-strong:  #2C5BC9;
  --accent-soft:    #EAF1FE;
  --text:           #15181D;
  --text-2:         #5B6470;
  --text-3:         #9AA1AB;
  --bg:             #FBFBFC;
  --bg-elev:        #FFFFFF;
  --divider:        rgba(20, 25, 35, 0.06);
  --divider-strong: rgba(20, 25, 35, 0.10);

  --radius-md: 10px;
  --radius-lg: 14px;

  --shadow-card: 0 1px 2px rgba(20, 25, 35, 0.04), 0 0 0 1px rgba(20, 25, 35, 0.05);
  --shadow-pop:  0 10px 40px rgba(20, 25, 35, 0.10), 0 2px 6px rgba(20, 25, 35, 0.05);
  --shadow-fab:  0 6px 20px rgba(65, 120, 229, 0.35), 0 2px 4px rgba(65, 120, 229, 0.20);

  --transition: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif;
}

.auth-shell {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
}

/* Aurora backdrop — three drifting radial blooms, blurred behind the card. */
.auth-bg {
  position: absolute;
  inset: -25% -10% -10%;
  z-index: -2;
  pointer-events: none;
}
.aurora {
  position: absolute;
  inset: 0;
  filter: blur(60px) saturate(140%);
}
.aurora__blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.55;
  mix-blend-mode: multiply;
  will-change: transform;
}
.aurora__blob--1 {
  width: 520px; height: 520px;
  left: 4%; top: -8%;
  background: radial-gradient(circle at 30% 30%, #4178E5, transparent 70%);
  animation: aurora-drift-1 18s ease-in-out infinite alternate;
}
.aurora__blob--2 {
  width: 460px; height: 460px;
  right: 6%; top: -4%;
  background: radial-gradient(circle at 60% 40%, #8B5CF6, transparent 70%);
  animation: aurora-drift-2 22s ease-in-out infinite alternate;
}
.aurora__blob--3 {
  width: 580px; height: 580px;
  left: 38%; top: 6%;
  background: radial-gradient(circle at 50% 50%, #38BDF8, transparent 70%);
  animation: aurora-drift-3 26s ease-in-out infinite alternate;
}
@keyframes aurora-drift-1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(60px, 40px, 0) scale(1.12); }
}
@keyframes aurora-drift-2 {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to   { transform: translate3d(-50px, 60px, 0) scale(0.95); }
}
@keyframes aurora-drift-3 {
  from { transform: translate3d(0, 0, 0) scale(0.95); }
  to   { transform: translate3d(40px, -50px, 0) scale(1.1); }
}

/* Brand lockup — a gradient mark + wordmark, top-left. */
.auth-top { padding: 28px 28px 0; }
.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}
.auth-brand__mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent) 0%, #8B5CF6 100%);
  box-shadow: var(--shadow-fab);
}
.auth-brand__am {
  color: var(--text-3);
  font-weight: 600;
}

.auth-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 72px;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-elev);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 40px 36px;
}

.auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid rgba(65, 120, 229, 0.18);
}
.auth-eyebrow__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 120, 229, 0.18);
}

.auth-card h1 {
  margin: 18px 0 0;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--text);
}
.auth-sub {
  margin: 10px 0 0;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.5;
}
.auth-sub strong { color: var(--text); font-weight: 600; }

/* Google SSO — white pill with the multicolor mark, matching the card. */
.auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  margin-top: 28px;
  border: 1px solid var(--divider-strong);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}
.auth-google:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}
.auth-google:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.auth-google svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* Domain-restricted note under the button. */
.auth-note {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--divider);
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
}

/* Access-restricted banner (shown when a non-udplp.com account was rejected). */
.auth-banner {
  margin: 20px 0 0;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.45;
  background: #fef2f2;
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #b91c1c;
}

/* Connector consent and refusal pages (AI connectors U7). Same card; a labelled list of what
   the app can read, and two explicit buttons — the primary one says what it does. */
.auth-facts {
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 14px;
  font-size: 14px;
  line-height: 1.45;
}
.auth-facts dt { color: var(--text-2); }
.auth-facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.auth-reads { margin: 18px 0 0; padding-left: 20px; color: var(--text); font-size: 14px;
  line-height: 1.55; }
.auth-actions { display: flex; gap: 10px; margin-top: 26px; }
.auth-btn {
  flex: 1 1 0;
  height: 44px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid var(--divider-strong);
  background: var(--bg-elev);
  color: var(--text);
}
.auth-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.auth-btn--primary:hover { background: var(--accent-strong); }
.auth-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

@media (max-width: 480px) {
  .auth-card { padding: 32px 22px; }
  .auth-top { padding: 22px 22px 0; }
}

/* Freeze the aurora for users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .aurora__blob { animation: none !important; }
}