/* Login surface styles. */
/* ============================================================
 * login — session credential surface.
 * ============================================================ */

.login-surface {
  min-height: calc(100vh - 260px);
  display: grid;
  place-items: center;
}

.login-panel {
  width: min(100%, 760px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-8);
  padding: var(--space-8);
  border: 1px solid rgba(8, 26, 46, 0.12);
  border-radius: var(--radii-md);
  background: rgba(255, 255, 255, 0.64);
  box-shadow: 0 18px 45px rgba(8, 26, 46, 0.08);
}

.login-kicker {
  margin: 0 0 var(--space-2);
  font: 700 11px/1 var(--type-eyebrow-family);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-orange);
}

.login-panel h1 {
  margin: 0 0 var(--space-4);
  font: 600 34px/1.08 Georgia, serif;
  color: var(--navy-deep);
}

.login-copy {
  margin: 0;
  max-width: 44ch;
  color: var(--slate);
}

.login-form {
  display: grid;
  gap: var(--space-4);
}

.login-form label {
  display: grid;
  gap: var(--space-2);
  color: var(--navy);
  font-weight: 650;
}

.login-form input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(8, 26, 46, 0.18);
  border-radius: var(--radii-sm);
  padding: 0 var(--space-4);
  background: #fff;
  color: var(--navy-deep);
  font: 500 14px/1 var(--type-body-family);
}

.login-submit {
  min-height: 44px;
  border: 0;
  border-radius: var(--radii-sm);
  background: var(--orange);
  color: #fff;
  font: 700 13px/1 var(--type-small-family);
  cursor: pointer;
}

.login-submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

.login-error {
  margin: 0;
  color: var(--red);
  font-weight: 650;
}

@media (max-width: 720px) {
  .login-panel {
    grid-template-columns: 1fr;
    padding: var(--space-6);
  }
}