/* The sign-in page.
 *
 * Deliberately the plainest screen in the product: a name, one sentence, one
 * button. Nothing on it belongs to anybody, because it is served to whoever
 * types the address.
 *
 * Every colour and corner comes from a token. A class with no rule behind it
 * draws as a bare browser default and no check can see it -- that has already
 * cost this product one undo button (see screen.css).
 */

.k-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  box-sizing: border-box;
  background: var(--bg);
}

.k-signin__card {
  width: 100%;
  max-width: 380px;
  padding: 32px 24px;
  box-sizing: border-box;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.k-signin__brand {
  margin: 0 0 12px;
  font-family: var(--font);
  font-size: 28px;
  font-weight: 700;
  color: var(--brand);
}

.k-signin__line {
  margin: 0 0 24px;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
}

.k-signin__go {
  width: 100%;
}

.k-signin__problem {
  margin: 16px 0 0;
  padding: 12px;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}

/* The way off the open-your-business page. Deliberately quiet -- it is the
 * escape, not the thing to press. It must never be disabled while the main
 * button is: a seller whose own project is unfinished has nothing else left.
 *
 * **QUIET IS ABOUT HOW IT LOOKS, NEVER ABOUT HOW BIG IT IS (cycle 46, R5#9).**
 * At 10px of padding round 14px text this stood about 37px tall, under the 44px
 * every other thing to press in this product uses (D67). And of everything on
 * this screen it is the one that must not be hard to hit: it is the only way
 * out for a seller whose own project is not finished, on a phone, already
 * stuck. */
.k-signin__out {
  width: 100%;
  margin: 12px 0 0;
  text-decoration: underline;
}