/* ===== Auth pages (sign in / sign up / password reset) — Raisons branding =====
   The site ships a dark theme (design-tokens.css) that these .auth-shell pages
   used to inherit. This stylesheet re-skins them to match the light navy/Hanken
   landing design. Everything is scoped under .auth-shell so it only affects the
   entrance pages, and specificity is raised where needed to beat the dark
   theme's bare-element rules (e.g. input[type=...]). */

/* The entrance markup carries data-reveal (scroll-in animation) which starts at
   low opacity. On an above-the-fold auth card that just reads as "washed out",
   so force these always-visible. */
.auth-shell [data-reveal] { opacity: 1 !important; transform: none !important; }

body.auth-shell {
  font-family: 'Hanken Grotesk', sans-serif;
  color: #000080;
  background:
    radial-gradient(circle at 12% 8%, rgba(0, 0, 128, 0.06), transparent 42%),
    radial-gradient(circle at 92% 100%, rgba(0, 0, 128, 0.05), transparent 46%),
    #F6F8FB;
}

.auth-shell .site-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.auth-shell .container { width: 100%; padding: 0; }

.auth-shell .auth-frame { display: flex; justify-content: center; }
.auth-shell .auth-panel {
  width: 100%;
  max-width: 430px;
  background: #fff;
  border: 1px solid #E4EAF1;
  border-radius: 18px;
  padding: 40px;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 128, 0.35);
}

.auth-shell .auth-logo { display: block; height: 48px; width: auto; margin: 0 0 24px; }
.auth-shell .auth-back-link { display: inline-block; font-size: 14px; font-weight: 600; color: #6B7B8F; margin-bottom: 18px; text-decoration: none; }
.auth-shell .auth-back-link:hover { color: #000080; }

.auth-shell .section-kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6B7B8F; margin-bottom: 6px; }
.auth-shell h1 { font-family: 'Hanken Grotesk', sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -0.02em; color: #000080; margin: 0 0 8px; }
.auth-shell .text-muted { color: #52627A !important; }
.auth-shell .small { font-size: 13px; }

.auth-shell .form-label { display: block; font-weight: 600; font-size: 14px; color: #3C4A5C; margin-bottom: 8px; }
.auth-shell input[type="text"],
.auth-shell input[type="email"],
.auth-shell input[type="password"],
.auth-shell input[type="tel"],
.auth-shell .form-control {
  width: 100%;
  padding: 12px 14px;
  min-height: 0;
  border: 1px solid #CBD6E2;
  border-radius: 10px;
  background: #fff;
  color: #000080;
  font-size: 15px;
  outline: none;
  transition: .15s;
}
.auth-shell input:focus,
.auth-shell .form-control:focus {
  background: #fff;
  color: #000080;
  border-color: #000080;
  box-shadow: 0 0 0 3px rgba(0, 0, 128, 0.1);
}
.auth-shell input::placeholder { color: #8B99AB; }

.auth-shell .btn-primary {
  background: #000080;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px 20px;
  font-weight: 600;
  font-size: 15px;
  transition: .15s;
}
.auth-shell .btn-primary:hover { background: #1A1AA8; }

.auth-shell .field-error { color: #B4472E; font-size: 13px; margin-top: 6px; }
.auth-shell .auth-panel a { color: #000080; }
.auth-shell .auth-panel a.auth-back-link { color: #6B7B8F; }
.auth-shell .auth-panel a.auth-back-link:hover { color: #000080; }

/* Checkbox row (e.g. "Remember me") */
.auth-shell input[type="checkbox"] { accent-color: #000080; }