/* All colours, typography and action styling come from the UX page styles. */
body.login-page {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-page main { width: min(100%, 420px); padding: 0; text-align: center; }
.login-page h1 { margin: 0 0 32px; font-size: 2rem; }
.login-page h1 .muted { display: block; font-size: 1rem; margin-top: 8px; }
.login-page .action { display: block; width: 100%; border: 0; }
/* workspace button:hover otherwise puts dark action text on a dark surface. */
.login-page .action:hover,
.login-page .action:active,
.login-page .action:focus-visible {
  background: var(--brand-ink);
  color: #ffe600;
  box-shadow: inset 0 0 0 1px #ffe600;
}
.login-page .action:focus-visible { outline: 2px solid #ffe600; outline-offset: 4px; }
.login-page #cancel-amber { margin-top: 12px; }
#status { margin: 16px 0 0; color: var(--text-secondary); font-size: 14px; overflow-wrap: anywhere; }
#status:empty { display: none; }
@media (min-width: 600px) { .login-page button { white-space: nowrap; } }