/* Sign-in page. Shared tokens and controls are in app.css. */

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 16px;
}

.card {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 28px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.06);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.brand .brand-mark { width: 28px; height: 28px; }

.brand #language { margin-left: auto; }

h1 { font-size: 1.4rem; letter-spacing: 0.02em; }
h2 { margin: 0 0 20px; font-size: 1.1rem; font-weight: 600; }

.field { margin-bottom: 16px; }

label { display: block; margin-bottom: 6px; }

.password-row { display: flex; gap: 8px; }

button.primary {
  position: relative;
  width: 100%;
  margin-top: 8px;
  padding: 11px 16px;
}

button[aria-busy="true"] { cursor: progress; }

.spinner {
  display: none;
  position: absolute;
  top: 50%;
  right: 16px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

button[aria-busy="true"] .spinner { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
}

.message { margin: 4px 0 8px; }

.note { margin: 20px 0 0; text-align: center; color: var(--muted); font-size: 0.85rem; }

.noscript {
  position: fixed;
  inset: auto 16px 16px;
  padding: 12px;
  text-align: center;
  color: var(--error-text);
  background: var(--error-bg);
  border-radius: var(--radius);
}