/* Sign-in and account setup: the layout the other portals use (approved by James): the brand inside the card,
 * no title, an "Or" divider, outlined secondary actions, and errors in a banner across the top with a filled
 * close circle. Tokens only; controls come from components.css. */
.login-root { height: 100%; }
.login-body { display: flex; flex-direction: column; min-height: 100dvh; }

.login-shell {
  width: 100%;
  max-width: var(--login-max);
  margin: auto;
  padding: calc(var(--s-10) + var(--safe-top)) calc(var(--s-4) + var(--safe-right)) calc(var(--s-10) + var(--safe-bottom)) calc(var(--s-4) + var(--safe-left));
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.login-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); min-height: var(--s-12); margin-bottom: var(--s-6); }
.login-mark { width: var(--s-12); height: var(--s-12); border-radius: var(--r-lg); background: var(--text); color: var(--surface); display: grid; place-items: center; font-weight: var(--fw-bold); font-size: var(--fs-17); }
.login-brand-name { font-size: var(--fs-17); line-height: var(--lh-17); font-weight: var(--fw-bold); text-align: center; }

.login-card .card-body { padding: var(--s-6); }
.login-screen, .login-form { display: flex; flex-direction: column; gap: var(--s-4); }
.login-screen[hidden] { display: none; }
.login-form .input { min-height: var(--navbar-h); font-size: var(--fs-17); line-height: var(--lh-17); }
.login-screen .btn { min-height: var(--navbar-h); }
.login-screen .btn-plain { height: auto; padding: var(--s-2); }
.input-code { letter-spacing: var(--s-1); text-align: center; }
.login-divider { display: flex; align-items: center; gap: var(--s-3); text-align: center; font-size: var(--fs-12); line-height: var(--lh-12); }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-divider[hidden] { display: none; }
.login-note { text-align: center; font-size: var(--fs-12); line-height: var(--lh-12); }
.login-lead { color: var(--text-2); text-align: center; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-regular); }
.login-review { align-self: center; }

.login-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: calc(var(--s-3) + var(--safe-top)) calc(var(--s-3) + var(--safe-right)) var(--s-3) calc(var(--s-4) + var(--safe-left));
  border-radius: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-14);
}
.login-banner[hidden] { display: none; }
.login-banner-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.login-banner-close { flex: none; width: calc(var(--s-6) + var(--s-1)); height: calc(var(--s-6) + var(--s-1)); min-height: 0; padding: 0; border-radius: var(--r-full); color: inherit; }
.login-banner-close svg { width: var(--icon); height: var(--icon); }
.login-secondary.btn { background: none; color: var(--accent); border: 1px solid var(--field-line); }
.login-secondary.btn:hover { background: var(--accent-soft); }
.login-secondary[hidden] { display: none; }

@media (max-width: 743px) {
  .login-banner-close { width: var(--control-h); height: var(--control-h); }
  .login-note { font-size: var(--fs-14); line-height: var(--lh-14); }
}