/*
 * Signing in, and the end of the site bar that says you are.
 *
 * Its own file because Propshaft's `stylesheet_link_tag :app` includes every
 * stylesheet in this directory; application.css holds what every page shares,
 * the site bar itself included. What is here is the session's end of that bar
 * and the sign-in page.
 */

/* Pushed to the far end of the site bar. The bar's own padding, border and
   background are the strip; this is only the controls at its right. */
.session-bar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-left: auto;
}

.session-bar__who {
  color: var(--ink-muted);
}

/* A link and a button_to's button have to read as the same control, so both
   are styled here rather than either inheriting the default. */
.session-bar__action,
.session-bar form.button_to button {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--sand);
  font: inherit;
  padding: 0.25rem 0.85rem;
  text-decoration: none;
  cursor: pointer;
}

.session-bar__action:hover,
.session-bar form.button_to button:hover {
  border-color: var(--sand);
}

.session-bar form.button_to {
  margin: 0;
}

/* The sign-in page itself. One narrow column: it is a two-field form, and the
   page measure the rest of the site uses would leave the fields stranded. */
.sign-in {
  max-width: 34rem;
}

.sign-in__header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
}

.sign-in__eyebrow {
  color: var(--ink-muted);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
}

.sign-in__alert {
  border: 1px solid var(--rust);
  border-left-width: 4px;
  border-radius: 4px;
  background: var(--surface-raised);
  padding: 0.75rem 1rem;
  margin: 0 0 1.5rem;
}

.sign-in__field {
  margin-bottom: 1.25rem;
}

.sign-in__field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.sign-in__field input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-raised);
  color: var(--ink);
  font: inherit;
}

.sign-in__field input:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 1px;
}

.sign-in__submit {
  appearance: none;
  border: 1px solid var(--rust);
  border-radius: 4px;
  background: var(--rust);
  color: #fff;
  font: inherit;
  font-weight: 600;
  padding: 0.6rem 1.5rem;
  cursor: pointer;
}

.sign-in__submit:hover {
  background: #d05f31;
}

/* The tester's way in, set apart from the password form above it: a different
   kind of account, and the heading says whose. */
.sign-in__discord {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.sign-in__discord-heading {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.sign-in__discord-form {
  margin: 0;
}

/* R10 stated on the page. Bordered rather than set in small grey type: that
   there is no way to register is information, not fine print. */
.sign-in__note {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: 0.95rem;
}