/* The sign-in page. Tokens come from app.css; nothing here sets a colour of its own. */

.login { max-width: 400px; margin: 0 auto; padding: 96px var(--lg) var(--xxl); }
.login-h1 { font: 600 34px/1.2 system-ui, -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.374px; margin: 0 0 var(--xs); }
.login-sub { font-size: 17px; line-height: 1.47; color: var(--t3); margin: 0 0 var(--lg); }
.login-sub a { color: var(--accent); }

.login-form { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: var(--lg); display: grid; gap: var(--xs); }
.login-form label { font: 400 14px/1.43 system-ui, -apple-system, sans-serif; letter-spacing: -0.224px; color: var(--t3); margin-top: var(--xs); }
.login-form label:first-of-type { margin-top: 0; }
.login-form input[type="text"], .login-form input[type="password"] {
  width: 100%; font: 400 17px/1.47 system-ui, -apple-system, sans-serif; letter-spacing: -0.374px; color: var(--t1);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: var(--sm) var(--sm); min-height: 44px;
}
.login-form input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.login-go {
  margin-top: var(--md); min-height: 44px; border: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent);
  font: 600 17px/1.47 system-ui, -apple-system, sans-serif; letter-spacing: -0.374px; cursor: pointer;
  transition: transform var(--dur-fast) ease;
}
.login-go:active { transform: scale(0.97); }
.login-go:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.login-problem {
  background: var(--panel); border: 2px solid var(--warn); border-radius: 18px; padding: var(--md) var(--lg);
  margin: 0 0 var(--md); font-size: 14px; line-height: 1.43; letter-spacing: -0.224px;
}

/* A plain line of feedback on the change-password page: no alarm colour either way. */
.login-note {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: var(--md) var(--lg);
  margin: 0 0 var(--md); font-size: 14px; line-height: 1.43; letter-spacing: -0.224px;
}
.login-back { margin: var(--md) 0 0; }

.login-sub a { display: inline-flex; align-items: center; min-height: 44px; }

/* The phone: the form starts nearer the top, so the keyboard does not push the button away. */
@media (max-width: 734px) {
  .login { padding: 48px var(--md) var(--xl); }
  .login-h1 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) { .login-go { transition: none; } }