/* Route-specific login presentation. This library is attached only to user.login. */
.surf-login-route {
  margin: 0;
  background:
    linear-gradient(135deg, rgba(9, 20, 31, .96), rgba(28, 35, 42, .9)),
    repeating-linear-gradient(90deg, transparent 0, transparent 79px, rgba(255, 255, 255, .025) 80px);
  color: #1c232a;
}

.surf-login-route .dialog-off-canvas-main-canvas { min-height: 100vh; }

.surf-login {
  box-sizing: border-box;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: clamp(24px, 6vw, 72px) 20px;
}

.surf-login__card {
  width: min(100%, 600px);
  overflow: hidden;
  background: #fff;
  border-top: 5px solid var(--surf-accent, #8b0000);
  border-radius: 3px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

.surf-login__header { padding: 36px 40px 25px; text-align: center; }
.surf-login__logo { display: block; width: auto; max-width: min(100%, 350px); max-height: 105px; margin: 0 auto; object-fit: contain; }
.surf-login__site-name { font: 700 clamp(2rem, 8vw, 3.25rem)/1 Georgia, 'Times New Roman', serif; letter-spacing: -.035em; }
.surf-login__eyebrow { margin: 16px 0 0; color: #68717a; font: 700 .72rem/1.3 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }

.surf-login__tabs { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid #dfe2e5; }
.surf-login__tab { padding: 15px 12px 13px; color: #555f68; font: 700 .84rem/1.2 Arial, sans-serif; letter-spacing: .035em; text-align: center; text-decoration: none; text-transform: uppercase; }
.surf-login__tab + .surf-login__tab { border-left: 1px solid #dfe2e5; }
.surf-login__tab:hover, .surf-login__tab:focus { color: var(--surf-accent, #8b0000); background: #f7f7f5; }
.surf-login__tab.is-active { color: var(--surf-accent, #8b0000); box-shadow: inset 0 -3px var(--surf-accent, #8b0000); }

.surf-login__form { padding: 30px 40px 34px; }
.surf-login__form .page-title, .surf-login__form h1 { margin: 0 0 24px; font: 700 1.8rem/1.15 Georgia, 'Times New Roman', serif; text-align: center; }
.surf-login__form .form-item { margin: 0 0 20px; }
.surf-login__form label { display: block; margin: 0 0 7px; color: #252b30; font: 700 .86rem/1.3 Arial, sans-serif; }
.surf-login__form input[type='text'], .surf-login__form input[type='email'], .surf-login__form input[type='password'] { box-sizing: border-box; width: 100%; min-height: 49px; padding: 11px 13px; border: 1px solid #aeb5bb; border-radius: 2px; background: #fff; color: #171b1f; font: 1rem/1.4 Arial, sans-serif; }
.surf-login__form input:focus { border-color: var(--surf-accent, #8b0000); outline: 3px solid color-mix(in srgb, var(--surf-accent, #8b0000) 18%, transparent); }
.surf-login__form .description { margin-top: 6px; color: #68717a; font: .8rem/1.45 Arial, sans-serif; }
.surf-login__form .form-actions { margin: 26px 0 0; }
.surf-login__form input[type='submit'], .surf-login__form button[type='submit'] { width: 100%; min-height: 50px; padding: 12px 22px; border: 0; border-radius: 2px; background: var(--surf-accent, #8b0000); color: #fff; cursor: pointer; font: 700 .9rem/1.2 Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.surf-login__form input[type='submit']:hover, .surf-login__form input[type='submit']:focus, .surf-login__form button[type='submit']:hover, .surf-login__form button[type='submit']:focus { filter: brightness(.88); }
.surf-login__form .messages { margin-bottom: 22px; }

.surf-login__welcome { padding: 25px 40px 28px; border-top: 1px solid #dfe2e5; background: #f5f3ef; text-align: center; }
.surf-login__welcome h2 { margin: 0 0 8px; color: #242a30; font: 700 1.22rem/1.25 Georgia, 'Times New Roman', serif; }
.surf-login__welcome p { margin: 0 auto; max-width: 45ch; color: #606970; font: .9rem/1.6 Arial, sans-serif; }

@media (max-width: 520px) {
  .surf-login { padding: 16px 12px; }
  .surf-login__header { padding: 28px 24px 21px; }
  .surf-login__form { padding: 25px 24px 29px; }
  .surf-login__welcome { padding: 22px 24px 25px; }
  .surf-login__tab { font-size: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .surf-login * { scroll-behavior: auto !important; }
}