/*
 * Login composition.
 *
 * Authentication behavior stays in login.html. This stylesheet only brings the
 * first screen into the same calm navy, white and soft-grey system as the app.
 */

:root {
  color-scheme: light;
  --login-bg: #f3f5f9;
  --login-surface: #ffffff;
  --login-surface-soft: #f8f9fc;
  --login-line: #dfe3ec;
  --login-line-strong: #cbd2df;
  --login-ink: #171c3f;
  --login-muted: #667085;
  --login-accent: #202759;
  --login-accent-hover: #171d46;
  --login-focus: #2f6fd0;
  --login-danger: #c9232c;
  --login-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

body {
  color: var(--login-ink);
  background:
    radial-gradient(circle at 50% 8%, rgba(32, 39, 89, 0.055), transparent 31rem),
    var(--login-bg);
  overflow: auto;
}

.center {
  position: relative;
  min-height: 100%;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
}

.stack {
  max-width: 430px;
  gap: 18px;
}

.card {
  padding: 38px 38px 34px;
  border: 1px solid var(--login-line);
  border-radius: 18px;
  color: var(--login-ink);
  background: var(--login-surface);
  box-shadow: 0 2px 4px rgba(23, 28, 63, 0.04), 0 24px 60px -34px rgba(23, 28, 63, 0.38);
  animation: login-card-in 220ms var(--login-ease) both;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.card::before,
.card::after {
  display: none;
}

@keyframes login-card-in {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Avoid a 700ms cascade before the form becomes usable. */
.card > * {
  opacity: 1;
  animation: none;
}

.logos {
  gap: 18px;
  margin-bottom: 28px;
}

.logos img {
  width: auto;
  height: 40px;
  max-width: 43%;
  filter: none;
  transition: transform 140ms var(--login-ease);
}

.logos:hover img {
  transform: none;
}

.logo-divider {
  height: 30px;
  background: var(--login-line);
}

.eyebrow {
  margin-bottom: 8px;
  color: var(--login-danger);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

h1 {
  margin-bottom: 7px;
  color: var(--login-ink);
  font-size: clamp(29px, 5vw, 34px);
  font-weight: 700;
}

.subtitle {
  margin-bottom: 28px;
  color: var(--login-muted);
}

.field {
  margin-bottom: 14px;
}

.field input {
  height: 56px;
  color: var(--login-ink);
  caret-color: var(--login-focus);
  background: var(--login-surface-soft);
  border-color: var(--login-line-strong);
  border-radius: 11px;
  box-shadow: none;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.field input:hover {
  border-color: #aeb7c8;
}

.field input:focus-visible {
  color: var(--login-ink);
  background: var(--login-surface);
  border-color: var(--login-focus);
  outline: 3px solid rgba(47, 111, 208, 0.14);
  outline-offset: 1px;
  box-shadow: none;
}

.field input:not(:placeholder-shown) {
  background: var(--login-surface);
}

.field label {
  color: #737d92;
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label {
  color: var(--login-muted);
}

.field input:focus + label {
  color: var(--login-focus);
}

.field .icon,
.field .toggle-pw {
  color: #7d879b;
}

.field input:focus ~ .icon {
  color: var(--login-focus);
  transform: translateY(-50%);
}

.field .toggle-pw:hover {
  color: var(--login-accent);
  background: #edf1f7;
}

.field .toggle-pw:focus-visible {
  outline: 3px solid rgba(47, 111, 208, 0.18);
  outline-offset: 1px;
}

.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 100px var(--login-surface) inset !important;
  -webkit-text-fill-color: var(--login-ink) !important;
  caret-color: var(--login-focus) !important;
}

button.primary {
  height: 50px;
  margin-top: 6px;
  border: 1px solid var(--login-accent);
  border-radius: 11px;
  color: #fff;
  background: var(--login-accent);
  box-shadow: none;
  transition: background-color 140ms ease, border-color 140ms ease, transform 100ms var(--login-ease);
}

button.primary::before {
  display: none;
}

button.primary:hover {
  transform: none;
  background: var(--login-accent);
  box-shadow: none;
}

button.primary:active {
  transform: none;
  filter: none;
}

button.primary:focus-visible {
  outline: 3px solid rgba(47, 111, 208, 0.2);
  outline-offset: 2px;
}

button.primary:disabled {
  color: #98a2b3;
  background: #eef1f5;
  border-color: var(--login-line);
  opacity: 1;
  box-shadow: none;
}

.error {
  color: #9e1f27;
  background: #fff5f5;
  border-color: #efb8bc;
}

.error.visible {
  animation: none;
}

.foot {
  color: #717b90;
  font-weight: 600;
  animation: none;
}

@media (hover: hover) and (pointer: fine) {
  .logos:hover img {
    transform: translateY(-1px);
  }

  button.primary:hover {
    border-color: var(--login-accent-hover);
    background: var(--login-accent-hover);
  }

  button.primary:active {
    transform: scale(0.98);
  }
}

@media (max-width: 500px) {
  .center {
    padding-inline: 14px;
  }

  .card {
    padding: 30px 22px 26px;
  }

  .logos img {
    height: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}