/* HAMAVA auth — light theme coordinated with the landing (2026-09-18).
   Card composition inspired by login-forms/forms/modern-saas (centered card,
   pill back-link, divider, soft focus ring), recolored to the HAMAVA
   landing identity (light mint + #0fb996 green). Loaded AFTER ui.css in
   auth_base.html — overrides only, no DOM changes, so user/agent/manager
   login + register/forgot/sms pages all follow automatically.
   Scoped to non-dark display mode; dark-mode rules in ui.css stay intact. */

html:not([data-display-theme="dark"]) body[data-ui-auth] {
  background: linear-gradient(180deg, #f7fbf8 0%, #e9f4ec 100%);
  color: #1d3a2e;
}
html:not([data-display-theme="dark"]) body[data-ui-auth]::before {
  background: radial-gradient(circle, #0fb9962e, transparent 70%);
  opacity: .8;
}
html:not([data-display-theme="dark"]) body[data-ui-auth]::after {
  background: radial-gradient(circle, #0fb9961f, transparent 70%);
  opacity: .8;
}

/* Story panel: same content (brand, headline, voice-hero image), but light
   like the landing instead of dark-green — single harmonious tone. */
html:not([data-display-theme="dark"]) .auth-story {
  background: linear-gradient(165deg, #ffffff 0%, #e9f5ed 58%, #ddefe4 100%);
  color: #12372a;
  border: 1px solid #d7e8dc;
  box-shadow: 0 24px 60px #0a7a5f1f;
}
html:not([data-display-theme="dark"]) .auth-story::before {
  background:
    radial-gradient(600px 300px at 85% 10%, #0fb99626, transparent 60%),
    radial-gradient(500px 320px at 10% 95%, #0fb9961a, transparent 60%);
}
html:not([data-display-theme="dark"]) .auth-story::after {
  opacity: .1;
  background-image: radial-gradient(#0a7a5f66 1px, transparent 1px);
}
html:not([data-display-theme="dark"]) .auth-story .brand { color: #12372a; }
html:not([data-display-theme="dark"]) .auth-story .brand small { color: #0a7a5f; }
html:not([data-display-theme="dark"]) .auth-story .eyebrow { color: #0a7a5f; }
html:not([data-display-theme="dark"]) .auth-story .eyebrow:before { background: #0a7a5f; }
html:not([data-display-theme="dark"]) .auth-story h2 { color: #10281f; }
html:not([data-display-theme="dark"]) .auth-story p { color: #47655a; }
html:not([data-display-theme="dark"]) .auth-story > img {
  border: 1px solid #0a7a5f26;
  box-shadow: 0 18px 44px #0a7a5f26;
}
html:not([data-display-theme="dark"]) .auth-story-bottom {
  color: #0a7a5f;
  border-top: 1px solid #0a7a5f26;
}

/* Form card: keep white, soften shadow to a mint tint. */
html:not([data-display-theme="dark"]) .auth-box {
  box-shadow: 0 24px 60px #0a7a5f21;
}

/* Divider between password login and Google/SMS buttons
   (modern-saas style), used by user_login.html. */
html:not([data-display-theme="dark"]) .auth-divider,
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
  color: #7a8d81;
  font-size: 12px;
  font-weight: 600;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #d9e6dd;
}
.auth-divider span { padding: 0 4px; }

/* Stacked Google/SMS secondary buttons with breathing room. */
.auth-box .btn.secondary.full { margin-top: 10px; }

/* Reduced motion: respect user preference. */
@media (prefers-reduced-motion: reduce) {
  .auth-box { animation: none !important; }
  .auth-box .btn.full,
  .auth-top > a:last-child { transition: none !important; }
}