/*
 * Worker sign-in (and forced password change) in the worker desk app look — the same screen as the
 * exchange worker-desk login: graphite #1c1c1e, centred 400px column, #2c2c2e fields (52px, radius 16),
 * white pill button, plain red error line. Loaded only when staffLoginDocument({ app: true }).
 */
html:has(body.staff-login-page--app) { background: #1c1c1e; }
body.staff-login-page--app {
  --a-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  background: #1c1c1e !important;
  background-image: none !important;
  color: #fff;
  font-family: var(--a-font);
  -webkit-font-smoothing: antialiased;
}
body.staff-login-page--app::before, body.staff-login-page--app::after { content: none !important; display: none !important; }
body.staff-login-page--app .staff-login-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 16px;
  box-sizing: border-box;
  background: none !important;
}
body.staff-login-page--app .staff-login-shell::before, body.staff-login-page--app .staff-login-shell::after,
body.staff-login-page--app .staff-login-shell__panel::before, body.staff-login-page--app .staff-login-shell__panel::after { content: none !important; display: none !important; }
body.staff-login-page--app .staff-login-shell__panel {
  width: 100%;
  max-width: 400px;
  margin: 0;
  padding: 40px 0 64px;
  border: 0 !important;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.staff-login-page--app form.staff-login { display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }

/* brand: PolyBet + coin strip, centred */
body.staff-login-page--app .staff-login__brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 0 6px; text-align: center; }
body.staff-login-page--app .staff-login__brand-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
body.staff-login-page--app .staff-login__brand strong { font: 700 26px/1.1 var(--a-font); letter-spacing: -0.02em; color: #fff; }
body.staff-login-page--app .staff-login__brand > span:last-child { font: 600 11px/1.2 var(--a-font); letter-spacing: 0.12em; text-transform: uppercase; color: #8e8e93; }
body.staff-login-page--app .staff-login__coins { display: inline-flex; }
body.staff-login-page--app .staff-login__coin { width: 24px; height: 24px; margin-left: -6px; border-radius: 50%; box-shadow: 0 0 0 2px #1c1c1e; }
body.staff-login-page--app .staff-login__coin:first-child { margin-left: 0; }

/* title + subtitle */
body.staff-login-page--app form.staff-login h1 { margin: 10px 0 0; font: 700 28px/1.2 var(--a-font); letter-spacing: -0.02em; text-align: center; color: #fff; }
body.staff-login-page--app .staff-lede { margin: -14px 0 10px; font: 400 17px/1.35 var(--a-font); text-align: center; color: #8e8e93; }

/* error: plain red text */
body.staff-login-page--app .staff-error { margin: 0; padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none; font: 500 15px/1.4 var(--a-font); text-align: center; color: #ff453a; }

/* fields */
body.staff-login-page--app .staff-login__field { display: flex; flex-direction: column; gap: 8px; margin: 0; font: 500 15px/1.3 var(--a-font); letter-spacing: -0.01em; text-transform: none; color: #8e8e93; }
body.staff-login-page--app .staff-login__field input,
body.staff-login-page--app form.staff-login input:not([type="hidden"]):not([type="checkbox"]) {
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 18px;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: 16px;
  background: #2c2c2e !important;
  box-shadow: none !important;
  color: #fff;
  font: 400 17px var(--a-font) !important;
  outline: none;
}
body.staff-login-page--app form.staff-login input:focus { box-shadow: inset 0 0 0 1.5px #8e8e93 !important; }
body.staff-login-page--app form.staff-login input:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: inset 0 0 0 100px #2c2c2e !important; caret-color: #fff; }
body.staff-login-page--app .staff-login__pw { position: relative; display: block; }
body.staff-login-page--app .staff-login__pw input { padding-right: 56px; }
body.staff-login-page--app .staff-login__eye {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: #8e8e93; box-shadow: none;
}
body.staff-login-page--app .staff-login__eye svg { width: 20px; height: 20px; }

/* button: white pill */
body.staff-login-page--app form.staff-login :is(.staff-btn, button[type="submit"]) {
  width: 100%;
  height: 52px;
  margin: 10px 0 0;
  border: 0 !important;
  border-radius: 999px;
  background: #f7f7f7 !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #0d0d0d !important;
  -webkit-text-fill-color: #0d0d0d;
  font: 600 17px/1 var(--a-font);
  letter-spacing: -0.015em;
  text-transform: none;
  cursor: pointer;
}
body.staff-login-page--app form.staff-login :is(.staff-btn, button[type="submit"]):active { transform: scale(0.98); opacity: 0.85; }
body.staff-login-page--app form.staff-login a { color: #8e8e93; }
body.staff-login-page--app .staff-error { display: block !important; justify-content: center; }
body.staff-login-page--app .staff-error::before, body.staff-login-page--app .staff-error::after { content: none !important; display: none !important; }

/* header 1:1 with the exchange worker login: logo picture, "💎 Welcome back!", subtitle */
body.staff-login-page--app .pb-login-head { display: flex; flex-direction: column; align-items: center; margin: 0 0 32px; text-align: center; }
body.staff-login-page--app .pb-login-head__logo { width: auto; height: 80px; margin: 0 0 28px; }
body.staff-login-page--app .pb-login-head strong { font: 700 28px/1.2 var(--a-font); letter-spacing: -0.02em; color: #fff; }
body.staff-login-page--app .pb-login-head span { margin-top: 6px; font: 400 17px/1.35 var(--a-font); color: #8e8e93; }
/* the old brand block, heading and lede are replaced by the header above */
body.staff-login-page--app form.staff-login > :is(.staff-login__brand, h1, .staff-lede) { display: none !important; }
body.staff-login-page--app form.staff-login > .staff-error { margin: -10px 0 0; }
@media (max-width: 767px) {
  body.staff-login-page--app .staff-login-shell { place-items: start center; }
  body.staff-login-page--app .staff-login-shell__panel { padding-top: calc(env(safe-area-inset-top, 0px) + 56px); }
  body.staff-login-page--app .pb-login-head__logo { height: 72px; }
}
body.staff-login-page--app .staff-login-shell__panel { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; }
body.staff-login-page--app .staff-login-shell__panel > form.staff-login { width: 100%; }