/* allauth's forms, in the archive's palette [issue #6].

   allauth renders plain markup — <p><label><input></p>, form.as_p, a bare
   <button> — and the same form is shown two ways: on its own page, inside the
   archive chrome (templates/allauth/layouts/base.html), and lifted into the
   login modal (LoginModal.svelte). Both wrap it in .account-form, so this one
   file styles it for both. Plain CSS, leaning on archive.css's --arc-*
   palette, because the modal also opens on the wiki, which runs Bootstrap 4. */

.account-panel {
  max-width: 28rem;
}

.account-form {
  color: var(--arc-body);
  font-family: var(--arc-prose);
  font-size: 1rem;
}

.account-form h1 {
  margin: 0 0 1rem;
  color: var(--arc-title);
  font-family: var(--arc-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.account-form h2 {
  margin: 1.5rem 0 0.75rem;
  color: var(--arc-heading);
  font-family: var(--arc-display);
  font-size: 1.1rem;
}

.account-form p {
  margin: 0 0 1rem;
}

/* :link/:visited for the weight to beat archive.css's link colours, which
   load after this file on the archive's own pages. */
.account-form a:link,
.account-form a:visited {
  color: var(--arc-gold);
  text-decoration: underline;
}

.account-form a:hover {
  color: var(--arc-title-lit);
}

.account-form label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--arc-heading);
  font-family: var(--arc-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* A checkbox keeps its label beside it. */
.account-form input[type="checkbox"] + label,
.account-form label:has(input[type="checkbox"]) {
  display: inline;
  margin-left: 0.4rem;
}

.account-form input:not([type="checkbox"], [type="radio"], [type="hidden"]),
.account-form textarea,
.account-form select {
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 0.75rem;
  color: var(--arc-title);
  font-family: var(--arc-prose);
  font-size: 1rem;
  background: var(--arc-panel);
  border: 1px solid var(--arc-line);
  border-radius: 0;
  outline: none;
}

.account-form input::placeholder {
  color: var(--arc-muted);
}

.account-form input:focus,
.account-form textarea:focus,
.account-form select:focus {
  border-color: #c9a84c88;
}

.account-form input[type="checkbox"] {
  accent-color: var(--arc-gold);
}

/* Help text beside a field ("Forgot your password?" is one). */
.account-form .helptext,
.account-form p > span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.875rem;
}

.account-form button,
.account-form .button {
  padding: 0.55rem 1.4rem;
  color: var(--arc-bg);
  font-family: var(--arc-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  background: var(--arc-gold);
  border: 1px solid var(--arc-gold);
  border-radius: 0;
  transition: background 0.2s ease;
}

.account-form button:hover,
.account-form button:focus {
  background: var(--arc-title);
}

.account-form button:disabled {
  cursor: progress;
  opacity: 0.6;
}

.account-form ul.errorlist {
  padding: 0.5rem 0.75rem;
  margin: 0 0 0.75rem;
  color: #e8b0a0;
  font-size: 0.9375rem;
  list-style: none;
  background: rgb(176 48 48 / 15%);
  border-left: 3px solid var(--arc-red);
}

.account-form hr {
  margin: 1.5rem 0;
  border: 0;
  border-top: 1px solid var(--arc-line);
}