/* login shell: center card; warm-paper palette via _PAGE vars */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box
}

.login-language {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 10
}

.login-language .langdd {
  position: relative
}

.login-language .langdd-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  padding: 0 9px;
  border: 0;
  background: none;
  color: var(--mute);
  font: 650 12px inherit;
  cursor: pointer
}

.login-language .langdd-btn:hover {
  color: var(--ink)
}

.login-language .chev {
  width: 10px;
  height: 10px
}

.login-language .langdd-menu {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  min-width: 126px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--card);
  box-shadow: 0 12px 28px rgba(26, 35, 51, .14)
}

.login-language .langdd.open .langdd-menu {
  display: block
}

.login-language .langdd-menu button {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 0 9px;
  border: 0;
  border-radius: var(--r-ctl);
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer
}

.login-language .langdd-menu button:hover,
.login-language .langdd-menu button[aria-selected="true"] {
  color: var(--accent);
  background: var(--tint-wash)
}

/* task23: the login card declares its own geometry (it predates the token layer), so the ladder has
   to be applied here by hand or the FIRST screen of the product is the one screen still on the old
   radii. h1 stays on --fs-title1: 34px display type inside a 420px card is a different design, not
   this batch. */
.login-shell .card.auth {
  width: 100%;
  max-width: 420px;
  margin: 0;
  padding: 30px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--r-card);
  box-shadow: 0 1px 3px rgba(26, 35, 51, 0.05), 0 12px 32px -16px rgba(26, 35, 51, 0.16)
}

.login-shell .login-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.login-shell .auth h1 {
  margin: 0;
  font-size: var(--fs-title1);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.25
}

.login-shell .login-logo {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0
}

.login-shell .login-logo img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block
}

.login-shell .auth .sub {
  margin: 10px 0 0;
  font-size: var(--fs-subhead);
  color: var(--mute);
  line-height: 1.45
}

.login-shell .login-hr {
  height: 1px;
  background: var(--line);
  margin: 18px 0
}

.login-shell .onbctx {
  font-size: var(--fs-footnote);
  color: var(--ink);
  background: var(--tint-wash);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  padding: 10px 12px;
  margin: 12px 0 0;
  max-width: none;
  line-height: 1.45;
  text-align: left
}

.login-shell .gwrap {
  display: block;
  min-height: 0;
  width: 100%
}

.login-shell .dev {
  margin-top: 18px
}

.login-shell .dev .or {
  color: var(--mute);
  font-size: var(--fs-caption);
  margin: 14px 0;
  text-align: center;
  font-weight: 500;
  position: relative
}

.login-shell .dev input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  font-size: var(--fs-subhead);
  font-family: inherit;
  margin-bottom: 10px;
  background: var(--paper);
  color: var(--ink);
  outline: none;
  box-sizing: border-box
}

.login-shell .dev input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px rgba(40, 71, 196, .18)
}

.login-shell .dev button {
  background: var(--accent-fill);
  color: #fff;
  border: none;
  border-radius: var(--r-btn);
  padding: 13px 22px;
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box
}

.login-shell .dev button:hover {
  background: var(--accent-press)
}

.login-shell .dev button:disabled {
  opacity: 0.5;
  cursor: not-allowed
}

.login-shell .dev button:active {
  transform: scale(0.97)
}

.login-shell .hint {
  font-size: var(--fs-footnote);
  color: var(--mute);
  margin-top: 12px;
  line-height: 1.45;
  text-align: center
}

.login-shell .msg {
  font-size: var(--fs-footnote);
  margin-top: 12px;
  line-height: 1.45
}

.login-shell .msg .ok {
  color: var(--jade)
}

.login-shell .msg .err {
  color: var(--verm)
}

@media (max-width:480px) {
  .login-language {
    top: 10px;
    right: 12px
  }

  .login-shell {
    padding: 56px 16px 16px
  }

  .login-shell .card.auth {
    padding: 22px 18px
  }

  .login-shell .auth h1 {
    font-size: var(--fs-title2)
  }
}