/* frontend/styles/pages/login.css
   The staging gate page. Reuses the FROZEN main.css design system (tokens,
   .kicker, .accent-rule, .wordmark, .form-field, .btn-primary) -- this file
   only lays out the centred card over a calm cream-washed floral, echoing the
   site's signature "solid card floating on her floral" motif. */

.login-body { min-height: 100vh; background: var(--c-canvas); }

.login {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2xl) var(--gutter);
  overflow: hidden;
}

/* Her sarviWebBG floral, washed down hard with a cream gradient so it reads as
   quiet atmosphere behind the card -- never competing with the form. Decorative.
   Falls back to plain canvas if the image fails (the gradient still paints). */
.login__floral {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--c-canvas);
  background-image:
    linear-gradient(160deg, rgba(250, 249, 247, 0.86), rgba(250, 249, 247, 0.93)),
    url('/assets/images/sarviWebBG-web.jpg');
  background-size: cover;
  background-position: center;
}

/* The SOLID opaque card -- the only place content lives (mirrors
   .floral-window__card: cream fill, soft layered shadow, near-sharp radius). */
.login__card {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  background: var(--c-canvas);
  border-radius: var(--radius);
  padding: var(--sp-3xl) var(--sp-2xl) var(--sp-2xl);
  box-shadow:
    0 26px 54px -26px rgba(30, 31, 32, 0.55),
    0 8px 22px -16px rgba(30, 31, 32, 0.40);
  text-align: left;
}

.login__wordmark { display: block; font-size: 2rem; margin: 0 0 var(--sp-lg); }

.login__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--c-onyx);
  margin: 0 0 var(--sp-sm);
}

.login__lead { color: var(--c-onyx); margin: 0 0 var(--sp-lg); }

/* Error banner -- warm blush surface + the site's error red, icon + text. */
.login__error {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  background: var(--c-surface-blush);
  color: #7A2E2E;
  border-radius: var(--radius);
  padding: var(--sp-sm) var(--sp-md);
  margin: 0 0 var(--sp-md);
  font-size: var(--fs-body-sm);
  font-weight: 600;
}
.login__error::before { content: "\26A0"; }
/* display:flex above would otherwise beat the UA [hidden]{display:none} (author
   origin wins at equal specificity) -- this keeps the banner hidden until ?e=1. */
.login__error[hidden] { display: none; }

.login__form .form-field { margin-block-end: var(--sp-md); }
.login__submit { width: 100%; margin-top: var(--sp-sm); }

.login__note { color: var(--c-sage); margin: var(--sp-lg) 0 0; }

@media (max-width: 480px) {
  .login__card { padding: var(--sp-2xl) var(--sp-lg); }
}