/*
  THE SIGN-IN PAGE.

  Its own file rather than a sheet in `packages/design/components.css` because the DESKTOP app never loads it: the
  component library is shared by both front ends, and a login card that only one of them can draw belongs to that
  one. It uses the token layer and nothing else — no literal colour, no literal size — so the page cannot drift
  away from the app it leads into.
*/

.login-body {
  /*
    THE PAGE IS CENTRED, AND EVERYTHING ELSE COMES FROM `body.ev` (components.css): the background, the text
    colour, the font. Restating them here would be a second definition of the palette, and the first thing to
    drift when a token changes.
  */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ev-s5);
}

.login {
  width: 100%;
  max-width: 420px;
}

.login__card {
  display: flex;
  flex-direction: column;
  gap: var(--ev-s3);
  padding: var(--ev-s6);
}

.login__brand {
  display: flex;
  align-items: center;
  gap: var(--ev-s3);
  margin-bottom: var(--ev-s2);
}

.login__brand .brand__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--ev-r-md);
  background: var(--ev-volt-a12);
  border: 1px solid var(--ev-volt-a24);
  color: var(--ev-volt);
}

.login__brand .brand__mark svg {
  width: 20px;
  height: 20px;
}

.login__brand .brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.login__brand .brand__name {
  font-weight: 700;
  letter-spacing: var(--ev-tracking-tight);
}

.login__brand .brand__tag {
  font-size: var(--ev-text-sm);
  color: var(--ev-mist);
}

.login__form {
  display: flex;
  flex-direction: column;
  gap: var(--ev-s4);
  margin-top: var(--ev-s2);
}

.login__submit {
  width: 100%;
}

.login__toggle {
  width: 100%;
}

/*
  THE ERROR LINE IS RESERVED, NOT INSERTED.

  A message that appears on failure pushes the submit button down under the pointer — the field the streamer is
  about to click again. Holding the space means the layout does not move when a login is refused.
*/
.login__error {
  margin: 0;
  min-height: var(--ev-s5);
  font-size: var(--ev-text-sm);
  color: var(--ev-plasma);
}

.login__note {
  margin: var(--ev-s2) 0 0;
  font-size: var(--ev-text-sm);
  line-height: 1.5;
}

/* The language buttons: two plain ghost buttons under the note, left-aligned like the text above them. */
.login__lang {
  display: flex;
  gap: var(--ev-s2);
  margin-top: var(--ev-s3);
}