.link-button {
  border: 0;
  padding: 4px;
  background: transparent;
  color: #42bce9;
  font: inherit;
  cursor: pointer;
}

.submit:disabled {
  cursor: wait;
  opacity: .72;
}

.submit.loading > b {
  animation: arrow-pulse .8s ease-in-out infinite;
}

.field.invalid {
  border-color: #ff6685;
  box-shadow: 0 0 0 3px rgba(255, 67, 103, .08);
}

#status {
  min-height: 12px;
}

#status.info { color: #8ecce4; }
#status.warning { color: #ffd578; }
#status.error { color: #ff879f; }
#status.success { color: #55dca9; }

.session-panel {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(255, 197, 68, .38);
  background: rgba(255, 181, 35, .06);
}

.session-panel[hidden] { display: none; }

.session-panel strong {
  display: block;
  color: #ffd578;
  font: 700 17px var(--display);
  text-transform: uppercase;
}

.session-panel p {
  color: #9fb4bd;
  font-size: 9px;
  line-height: 1.55;
}

.session-panel > div {
  display: flex;
  gap: 8px;
}

.session-panel button {
  flex: 1;
  padding: 9px;
  border: 1px solid #315666;
  background: transparent;
  color: #a9c1cb;
  font: 700 8px var(--body);
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
}

.session-panel #force-login {
  border-color: #179fd7;
  background: #087eb0;
  color: #fff;
}

@keyframes arrow-pulse {
  50% { transform: translateX(4px); }
}

/* Phone sign-in is a readable form, including when the software keyboard opens. */
.mobile-login-logo { display: none; }
#password-update-form[hidden], #recovery-form[hidden] { display: none !important; }
.login-inner :is(button,a,input):focus-visible { outline: 3px solid #65d2ff; outline-offset: 3px; }
.login-inner [role="status"] { overflow-wrap: anywhere; }
@media (max-width: 650px), (max-height: 520px) and (pointer: coarse) {
  html, body { height: 100%; min-height: 0; overflow: hidden; }
  body > header, .intro, .features, body > footer, body > a { display: none !important; }
  main { display: block; width: 100%; max-width: 100%; height: var(--auth-viewport-height, 100dvh); margin: 0; padding: max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); overflow: hidden; }
  .login-card { display: flex; flex-direction: column; width: 100%; max-width: 520px; min-width: 0; height: 100%; min-height: 0; margin: auto; border-radius: 16px; clip-path: none; overflow: hidden; }
  .scan, .lock, .card-bottom { display: none; }
  .card-top { flex: 0 0 auto; min-height: 34px; padding: 8px 16px; gap: 12px; font-size: 11px; letter-spacing: .06em; }
  .mobile-login-logo { display: flex; flex: 0 0 auto; padding: 12px 16px 0; }
  .mobile-login-logo img { width: 128px; height: 50px; object-fit: contain; background: #fff; padding: 4px; border-radius: 3px; }
  .login-inner { flex: 1 1 auto; min-height: 0; min-width: 0; width: 100%; padding: 18px 18px 24px; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scroll-padding-block: 16px; }
  .login-inner form { min-width: 0; width: 100%; }
  .login-inner > small { font-size: 12px; letter-spacing: .1em; }
  .login-inner h2 { font-size: 36px; margin: 8px 0 12px; }
  .login-inner > p, .login-inner form > p, #status, #otp-status { font-size: 16px; line-height: 1.5; margin: 8px 0 16px; }
  .login-inner form > label { font-size: 16px; line-height: 1.4; text-transform: none; letter-spacing: 0; margin: 16px 0 8px; }
  .field { min-height: 48px; height: 48px; margin-top: 6px; }
  .field > b { width: 36px; flex: 0 0 36px; }
  .field input { font-size: 16px; min-width: 0; padding: 8px; }
  .field button { min-width: 48px; min-height: 44px; padding: 8px; font-size: 12px; }
  .options { flex-wrap: wrap; gap: 8px; margin: 14px 0; font-size: 16px; }
  .options label { min-height: 44px; gap: 8px; }
  .options input { width: 22px; height: 22px; margin: 0; }
  .link-button { min-height: 44px; padding: 10px 4px; font-size: 16px; }
  .submit { height: auto; min-height: 48px; padding: 12px 16px; font-size: 16px; line-height: 1.4; text-transform: none; letter-spacing: 0; gap: 12px; }
  .submit > b { width: 28px; height: 28px; flex-shrink: 0; font-size: 20px; }
  #status { text-align: left; }
  .session-panel { padding: 12px; }
  .session-panel strong { font-size: 20px; }
  .session-panel p { font-size: 16px; }
  .session-panel > div { flex-wrap: wrap; }
  .session-panel button { min-height: 48px; min-width: 120px; font-size: 16px; text-transform: none; letter-spacing: 0; }
}
@media (max-height: 520px) and (pointer: coarse) {
  .card-top, .mobile-login-logo { display: none; }
}