/* Register, sign in, and the account pages.
 *
 * Keeps the visual shell of signup.html — a narrow centred column with a
 * bracketed card — now that there is a real form behind it.
 */

.acct { text-align: center; }

.acct h1 {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 26px;
  margin: 20px 0 8px;
}

.acct .sub {
  font-size: 12px;
  color: var(--ink-dim);
  margin: 0 0 24px;
  line-height: 1.6;
}

.acct-card { padding: 26px 22px; text-align: left; }

.acct-card .btn { width: 100%; margin-top: 4px; }

.acct .alt {
  font-size: 11.5px;
  color: var(--ink-dim);
  margin-top: 18px;
}
.acct .alt a { color: var(--line); }

.acct .notice { text-align: left; }

/* --- Signup steps -----------------------------------------------------------
 *
 * Signup is two screens now: the account, then the avatar. Two screens with no
 * indicator is two screens where the second one looks like an interruption, so
 * the count is stated on both.
 * ------------------------------------------------------------------------- */
.steps {
  list-style: none;
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.steps li { display: flex; align-items: center; gap: 6px; }
/* The separator between the steps, so they read as a sequence. */
.steps li + li::before { content: "/"; color: var(--line-dim); margin-right: 4px; }
.steps .n {
  display: inline-grid; place-items: center;
  width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid var(--line-dim);
  font-size: 9px; letter-spacing: 0;
}
.steps li.on { color: var(--ink); }
.steps li.on .n { border-color: var(--line); color: var(--line); }
.steps li.done { color: var(--ok); }
.steps li.done .n { border-color: var(--ok); color: var(--ok); }

/* --- Signing in by code -----------------------------------------------------
 *
 * No password field any more. The hint says so where the field used to be, so
 * nobody goes looking for one; the code step reuses the same card.
 * ------------------------------------------------------------------------- */
.acct-hint {
  font-size: 11.5px;
  color: var(--ink-dim);
  line-height: 1.6;
  margin: 0 0 14px;
}

/* Wide and spaced, because it is copied digit by digit from another window. */
.field input.code-input {
  font-size: 22px;
  letter-spacing: .3em;
  text-align: center;
}

.code-alt {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 11.5px;
  color: var(--ink-dim);
}

.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--line);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.linkish:disabled { color: var(--ink-dim); cursor: default; text-decoration: none; }