/*
  The sign-in page.

  Its own stylesheet rather than more rules in owner.css, because this page is served by
  both apps and belongs to neither. It also has to look right before a client has been
  chosen, so it carries no per-client colour at all.
*/

.signin-page { background: var(--bg); }

.signin {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 20px;
}

.signin-card {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 30px 28px 24px;
}

.signin-brand {
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--green);
  font-size: 14px;
  margin-bottom: 20px;
}

.signin h1 { font-size: 20px; margin: 0 0 4px; }
.signin .sub { margin: 0 0 20px; }

.signin label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 5px;
}

.signin input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 16px;
}
.signin input:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }

.signin button {
  width: 100%;
  padding: 11px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--green);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.signin button:hover { background: var(--green-d); }

/*
  One error style for every failure, because there is only ever one message. Telling
  someone their password was wrong rather than that the address is unknown is how an
  attacker enumerates accounts.
*/
.signin-error {
  background: #f6e0db;
  color: var(--red);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 13px;
  margin: 0 0 16px;
}

.signin .hint { font-size: 12.5px; color: var(--muted); margin: -10px 0 16px; }
.signin-foot {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}