/* Sign-in page: the photograph fills the viewport, the card floats over it.
   Colour and type come from theme.css. */

body {
  min-height: 100vh; padding: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans);
}

/* ── Backdrop ──────────────────────────────────────────────
   A real <img> rather than a CSS background so the URL keeps
   going through static_url() and stays cache-busted. */
.login-bg {
  position: fixed; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  filter: brightness(1.14) saturate(1.06);
}

/* Vignette only — it shapes attention toward the card, it is not
   holding up legibility. The card clears AA against a pure-white
   backdrop unaided (--text 10.5:1, --text-dim 6.9:1, button 6.1:1),
   which is the ceiling this scrim can ever let through, so it is
   safe to lighten. Keep the card at >= 0.92 alpha and labels on
   --text-dim and that stays true. */
.login-scrim {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 88% 78% at 50% 44%,
                    rgba(18, 20, 15, 0.14) 0%, rgba(18, 20, 15, 0.56) 100%),
    linear-gradient(to bottom, rgba(18, 20, 15, 0.10), rgba(18, 20, 15, 0.28));
}

/* ── Card ──────────────────────────────────────────────────── */
.login-card {
  position: relative;
  width: 100%; max-width: 380px;
  padding: 42px 38px 36px;
  background: rgba(27, 31, 23, 0.92);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  border: 1px solid var(--accent-line);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

.login-card h1 {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 600; letter-spacing: 0.01em;
  line-height: 1.2; margin-bottom: 7px;
}
/* --text-dim, not --muted: over the brightest backdrop the card can sit on,
   --muted falls to 4.2:1 while this holds 6.9:1. */
.login-card p { font-size: 13px; color: var(--text-dim); margin-bottom: 26px; }

.login-card label {
  display: block; font-size: 11px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px;
}

.login-card input {
  width: 100%; padding: 10px 12px;
  background: rgba(18, 20, 15, 0.72);
  border: 1px solid var(--border-strong); border-radius: 8px;
  color: var(--text); font-family: inherit; font-size: 14px; margin-bottom: 16px;
  outline: none; transition: border-color .15s, background .15s;
}
.login-card input:focus {
  border-color: var(--accent); background: rgba(18, 20, 15, 0.88);
}

.login-card button {
  width: 100%; margin-top: 4px; padding: 11px;
  background: var(--accent); border: none; border-radius: 8px;
  color: var(--on-accent); font-family: inherit; font-weight: 700; font-size: 14px;
  cursor: pointer; transition: background .15s;
}
.login-card button:hover { background: var(--accent-hover); }

/* Error text stays --text: the tint and bar carry the signal, so legibility
   never depends on the red reading well against a translucent surface. */
.login-card .error {
  color: var(--text); font-size: 12.5px; line-height: 1.4; margin-bottom: 16px;
  background: var(--danger-soft); border: 1px solid var(--danger-line);
  border-left: 3px solid var(--danger);
  border-radius: 6px; padding: 9px 11px;
}

@media (max-width: 520px) {
  .login-card { padding: 32px 26px 28px; }
  .login-card h1 { font-size: 22px; }
}