/* The staging sign-in page (docker/nginx/staging-gate/). It loads before
   the app and without it, so it carries its own few rules: the card the
   site's sign-in screens use (web's _auth.scss .login__form,
   _buttons.scss .btn-primary), dark like the site. A production admin's
   passkey signs in, so the card has no fields: the button opens the
   browser's passkey prompt (#1319 "Staging gate: sign in with a
   production admin passkey").

   A plain file nginx serves, so it cannot import web's _tokens.scss. It
   declares the tokens it uses under the site's names instead, and web's
   stagingGateLock test fails when one stops matching the site's value.

   The face is the system one: the site's Poppins ships inside web's
   bundle only, and admin's image serves this page too. */
:root {
  --semantic-dark-primary: #000000;
  --semantic-dark-panel: #1e1e1e;
  --semantic-dark-secondary: #111111;
  --semantic-border-subtle: rgba(255, 255, 255, 0.1);
  --semantic-text-primary: rgba(255, 255, 255, 0.95);
  --semantic-brand-primary: #6fb4ba;
  --semantic-status-red: #cc0000;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  background: var(--semantic-dark-primary);
  color: var(--semantic-text-primary);
}

main {
  width: min(480px, 100%);
}

/* The admin patch beside the wordmark, the way the brand's lockups sit
   them: the gate takes an admin account, and the patch is what tells it
   apart from the site's own login screen. The wordmark gives way first
   on a narrow screen. */
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.2em;
}

.patch {
  flex: none;
  width: auto;
  height: 64px;
}

.wordmark {
  flex: 0 1 288px;
  min-width: 0;
  height: auto;
}

form {
  padding: 3em 2em;
  border: 1px solid var(--semantic-border-subtle);
  border-radius: 30px;
  background: var(--semantic-dark-panel);
}

@media (max-width: 767px) {
  form {
    padding: 2em 1.5em;
  }
}

h1 {
  margin: 0 0 0.2em;
  font-size: 2.375em;
  font-weight: 700;
  line-height: 1.2;
}

p {
  margin: 0 0 1rem;
}

#staging-gate-error {
  color: var(--semantic-status-red);
  font-size: 0.875em;
}

button {
  display: block;
  width: 100%;
  height: 64px;
  margin-top: 2.3em;
  border: 0;
  border-radius: 8px;
  background: var(--semantic-brand-primary);
  color: var(--semantic-dark-secondary);
  font: inherit;
  font-size: 0.875em;
  font-weight: 500;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}