/* The anonymous screen. Loads no JavaScript, works with none too. The solid wine
 * ground and the outlined rings are the login's identity; the card holds the
 * colour logo and the system name (core/brand.css). */
.login-screen{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--primary-color);
  position:relative;
  overflow:hidden;
  padding:var(--sp-5);
}
.login-rings{
  position:absolute;
  right:calc(var(--login-rings-size) * -.25);
  bottom:calc(var(--login-rings-size) * -.29);
  width:var(--login-rings-size);
  height:var(--login-rings-size);
  pointer-events:none;
}
.login-rings svg{width:100%;height:100%;}
.login-rings circle{fill:none;stroke:var(--on-brand-fill-2);stroke-width:1.5;}
.login-card{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--dialog-max);
  background:var(--bg-card);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:var(--sp-6);
  text-align:center;
  animation:cardIn .5s var(--ease);
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(var(--sp-3)) scale(.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.login-lead{
  font-size:var(--fs-base);
  color:var(--text-secondary);
  margin-bottom:var(--sp-5);
}
@media (prefers-reduced-motion: reduce){
  .login-card{animation:none;}
}

@media (max-width:560px){
  .login-card{padding:var(--sp-6) var(--sp-5) var(--sp-5);}
}