/* The practice copy's sign-in page. Colours, fonts and the button come from quiz.css; this adds only the form.
   16px inputs, so an iPhone doesn't zoom in when one is tapped. */
.login { max-width: 420px; padding-top: 48px; }
.login form { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; }
.login label { font-weight: 600; margin-top: 8px; }
.login input {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-height: 46px;
}
.login input:focus { outline: 2px solid var(--accent-line); border-color: var(--accent); }
.login .btn { margin-top: 18px; }
/* Shown only after a wrong try: the Worker sends the browser back to /login#failed. */
.login-failed { display: none; }
.login-failed:target {
  display: block; color: var(--bad); background: var(--bad-bg); border: 1px solid var(--bad-line);
  border-radius: 12px; padding: 10px 14px;
}