/* NTTN fixed public login shell v2.3.6
   Scope: unauthenticated auth.login only.
   The document never scrolls; header and footer stay fixed and the login
   workspace is sized to the remaining viewport. */

:root {
  --login-header-height: 82px;
  --login-footer-height: 46px;
  --login-page-inline: clamp(24px, 5vw, 84px);
  --login-page-block: clamp(18px, 3vh, 38px);
}

html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body.public-login-page {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body.public-login-page,
body.public-login-page * {
  box-sizing: border-box;
}

body.public-login-page .video-bg,
body.public-login-page .page-background-shade {
  position: fixed;
  inset: 0;
}

body.public-login-page .app-topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1100;
  height: var(--login-header-height);
  min-height: var(--login-header-height);
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  background: rgba(4, 24, 14, 0.96);
  border-bottom: 1px solid rgba(167, 243, 208, 0.16);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}

body.public-login-page .topbar-left,
body.public-login-page .public-header-actions {
  min-width: 0;
}

body.public-login-page .public-main {
  position: fixed;
  top: var(--login-header-height);
  right: 0;
  bottom: var(--login-footer-height);
  left: 0;
  z-index: 2;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body.public-login-page .auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(390px, 0.75fr);
  align-items: center;
  gap: clamp(32px, 6vw, 104px);
  width: min(100%, 1540px);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: var(--login-page-block) var(--login-page-inline);
  overflow: hidden;
}

body.public-login-page .auth-intro,
body.public-login-page .auth-card {
  min-width: 0;
  min-height: 0;
}

body.public-login-page .auth-intro {
  align-self: center;
  max-width: 680px;
}

body.public-login-page .auth-intro .eyebrow {
  display: inline-block;
  margin-bottom: clamp(10px, 1.4vh, 18px);
  font-size: clamp(0.72rem, 0.8vw, 0.9rem);
  letter-spacing: 0.16em;
}

