/* Shieldstone Housing (web) — the sign-in page, on the styles of the app */
.wl .login-panel h2 { margin-bottom: 22px; }
.wl .login-code { margin-top: 0; }
.wl .login-code input[type=email] { font-size: 18px; letter-spacing: normal; text-align: left; font-family: inherit; }
.wl .login-code input[name=code] { font-size: 30px; letter-spacing: .45em; text-align: center; }
.wl .login-err.ok { color: var(--green); }
.wl-sent { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-2); font-weight: 600; font-size: 14px; word-break: break-all; }
.wl-sent svg { width: 18px; height: 18px; flex: none; }
.wl .row.wrap .btn { white-space: nowrap; }
@media (max-width: 560px) {
  .wl .login-art { min-height: 340px; }
  .wl .login-art > svg { width: 600px; }
  .wl .login-veil { background: linear-gradient(180deg, rgba(12,16,38,.55) 0%, rgba(12,16,38,.25) 45%, rgba(12,16,38,0) 70%); }
  .wl .login-brand { top: 22px; }
  .wl .login-brand img { width: 120px; margin-bottom: 6px; }
  .wl .login-brand p { font-size: 14px; }
  .wl .login-brand h1 { display: none; }
  .wl .login-panel { padding: 22px 16px; }
  .wl .login-code { padding: 18px 16px; }
  .wl .login-panel h2 { font-size: 30px; }
  .wl .login-code input[name=code] { font-size: 24px; letter-spacing: .3em; }
}
.wl .login-foot { align-items: flex-start; }
.wl .login-foot span { min-width: 0; flex: 1; white-space: normal; line-height: 1.5; }
.wl .login-foot svg { flex: none; margin-top: 2px; }

/* the choice of the first screen (as in the Mac app), then the role chosen above the form */
.wl .login-choices { margin-top: 8px; }
.wl-role { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-weight: 600; font-size: 14px; }
.wl-role svg { width: 18px; height: 18px; flex: none; color: var(--accent-2); }
.wl-role .btn { margin-left: auto; }