/* Version 47 access gate.
   This is intentionally the final stylesheet: it prevents the private app from
   rendering below the public access screen and normalizes mobile scrolling. */

html,
body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: clip;
}

[hidden] {
  display: none !important;
}

html.accessLocked {
  height: 100%;
  overflow: hidden !important;
}

.privateApp {
  min-height: 100%;
}

/* The private interface is not part of the public page flow. Verification is
   the only overlay allowed above the access gate before membership is proven. */
body.accessOpen > :not(#accessPortal):not(#verificationOverlay):not(#career-cookie-banner):not(.career-legal-links):not(script) {
  display: none !important;
}

body.accessOpen {
  height: 100vh;
  height: 100dvh;
  overflow: hidden !important;
}

body.accessOpen #accessPortal {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Desktop and large tablet: one viewport, no unnecessary page scrollbar. */
@media (min-width: 1051px) {
  body.accessOpen #accessPortal {
    position: fixed !important;
    inset: 0 !important;
    display: grid !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.accessOpen .accessShowcase,
  body.accessOpen .accessPanel {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.accessOpen .accessDashboardShowcase {
    background-color: transparent !important;
    background-size: cover, cover, cover !important;
    background-position: center, center, center !important;
    background-repeat: no-repeat !important;
  }

  body.accessOpen .accessPanel {
    display: flex !important;
    flex-direction: column !important;
  }

  body.accessOpen .accessContent {
    width: min(100%, 536px) !important;
    margin: auto !important;
  }

  body.accessOpen .accessPanel.signupActive .accessContent {
    transform: none !important;
  }

  body.accessOpen .accessPanel .accessForm.active {
    align-content: center !important;
  }
}

/* Phone and compact tablet: the access screen is the sole scrolling surface.
   This avoids iOS fixed-position/body-scroll bugs and keeps the dashboard out
   of the scroll chain. */
@media (max-width: 1050px) {
  body.accessOpen {
    position: fixed;
    inset: 0;
    width: 100%;
  }

  body.accessOpen #accessPortal {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: auto;
    touch-action: pan-y;
  }

  body.accessOpen .accessPanel {
    order: 1 !important;
    display: flex !important;
    width: 100% !important;
    min-height: 100svh !important;
    height: auto !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    padding-top: max(20px, env(safe-area-inset-top)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
    padding-bottom: max(26px, env(safe-area-inset-bottom)) !important;
    padding-left: max(14px, env(safe-area-inset-left)) !important;
  }

  body.accessOpen .accessContent,
  body.accessOpen .accessPanel > * {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  body.accessOpen .accessContent {
    transform: none !important;
    text-align: center !important;
  }

  body.accessOpen .accessTabs,
  body.accessOpen .accessPanel.signupActive .accessTabs {
    margin: 0 0 18px !important;
  }

  body.accessOpen .accessForm h2,
  body.accessOpen .accessForm > p,
  body.accessOpen .accessForm > .eyebrow {
    text-align: center !important;
  }

  body.accessOpen .accessSecurity,
  body.accessOpen .accessFooter {
    position: relative !important;
    inset: auto !important;
  }

  body.accessOpen .accessShowcase {
    order: 2 !important;
    width: 100% !important;
    min-height: 640px !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }

  body.accessOpen .accessDashboardShowcase {
    background-color: transparent !important;
    background-size: cover, cover, cover !important;
    background-position: center, center, center !important;
    background-repeat: no-repeat !important;
  }

  body.accessOpen input,
  body.accessOpen select,
  body.accessOpen textarea {
    font-size: 16px !important;
  }
}

@media (max-width: 720px) {
  body.accessOpen .accessPanel {
    min-height: auto !important;
  }

  body.accessOpen .accessForm.active {
    gap: 12px !important;
  }

  body.accessOpen .accessTwo {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.accessOpen .checkoutSummary {
    padding: 12px 14px !important;
  }

  body.accessOpen .accessShowcase {
    min-height: 620px !important;
  }
}

@supports not (height: 100dvh) {
  body.accessOpen {
    height: 100vh;
  }
}

/* Version 50: keep the wordmark clear of every worker's face without changing
   the photograph's aspect ratio, and restore breathing room above My VAULT. */
@media (min-width: 1051px) {
  body.accessOpen .accessDashboardShowcase .accessBrand {
    top: clamp(250px, 29vh, 330px) !important;
    left: clamp(34px, 4vw, 70px) !important;
    right: auto !important;
  }

  body.accessOpen .accessPanel.signupActive .accessContent {
    transform: translateY(-22px) !important;
  }
}

/* Version 51: restore a large brand lockup above the green career card. The
   photograph keeps its original proportions and sits lower so no worker's
   head is covered. On phones and compact tablets the branded visual appears
   before authentication, matching the BTTD mobile journey. */
@media (min-width: 1051px) {
  body.accessOpen .accessDashboardShowcase {
    background-color: #003e38 !important;
    background-size: 100% 100%, 100% 100%, auto 84% !important;
    background-position: center, center, center bottom !important;
    background-repeat: no-repeat !important;
  }
  body.accessOpen .accessDashboardShowcase .accessBrand {
    top: 22px !important;
    left: clamp(34px, 4vw, 70px) !important;
    right: auto !important;
    padding: 12px 20px 12px 14px !important;
    gap: 12px !important;
  }
  body.accessOpen .accessDashboardShowcase .accessBrand img {
    width: 82px !important;
    height: 82px !important;
  }
  body.accessOpen .accessDashboardShowcase .accessBrand strong {font-size: 32px !important}
  body.accessOpen .accessDashboardShowcase .accessBrand small {
    font-size: 10px !important;
    letter-spacing: 2.4px !important;
  }
}
@media (max-width: 1050px) {
  body.accessOpen .accessShowcase {order: 1 !important}
  body.accessOpen .accessPanel {order: 2 !important}
}
@media (max-width: 1050px) and (orientation: landscape) {
  body.accessOpen .accessShowcase {min-height: max(500px, 100svh) !important}
}

/* Version 52: fill the desktop showcase with the existing dashboard artwork.
   The previous 84% image height exposed a solid green band above the photo. */
@media (min-width: 1051px) {
  body.accessOpen .accessDashboardShowcase {
    background-color: transparent !important;
    background-size: 100% 100%, 100% 100%, cover !important;
    background-position: center, center, center !important;
    background-repeat: no-repeat !important;
  }
}

/* Version 54: keep the brand lockup in its established position and reframe
   the photograph so the left-most worker's face remains outside that lockup.
   Height-based sizing preserves the original image ratio; no stretching. */
@media (min-width: 1051px) {
  body.accessOpen .accessDashboardShowcase {
    background-size: 100% 100%, 100% 100%, auto 118% !important;
    background-position: center, center, left top !important;
    background-repeat: no-repeat !important;
  }
}

/* Version 55: preserve the brand lockup's established anchor while reducing
   its footprint so the first worker remains completely visible. */
@media (min-width: 1051px) {
  body.accessOpen .accessDashboardShowcase .accessBrand {
    top: 22px !important;
    left: clamp(34px, 4vw, 70px) !important;
    right: auto !important;
    width: max-content !important;
    max-width: calc(100% - 68px) !important;
    padding: 8px 12px 8px 9px !important;
    gap: 8px !important;
  }

  body.accessOpen .accessDashboardShowcase .accessBrand img {
    width: 58px !important;
    height: 58px !important;
  }

  body.accessOpen .accessDashboardShowcase .accessBrand strong {
    font-size: 27px !important;
  }

  body.accessOpen .accessDashboardShowcase .accessBrand small {
    font-size: 8.5px !important;
    letter-spacing: 1.9px !important;
  }
}

/* Version 56: prominent brand lockup plus a fully contained, proportional
   photograph. Every worker remains visible and the image cannot spill into
   the authentication panel or stretch at desktop browser dimensions. */
@media (min-width: 1051px) {
  body.accessOpen .accessDashboardShowcase {
    background-color: #003e38 !important;
    background-size: 100% 100%, 100% 100%, contain !important;
    background-position: center, center, center bottom !important;
    background-repeat: no-repeat !important;
  }

  body.accessOpen .accessDashboardShowcase .accessBrand {
    top: 22px !important;
    left: clamp(34px, 4vw, 70px) !important;
    right: auto !important;
    width: max-content !important;
    max-width: calc(100% - 68px) !important;
    padding: 13px 20px 13px 14px !important;
    gap: 12px !important;
  }

  body.accessOpen .accessDashboardShowcase .accessBrand img {
    width: 82px !important;
    height: 82px !important;
  }

  body.accessOpen .accessDashboardShowcase .accessBrand strong {
    font-size: 34px !important;
  }

  body.accessOpen .accessDashboardShowcase .accessBrand small {
    font-size: 10.5px !important;
    letter-spacing: 2.4px !important;
  }
}

/* Version 57: use the purpose-built 4:3 warehouse photograph with genuine
   photographic headroom. Cover now fills the showcase without a green band,
   while the complete worker group remains inside the frame. */
@media (min-width: 1051px) {
  body.accessOpen .accessDashboardShowcase {
    background-color: transparent !important;
    background-size: 100% 100%, 100% 100%, cover !important;
    background-position: center, center, center !important;
    background-repeat: no-repeat !important;
  }
}

/* Version 59: retain the full-resolution 4:3 photograph at its natural aspect
   ratio and reframe it upward on desktop. This places every worker's head and
   shoulders in the open photographic area above the career card. The brand
   lockup keeps its established anchor and the authentication panel is not
   affected. */
@media (min-width: 1051px) {
  body.accessOpen .accessDashboardShowcase {
    background-color: #003e38 !important;
    background-size: 100% 100%, 100% 100%, cover !important;
    background-position:
      center,
      center,
      center calc(50% - clamp(145px, 18vh, 185px)) !important;
    background-repeat: no-repeat !important;
  }
}

/* Keep the warehouse scene proportionate and consistently framed on tablets
   and phones while retaining natural page scrolling and safe-area behavior. */
@media (max-width: 1050px) {
  body.accessOpen .accessDashboardShowcase {
    background-size: 100% 100%, 100% 100%, cover !important;
    background-position: center, center, center top !important;
    background-repeat: no-repeat !important;
  }
}

/* Version 60: purpose-built composition with the complete five-worker team
   grouped on the right and clear logo/card zones on the left. The smaller
   desktop career card preserves the existing message and controls while
   exposing every worker's head and shoulders. Authentication is untouched. */
@media (min-width: 1051px) {
  body.accessOpen .accessDashboardShowcase {
    background-color: #003e38 !important;
    background-size: 100% 100%, 100% 100%, cover !important;
    background-position: center, center, center !important;
    background-repeat: no-repeat !important;
  }

  body.accessOpen .accessImageMessage {
    box-sizing: border-box !important;
    width: min(46%, 560px) !important;
    max-width: 560px !important;
    padding: 20px 22px !important;
  }

  body.accessOpen .accessImageMessage h1 {
    font-size: clamp(42px, 3.1vw, 54px) !important;
    line-height: .96 !important;
    letter-spacing: -2.5px !important;
  }

  body.accessOpen .accessImageMessage > p:not(.eyebrow) {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  body.accessOpen .accessImageMessage .accessFeatures {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.accessOpen .accessImageMessage .accessFeatures span {
    padding: 8px 9px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }

  body.accessOpen .accessImageMessage .accessFeatures .featureOneLine {
    white-space: normal !important;
  }
}

@media (max-width: 1050px) {
  body.accessOpen .accessDashboardShowcase {
    background-size: 100% 100%, 100% 100%, cover !important;
    background-position: center, center, 66% top !important;
  }
}