/* FLPCE Connect responsive layout corrections.
   Kept separate from the legacy stylesheet so these layout rules win without
   changing authentication logic or the signed-in account dashboard. */

body:has(#auth-container:not(.hidden)) {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

body:has(#auth-container:not(.hidden)) .container {
  min-width: 0;
}

body:has(#auth-container:not(.hidden)) #auth-container {
  min-width: 0;
}

body:has(#auth-container:not(.hidden)) #auth-container h2[data-translate="welcome"] {
  width: 100%;
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

body:has(#auth-container:not(.hidden)) .separator {
  min-width: 0;
}

body:has(#auth-container:not(.hidden)) .separator img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

body:has(#auth-container:not(.hidden)) .theme-toggle {
  z-index: 20;
}

/* Small laptop / tablet: prioritize usable form width over the illustration. */
@media (max-width: 900px) {
  body:has(#auth-container:not(.hidden)) .container {
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100% - 32px, 560px) !important;
    height: auto !important;
    min-height: min(760px, calc(100dvh - 32px)) !important;
    max-height: none !important;
    margin: 16px auto !important;
    overflow: visible !important;
  }

  body:has(#auth-container:not(.hidden)) .auth-hero {
    display: none !important;
  }

  body:has(#auth-container:not(.hidden)) .separator {
    grid-column: 1 !important;
    grid-row: auto !important;
    margin: 64px 0 0 !important;
    align-self: auto !important;
  }

  body:has(#auth-container:not(.hidden)) .separator > a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 20px !important;
    text-align: center !important;
  }

  body:has(#auth-container:not(.hidden)) .separator img {
    width: 52px;
  }

  body:has(#auth-container:not(.hidden)) #auth-container {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: center !important;
    align-self: auto !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    padding: 28px 28px 32px !important;
    text-align: left;
  }

  body:has(#auth-container:not(.hidden)) #auth-container h2[data-translate="welcome"] {
    margin: 0 auto 10px !important;
    font-size: clamp(25px, 5vw, 30px) !important;
    line-height: 1.2 !important;
  }

  body:has(#auth-container:not(.hidden)) .theme-toggle {
    top: 12px !important;
    right: 12px !important;
    width: 38px;
    height: 38px;
  }

  body:has(#auth-container:not(.hidden)) .language-selector {
    top: 12px !important;
    left: 12px !important;
  }
}

/* Phones: the login form is the only main panel; never render the globe. */
@media (max-width: 600px), (max-height: 520px) and (max-width: 900px) {
  .auth-hero,
  .education-orbit-scene,
  .planet-art,
  .planet-glow {
    display: none !important;
    visibility: hidden !important;
  }

  body:has(#auth-container:not(.hidden)) {
    display: block !important;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background: #fff !important;
  }

  body:has(#auth-container:not(.hidden)) .container {
    display: block !important;
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 0 max(20px, env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body:has(#auth-container:not(.hidden)) .language-selector {
    top: max(12px, env(safe-area-inset-top)) !important;
    left: 12px !important;
  }

  body:has(#auth-container:not(.hidden)) .language-btn {
    min-height: 38px;
    padding: 5px 7px;
    gap: 5px;
  }

  body:has(#auth-container:not(.hidden)) .theme-toggle {
    top: max(12px, env(safe-area-inset-top)) !important;
    right: 12px !important;
    width: 38px;
    height: 38px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
  }

  body:has(#auth-container:not(.hidden)) .separator {
    margin-top: 72px !important;
  }

  body:has(#auth-container:not(.hidden)) .separator > a {
    justify-content: center !important;
    padding: 0 20px !important;
  }

  body:has(#auth-container:not(.hidden)) .separator img {
    width: 48px !important;
  }

  body:has(#auth-container:not(.hidden)) #auth-container {
    width: 100% !important;
    max-width: 480px !important;
    padding: 26px 24px 24px !important;
    margin: 0 auto !important;
  }

  body:has(#auth-container:not(.hidden)) #auth-container h2[data-translate="welcome"] {
    font-size: clamp(24px, 7vw, 29px) !important;
    letter-spacing: -0.035em !important;
    line-height: 1.22 !important;
    text-align: center !important;
    margin-bottom: 12px !important;
  }

  body:has(#auth-container:not(.hidden)) .auth-tabs {
    display: flex;
    width: 100%;
    gap: 22px;
    margin: 24px 0 22px !important;
  }

  body:has(#auth-container:not(.hidden)) #login-form,
  body:has(#auth-container:not(.hidden)) #signup-form {
    width: 100%;
    min-width: 0;
  }

  body:has(#auth-container:not(.hidden)) #login-form input:not([type="checkbox"]),
  body:has(#auth-container:not(.hidden)) #signup-form input:not([type="checkbox"]) {
    width: 100%;
    min-width: 0;
    font-size: 16px;
  }

  body:has(#auth-container:not(.hidden)) .turnstile-container {
    max-width: 100%;
    overflow-x: auto;
  }

  body:has(#auth-container:not(.hidden)) #login-btn,
  body:has(#auth-container:not(.hidden)) #signup-btn,
  body:has(#auth-container:not(.hidden)) #signup-form button[type="submit"] {
    width: 100%;
  }
}

@media (max-width: 360px) {
  body:has(#auth-container:not(.hidden)) #auth-container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body:has(#auth-container:not(.hidden)) .language-btn span {
    max-width: 58px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#auth-container:not(.hidden)) *,
  body:has(#auth-container:not(.hidden)) *::before,
  body:has(#auth-container:not(.hidden)) *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}