/* Login / forgot-password — spacing + caret fixes for iOS (Safari, Chrome, all WebKit browsers) */

/* Lock viewport: no rubber-band scroll; avoid position:fixed on html (breaks iOS hero MP4 autoplay in PWA). */
html.atlas-login-active,
html.atlas-login-active body {
  margin: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Fixed layout height — never shrink with visualViewport (prevents faux “zoom” on focus). */
html.atlas-login-active #login-page,
html.atlas-login-active #app-content:has(#login-page) {
  height: 100dvh !important;
  max-height: 100dvh !important;
}

html:has(#login-page),
body:has(#login-page) {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}

#app-content:has(#login-page) {
  height: var(--atlas-app-height, 100dvh);
  max-height: var(--atlas-app-height, 100dvh);
  overflow: hidden;
}

#login-page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: var(--atlas-app-height, 100dvh);
  max-height: var(--atlas-app-height, 100dvh);
  min-height: 0;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: max(8px, env(safe-area-inset-top, 0px))
    max(12px, env(safe-area-inset-right, 0px))
    max(8px, env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-left, 0px));
  touch-action: manipulation;
}

html.atlas-login-keyboard #login-page.login-scroll-allowed {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  padding-top: max(6px, env(safe-area-inset-top, 0px));
}

#login-page .login-layer {
  position: relative;
  z-index: 2;
  margin: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: min(560px, 100%);
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
}

/* Beat legacy styles.min.css mobile padding that shrinks inputs and hero frame */
#login-page .login-logo-frame {
  max-width: none !important;
  padding: 0 !important;
  box-sizing: border-box;
}

#login-page .login-layer.login-layer {
  max-width: min(560px, 100%) !important;
  padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
}

@media (max-width: 768px) {
  #login-page .login-layer {
    gap: 18px;
    padding: 0 16px;
  }

  #login-page .login-logo-frame {
    margin-bottom: 12px;
  }

  #login-page .login-toggle {
    margin-top: 20px;
  }

  #login-page .login-footer-legal {
    margin-top: 16px;
    font-size: 12px;
  }
}

/* Touch / PWA — tablets & desktop login keep framed logo */
@media (max-width: 768px) and (hover: none), (max-width: 768px) and (pointer: coarse) {
  #login-page {
    padding-left: 0;
    padding-right: 0;
    padding-top: env(safe-area-inset-top, 0px);
  }

  @media (max-aspect-ratio: 11/16) {
    #login-page {
      padding-top: 0;
    }
  }

  #login-page .login-layer {
    padding-left: 16px;
    padding-right: 16px;
    width: 100%;
    box-sizing: border-box;
  }
}

/*
 * Mobile phones only (portrait): full viewport width hero — uses 100vw / 100%, not fixed px.
 * LOCK: do not change width / 100dvw / breakout margins on this block without owner approval.
 * Excludes typical tablets (wider aspect in portrait, e.g. iPad ~3:4) and desktop.
 */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) and (max-aspect-ratio: 11/16) {
  #login-page {
    justify-content: flex-start;
    padding-top: 0;
  }

  #login-page .login-layer {
    gap: 0;
    justify-content: flex-start;
    padding-top: 0;
    flex: 1 1 auto;
    height: 100%;
    max-height: 100%;
  }

  #login-page .login-logo-frame {
    max-width: none;
    width: 100vw;
    width: 100dvw;
    margin-left: calc(50% - 50vw);
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50vw);
    margin-right: calc(50% - 50dvw);
    padding: 0;
    border: none;
    margin-top: 0;
    margin-bottom: 12px;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  #login-page .login-logo-frame::after {
    display: none !important;
    content: none !important;
    border: none !important;
  }

  #login-page .login-logo-stage {
    aspect-ratio: auto;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    height: 100%;
    box-sizing: border-box;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
    display: flex;
    align-items: stretch;
    justify-content: center;
  }

  #login-page .login-form {
    flex: 0 0 auto;
  }

  #login-page .login-logo-frame .login-hero-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    transform: translateZ(0);
  }

  #login-page .login-logo-frame picture.login-hero-fallback img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }

  #login-page .cosmic-label {
    color: rgba(160, 175, 210, 0.82);
  }
}

