/* login.css — the sign-in page, on the design system of the new dashboard (tokens.css, base.css and
   components.css are loaded first). Only the layout of this one page lives here: no colours, which all
   come from the tokens, so dark and light themes just work. */
.vn-login {
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-4);
}
.vn-login__card {
  inline-size: 100%;
  max-inline-size: 26rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.vn-login__brand { display: flex; align-items: center; gap: var(--space-3); }
.vn-login__mark {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--accent-solid);
  color: var(--on-accent);
}
.vn-login__name { font-weight: var(--fw-semibold); letter-spacing: 0.06em; }
.vn-login__title { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.vn-login__sub { color: var(--text-2); font-size: var(--fs-sm); }
.vn-login__form { display: flex; flex-direction: column; gap: var(--space-4); }
.vn-login__submit { inline-size: 100%; justify-content: center; }
.vn-login__divider { display: flex; align-items: center; gap: var(--space-3); color: var(--text-2); font-size: var(--fs-sm); }
.vn-login__divider::before, .vn-login__divider::after { content: ""; flex: 1; border-block-start: 1px solid var(--border); }
.vn-login__oauth { inline-size: 100%; justify-content: center; gap: var(--space-2); }
.vn-login__note { color: var(--text-2); font-size: var(--fs-xs); }
.vn-login__tagline { color: var(--text-2); font-size: var(--fs-sm); letter-spacing: 0.04em; }
@media (max-width: 480px) {
  .vn-login__card { padding: var(--space-5); }
}

/* Continue with Twitch: only there when the server says accounts are switched on (login.js shows it). */
.vn-login__twitch { display: flex; flex-direction: column; gap: var(--space-4); }
.vn-login__subtitle { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.vn-login__error { color: var(--err-text); background: var(--err-subtle); border: 1px solid var(--err); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--fs-sm); }