/* Sign-in page. */

/* ------------------------------------------------------------------ login */
/* Everything here used to be a literal (#111114, #fff, #dde1ea, #6b7080), so
   the page could only ever be light. The tokens resolve to exactly those
   values in the light theme, and the page follows the dark one the day
   login.php stops pinning data-theme="light". */
.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 540px;
  background: var(--ink);
  color: var(--ink-text);
}

.login .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 24px;
  font-weight: 600;
  font-size: 14px;
}

.login .brand .logo {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--ink-text);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
}

.login .side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.login .tagline {
  padding: 24px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  max-width: 420px;
}

.login .card {
  border: 0;
  margin: 16px 16px 16px 0;
  border-radius: 26px;
  background: var(--card);
  color: var(--text);
  padding: 56px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}

.login .eyebrow {
  margin-bottom: 22px;
}

.login label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.login input {
  height: 53px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 0 16px;
  color: var(--text);
}

.login .field {
  margin-bottom: 16px;
}

.login .btn.primary {
  width: 100%;
  height: 44px;
  margin-top: 6px;
}

.login .flash {
  margin-bottom: 14px;
}

.login .pw {
  position: relative;
}

.login .pw button {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
}

@media (max-width:900px) {
  /* One column; the rows take only their own height instead of being
     stretched to fill the screen, so the card does not grow vertically. */
  .login {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: start;
  }
  .login .card {
    margin: 12px;
    padding: 32px 24px;
    align-self: start;
  }
  .login .tagline {
    display: none;
  }
}