body.public-login-page .auth-intro h1 {
  margin: 0;
  font-size: clamp(3rem, min(5.2vw, 8.2vh), 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

body.public-login-page .auth-intro p {
  max-width: 58ch;
  margin: clamp(14px, 2vh, 24px) 0 0;
  font-size: clamp(0.98rem, min(1.25vw, 2.1vh), 1.3rem);
  line-height: 1.55;
}

body.public-login-page .auth-card {
  align-self: center;
  width: min(100%, 560px);
  max-height: 100%;
  margin: 0 0 0 auto;
  padding: clamp(24px, min(3vw, 4vh), 42px);
  overflow: hidden;
  border-radius: 24px;
}

body.public-login-page .auth-card-header {
  margin-bottom: clamp(18px, 2.6vh, 28px);
}

body.public-login-page .auth-card-header img {
  flex: 0 0 auto;
  max-width: 72px;
  max-height: 44px;
  object-fit: contain;
}

body.public-login-page .auth-card-header h2 {
  margin-bottom: 2px;
  font-size: clamp(1.75rem, 2vw, 2.25rem);
}

body.public-login-page .auth-card-header p {
  margin-bottom: 0;
}

body.public-login-page .auth-card form {
  margin: 0;
}

body.public-login-page .auth-card .mb-3 {
  margin-bottom: clamp(12px, 1.8vh, 18px) !important;
}

body.public-login-page .auth-card .mb-4 {
  margin-bottom: clamp(18px, 2.4vh, 26px) !important;
}

body.public-login-page .auth-card .form-label {
  margin-bottom: 7px;
}

body.public-login-page .auth-card .form-control {
  min-height: 48px;
  padding-top: 0.62rem;
  padding-bottom: 0.62rem;
}

body.public-login-page .auth-card .btn-lg {
  min-height: 50px;
  padding-top: 0.62rem;
  padding-bottom: 0.62rem;
}

body.public-login-page .app-footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--login-footer-height);
  min-height: var(--login-footer-height);
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  background: rgba(3, 18, 11, 0.96);
  border-top: 1px solid rgba(167, 243, 208, 0.13);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.public-login-page .flash-stack {
  position: absolute;
  top: 12px;
  right: 18px;
  left: 18px;
  z-index: 40;
  pointer-events: none;
}

body.public-login-page .flash-stack .alert {
  width: min(100%, 760px);
  margin-right: auto;
  margin-left: auto;
  pointer-events: auto;
}

/* Tablet: keep the form primary and remove the decorative introduction. */
@media (max-width: 980px) {
  :root {
    --login-header-height: 74px;
    --login-footer-height: 42px;
  }

  body.public-login-page .auth-shell {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
    gap: 0;
    padding-inline: clamp(20px, 7vw, 64px);
  }

  body.public-login-page .auth-intro {
    display: none;
  }

  body.public-login-page .auth-card {
    width: 100%;
    margin: 0;
  }
}

@media (max-width: 640px) {
  :root {
    --login-header-height: 68px;
    --login-footer-height: 38px;
  }

  body.public-login-page .app-topbar {
    padding-right: 14px;
    padding-left: 14px;
  }

  body.public-login-page .topbar-brand img {
    max-height: 34px;
  }

  body.public-login-page .topbar-brand strong {
    font-size: 1rem;
  }

  body.public-login-page .topbar-brand small {
    font-size: 0.68rem;
  }

  body.public-login-page .public-header-actions .btn {
    padding: 0.42rem 0.72rem;
    font-size: 0.84rem;
  }

  body.public-login-page .auth-shell {
    padding: 14px;
  }

  body.public-login-page .auth-card {
    padding: clamp(18px, 5vw, 26px);
    border-radius: 18px;
  }

  body.public-login-page .auth-card-header {
    margin-bottom: 16px;
  }

  body.public-login-page .auth-card-header img {
    max-width: 58px;
  }

  body.public-login-page .auth-card-header h2 {
    font-size: 1.55rem;
  }

  body.public-login-page .auth-card-header p {
    font-size: 0.86rem;
  }

  body.public-login-page .auth-card .form-control {
    min-height: 44px;
  }

  body.public-login-page .auth-card .btn-lg {
    min-height: 46px;
    font-size: 1rem;
  }

  body.public-login-page .app-footer {
    justify-content: center;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 0.7rem;
  }

  body.public-login-page .footer-left {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.public-login-page .footer-right {
    display: none;
  }
}

/* Short desktop/laptop screens use a compact form while preserving one viewport. */
@media (max-height: 720px) and (min-width: 981px) {
  :root {
    --login-header-height: 68px;
    --login-footer-height: 38px;
  }

  body.public-login-page .auth-shell {
    gap: clamp(24px, 4vw, 64px);
    padding-top: 12px;
    padding-bottom: 12px;
  }

  body.public-login-page .auth-intro h1 {
    font-size: clamp(2.7rem, 7.2vh, 4.3rem);
  }

  body.public-login-page .auth-intro p {
    margin-top: 10px;
    font-size: clamp(0.9rem, 1.9vh, 1.08rem);
  }

  body.public-login-page .auth-card {
    padding: 22px 28px;
  }

  body.public-login-page .auth-card-header {
    margin-bottom: 14px;
  }

  body.public-login-page .auth-card .mb-3 {
    margin-bottom: 10px !important;
  }

  body.public-login-page .auth-card .mb-4 {
    margin-bottom: 14px !important;
  }

  body.public-login-page .auth-card .form-control {
    min-height: 42px;
  }

  body.public-login-page .auth-card .btn-lg {
    min-height: 44px;
  }
}

/* When a mobile browser's virtual keyboard dramatically reduces the visual
   viewport, only the fixed middle workspace can scroll internally. The page,
   header and footer still do not move. */
@media (max-height: 520px) {
  body.public-login-page .public-main {
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  body.public-login-page .auth-shell {
    height: auto;
    min-height: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.public-login-page *,
  body.public-login-page *::before,
  body.public-login-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}