/*
 * iPhone only (iOS Safari / home-screen PWA): shift the *crop* of the cover video slightly
 * downward so bright animation does not sit under the status bar / Dynamic Island.
 * LOCK: do not change object-position / safe-area crop on this block without owner approval.
 * Does not change hero width or outer frame position (Android & tablets unchanged).
 */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 767px) and (hover: none) and (pointer: coarse) and (max-aspect-ratio: 11/16) {
    #login-page .login-logo-frame .login-hero-video,
    #login-page .login-logo-frame picture.login-hero-fallback img {
      object-position: center center;
      transform: translateZ(0);
    }
  }
}

@media (max-width: 768px) and (max-height: 740px) {
  #login-page .login-layer {
    gap: 14px;
    transform: none;
  }

  #login-page .login-logo-frame {
    margin-bottom: 10px;
  }

  #login-page .login-form {
    gap: 16px;
  }

  #login-page .login-toggle {
    margin-top: 14px;
  }

  #login-page .login-footer-legal {
    margin-top: 10px;
  }
}

/* Animated hero logo (same assets as marketing site) */
.login-logo-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 576 / 324;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-logo-frame .login-hero-video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border: none;
  border-radius: 0;
  background: transparent;
  vertical-align: middle;
  pointer-events: none;
  transform: translateZ(0);
  -webkit-mask-image: none;
  mask-image: none;
  filter: none;
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Until MP4 is moving, show the looping WebP/GIF on top (not the static poster frame). */
.login-logo-stage:not(.hero-video-live) .login-hero-video {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.login-logo-stage.hero-video-live .login-hero-video {
  position: relative;
  opacity: 1;
  z-index: 2;
}

.login-logo-frame picture.login-hero-fallback {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.login-logo-frame picture.login-hero-fallback img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Animated loop only when MP4 has not started (never static JPG as visible hero) */
.login-logo-stage:not(.hero-video-live) picture.login-hero-fallback {
  display: block;
  z-index: 3;
}

.login-logo-stage.hero-video-live picture.login-hero-fallback {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .login-logo-stage:not(.hero-video-live) picture.login-hero-fallback {
    display: block !important;
  }

  .login-logo-stage:not(.hero-video-live) .login-hero-video {
    opacity: 0;
  }
}

#login-page .login-layer {
  gap: 24px;
}

#login-page .login-logo-frame {
  margin-bottom: 28px;
}

#login-page .login-error {
  margin-bottom: 18px;
}

#login-page .login-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  box-sizing: border-box;
}

#login-page .cosmic-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

/* Static labels above inputs — reliable on iOS Chrome & Safari (both use WebKit) */
#login-page .cosmic-label {
  position: static;
  display: block;
  transform: none !important;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(160, 175, 210, 0.75);
  line-height: 1.3;
  pointer-events: none;
  margin: 0;
  padding: 0 2px;
}

#login-page .cosmic-input {
  display: block;
  position: static;
  z-index: auto;
  width: 100%;
  padding: 14px 16px;
  margin: 0;
  background: rgba(6, 10, 22, 0.92) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 12px;
  color: #e8ecf4;
  font-size: 17px;
  line-height: 1.45;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  caret-color: #e8ecf4;
  -webkit-appearance: none;
  appearance: none;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  -webkit-transform: none;
  transform: none;
  min-height: 48px;
  touch-action: manipulation;
}

#login-page .cosmic-input::placeholder {
  color: rgba(160, 175, 210, 0.48);
}

#login-page .cosmic-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.1);
  background: rgba(6, 10, 22, 0.98) !important;
}

