/* CUBE: block — the centred sign-in card. */

.login {
  min-block-size: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-l);
  background: var(--color-bg);
}
.login__card {
  inline-size: 22.5rem;
  max-inline-size: 100%;
  padding: var(--space-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-md);
}
.login__brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-block-end: var(--space-l);
}
.login__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--brand-mark-lg);
  block-size: var(--brand-mark-lg);
  border-radius: var(--radius-m);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--fs-lg);
  font-weight: 700;
}
.login__title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; }
.login__sub { font-size: var(--fs-xs); color: var(--color-muted); }
.login__form { display: flex; flex-direction: column; gap: var(--space-m); }
.login__field { display: flex; flex-direction: column; gap: var(--space-2xs); font-size: var(--fs-xs); font-weight: 500; color: var(--color-fg); }
.login__field > input { block-size: var(--control-h-lg); }
.login__submit { block-size: var(--control-h-lg); min-block-size: var(--control-h-lg); font-size: var(--fs-lg); }
.login__hint { font-size: var(--fs-xs); color: var(--color-muted); text-align: center; }