/* Login — single viewport, centered, no page scroll */
html.login-page-root {
  height: 100%;
}

html.login-page-root,
html.login-page-root body.login-page {
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

body.login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding:
    max(12px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
}

body.login-page .login-page__shell {
  width: 100%;
  max-width: 28rem;
  flex: 0 1 auto;
  min-height: 0;
}

body.login-page .login-page__brand {
  margin-bottom: 1.25rem;
}

body.login-page .login-page__brand .app-logo--login {
  margin-bottom: 0.75rem;
}

body.login-page .login-page__flash {
  margin-bottom: 0.75rem;
}

body.login-page .input {
  font-size: 16px;
  touch-action: manipulation;
}

@media (max-height: 640px) {
  body.login-page .login-page__brand {
    margin-bottom: 0.75rem;
  }

  body.login-page .login-page__brand .app-logo--login {
    height: 36px;
    margin-bottom: 0.5rem;
  }

  body.login-page .login-page__brand h1 {
    font-size: 18px;
  }

  body.login-page .login-page__brand p {
    display: none;
  }

  body.login-page .card.card-pad {
    padding: 16px;
  }
}

/* Mobile header + PWA status bar — solid fill, no ::before (iOS sticky breaks with z-index:-1) */
@media (max-width: 1023px) {
  html:not(.login-page-root) {
    background-color: #fff;
  }

  .app-header {
    padding-top: env(safe-area-inset-top, 0px);
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--border-hairline);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      0 6px 24px -18px rgba(45, 37, 24, 0.12);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .app-header.lg-refract {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (min-width: 1024px) {
  .app-header {
    padding-top: 0;
  }
}

.imp-banner {
  padding-top: max(10px, env(safe-area-inset-top, 0px));
}

.imp-banner ~ header.app-header {
  padding-top: 0;
}

.avatar--photo {
  overflow: hidden;
  padding: 0;
}

.avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* App-specific extras — NOT in prototype app.css (impersonation banner) */
.imp-banner {
  background: linear-gradient(90deg, #f5a742, #e8862f);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 550;
  position: sticky;
  top: 0;
  z-index: 50;
}