/* Login page shell. Colours and buttons come from shared.css. */

.login-clock {
  position: fixed;
  top: 20px;
  left: 20px;
  margin: 0;
}

main.login-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 32px 20px 64px;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.login-card {
  width: min(430px, 100%);
  padding: 24px;
  border: 1px solid var(--tm-lines-border-strong);
  border-radius: 4px;
  background: var(--tm-canvas-surface);
  box-shadow: var(--tm-shadow-lg), var(--tm-shadow-sm);
}

.login-card h1 { margin: 0 0 22px; font-size: 2rem; }

.login-form { display: grid; gap: 14px; }
.login-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.login-message {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}
.login-message.error { color: var(--danger-soft); }

.login-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.password-weak { color: var(--warn); }
.password-fair { color: var(--muted); }
.password-strong { color: var(--green); }

.login-version {
  position: fixed;
  right: 20px;
  bottom: 18px;
  left: 20px;
  margin: 0;
  color: var(--muted);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-align: center;
}