/* Login screen — the one auth-free human URL — and the パスワードの設定 screen
 * beside it. Both sit in the accounts app's own static/ because their templates
 * do too, the same pairing careers/ and exams/ already use.
 *
 * **The card itself is not here any more.** `.c-solo` / `.c-solo__card` in
 * static/css/components.css draw the centred surface, because the error page
 * became its third caller. What is left below is what is genuinely these two
 * screens': how wide the card is, how their form stacks, and the whole-form
 * error banner no other screen renders.
 */

/* Roughly the width of the two inputs it holds — a login box stretched to the
 * content column would read as an empty screen with a form stuck to the top. */
.login {
  max-width: calc(var(--space-xxxxl) * 8);
}

/* The heading and its note are one block: the h1 ramp already sets the size, so
 * only the gap between the two lines belongs here. */
.login__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.login__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

/* .c-field ships a 2px label-to-widget gap, tuned for the dense screens — a
 * modal of a dozen fields, a filter bar beside a table. This card holds two
 * fields on an otherwise empty page, and at that size the label read as stuck
 * to the box under it. Scoped to the form so the shared value is untouched. */
.login__form .c-field {
  gap: var(--space-s);
}

/* The card holds exactly one action, so its button spans the card. Elsewhere a
 * button is sized by its label; here a half-width control under two full-width
 * inputs is the thing that looked unfinished. */
.login__form .c-button {
  width: 100%;
}

/* Whole-form failures (wrong password, throttled) — a danger banner rather than
 * the bare red list .c-field__errors gives a single field, because this one is
 * about the attempt and not about the box above it. */
.login__errors {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-m);
  border: var(--border-width-thin) solid var(--danger-border);
  border-radius: var(--radius);
  background-color: var(--danger-bg);
  color: var(--danger);
  font-size: var(--font-size-caption1);
  line-height: var(--line-height-caption1);
}

/* The signed-in branch: the same card, and the sentence naming the account is
 * the one thing on it. */
.login__signed-in-user {
  overflow-wrap: anywhere;
}