#login-page .cosmic-field:focus-within .cosmic-label,
#login-page .cosmic-field.focused .cosmic-label,
#login-page .cosmic-field.has-value .cosmic-label {
  color: rgba(var(--accent-rgb), 0.9);
}

#login-page .login-forgot-row {
  margin: 4px 0 0;
  text-align: right;
  font-size: 13px;
  line-height: 1.4;
}

#login-page .login-forgot-row a {
  color: #00eaff;
  text-decoration: none;
  font-weight: 500;
}

#login-page .login-forgot-row a:hover {
  color: #7cf8ff;
}

#login-page .login-submit-btn {
  margin-top: 10px;
  padding: 16px;
  font-size: 16px;
}

#login-page .login-toggle {
  margin-top: 32px;
}

#login-page .login-footer-legal {
  margin-top: 28px;
  line-height: 1.55;
}

#login-page .login-forgot-hint {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(232, 236, 244, 0.78);
  text-align: center;
}

#login-page .login-sent-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 12px 4px 4px;
  text-align: center;
}

#login-page .login-sent-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.45);
  box-shadow: 0 0 24px rgba(34, 197, 94, 0.12);
}

#login-page .login-sent-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #e8ecf4;
}

#login-page .login-sent-message {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(232, 236, 244, 0.78);
}

#login-page .login-sent-email {
  color: #e8ecf4;
  font-weight: 600;
  word-break: break-word;
}

#login-page .login-sent-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(160, 175, 210, 0.75);
}

#login-page .login-back-link {
  margin: 8px 0 0;
  text-align: center;
  font-size: 13px;
}

#login-page .login-back-link a {
  color: #00eaff;
  text-decoration: none;
  font-weight: 500;
}

#login-page .login-back-link a:hover {
  color: #7cf8ff;
}

@keyframes login-field-neon-pulse {
  0%,
  100% {
    border-color: rgba(var(--accent-rgb), 0.62);
    box-shadow:
      0 0 10px rgba(var(--accent-rgb), 0.28),
      0 0 22px rgba(var(--accent-rgb), 0.12),
      inset 0 0 0 1px rgba(var(--accent-rgb), 0.08);
  }
  50% {
    border-color: rgba(var(--accent-rgb), 0.92);
    box-shadow:
      0 0 16px rgba(var(--accent-rgb), 0.48),
      0 0 32px rgba(124, 58, 237, 0.28),
      inset 0 0 0 1px rgba(var(--accent-rgb), 0.14);
  }
}

/* Mobile + tablet touch: bolder neon fields, no focus-zoom (≥17px inputs — iOS/Android) */
@media (max-width: 1024px) and (hover: none), (max-width: 1024px) and (pointer: coarse) {
  #login-page .cosmic-input {
    font-size: 17px !important;
    line-height: 1.45 !important;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(var(--accent-rgb), 0.58);
    animation: login-field-neon-pulse 2.8s ease-in-out infinite;
  }

  #login-page .cosmic-input:focus {
    border-color: rgba(var(--accent-rgb), 0.95);
    animation: login-field-neon-pulse 1.6s ease-in-out infinite;
    outline: none;
  }
}

@media (max-width: 1024px) and (hover: none) and (prefers-reduced-motion: reduce),
  (max-width: 1024px) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  #login-page .cosmic-input {
    animation: none;
    border-color: rgba(var(--accent-rgb), 0.72);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.32);
  }
}

/* Desktop: slightly larger typography, same static-label layout (no floating — avoids WebKit caret bugs) */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  #login-page .login-form {
    gap: 20px;
  }

  #login-page .cosmic-label {
    font-size: 13px;
  }

  #login-page .cosmic-input {
    font-size: 17px;
    padding: 16px 18px;
    min-height: 52px;
  }
}

/* Phone portrait — must follow global .login-logo-frame margins */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) and (max-aspect-ratio: 11/16) {
  #login-page .login-logo-frame {
    margin-bottom: 8px;
  }

  #login-page .login-layer {
    gap: 10px;
  }
}