/* Hall of Fame login / password gate styles. Fully static, served as a hashed
 * /static/login.css and linked with <link rel="stylesheet"> (Handbook principle
 * #5). No inline <style>.
 *
 * Per-tenant brand values come from CSS custom properties the page sets on
 * :root at render time (see WS-B-NOTES.md for the required variables). Sensible
 * fallbacks are provided via var(--x, fallback).
 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family, system-ui, -apple-system, "Segoe UI", sans-serif);
  background: var(--bg);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login {
  text-align: center;
  max-width: 380px;
  padding: 40px;
}
.login h1 {
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.login p {
  color: var(--muted);
  margin-bottom: 32px;
  font-size: 0.9rem;
}

/* Password field + show/hide toggle (ACL-4). The field and its eye toggle sit
 * in a relatively positioned wrapper so the button can overlay the input. */
.pw-field {
  position: relative;
  margin-bottom: 16px;
}
.login input {
  width: 100%;
  padding: 14px 48px 14px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  color: var(--text);
  font-size: 1rem;
  outline: none;
  font-family: inherit;
}
.login input:focus {
  border-color: var(--blue);
}
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
}
.pw-toggle:hover,
.pw-toggle:focus-visible {
  color: var(--blue);
  outline: none;
}
.login button[type="submit"] {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.login button[type="submit"]:hover {
  background: var(--accent-hover, var(--blue));
}
.error {
  color: #dc2626;
  font-size: 0.85rem;
  margin-bottom: 16px;
}
.emoji {
  font-size: 2.5rem;
  margin-bottom: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .login input,
  .pw-toggle,
  .login button[type="submit"] {
    transition: none !important;
  }
}

/* Login brand mark wrapper: centers the logo or emoji above the title. */
.login-mark {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.login-mark .brand-logo {
  height: 44px;
  width: auto;
  max-width: 240px;
}
.login-mark .brand-emoji {
  font-size: 2.5rem;
}