/*****************************************************************************
 * TrebleChasersODL — Login Mobile Responsive V1
 *
 * Presentation only.
 *
 * Loaded after the shared V1A.2 responsive layer and scoped only to the
 * login page.
 *
 * Goals:
 * - preserve desktop presentation;
 * - prevent narrow-phone clipping;
 * - keep the page itself within the viewport;
 * - make the login controls comfortable for touch;
 * - give only the header navigation its own horizontal scroll when needed.
 *****************************************************************************/

@media (max-width: 780px) {

  body[data-page="login"][data-tc-v1a2-page="login"]
  .signup-header-inner {
    width: min(1230px, calc(100% - 20px));
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-inline: auto;
    padding-block: 0.65rem;
    box-sizing: border-box;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  .signup-brand {
    min-width: 0;
    flex: 1 1 auto;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  .signup-brand-copy {
    min-width: 0;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  .signup-navigation {
    width: 100%;
    min-width: 0;
    display: flex;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  .signup-navigation a {
    flex: 0 0 auto;
    max-width: none;
    min-height: 44px;
    white-space: nowrap;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  .signup-page {
    min-width: 0;
    box-sizing: border-box;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  :is(
    .signup-intro,
    .signup-panel,
    .signup-form,
    .signup-intro-content,
    .form-grid,
    .form-field,
    .login-support,
    .login-community,
    .login-routing,
    .login-recovery,
    .login-recovery-status,
    .approval-notice,
    .account-lifecycle-continue
  ) {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  :is(
    .signup-intro,
    .signup-panel,
    .signup-form,
    .login-support,
    .login-community,
    .account-lifecycle-continue
  ) {
    width: 100%;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  .signup-form
  :is(
    input,
    select,
    textarea
  ) {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    box-sizing: border-box;
    font-size: 16px;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  :is(
    #loginButton,
    #continueTrebleChasersButton
  ) {
    width: 100% !important;
    max-width: 100%;
    min-height: 48px;
    box-sizing: border-box;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  :is(
    .login-support > a,
    .login-community a
  ) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  :is(
    .login-status,
    .login-recovery-status,
    .login-routing,
    .approval-notice
  ) {
    overflow-wrap: anywhere;
  }
}


@media (max-width: 520px) {

  body[data-page="login"][data-tc-v1a2-page="login"]
  .signup-header-inner {
    width: min(1230px, calc(100% - 16px));
    gap: 0.5rem;
    padding-block: 0.5rem;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  .signup-brand-mark {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  .signup-brand-copy strong {
    font-size: 0.95rem;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  .signup-navigation {
    gap: 0.4rem;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  .signup-navigation a {
    min-height: 44px;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  .signup-intro {
    padding: 1rem !important;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  .signup-panel {
    padding: 1rem !important;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  .signup-panel-heading {
    padding-bottom: 1.25rem;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  .signup-form {
    gap: 1.25rem;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  :is(
    .approval-notice,
    .login-routing
  ) {
    padding: 0.85rem;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  .login-routing {
    flex-wrap: wrap;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  .login-recovery-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  .signup-intro-watermark {
    display: none;
  }
}

/*****************************************************************************
 * TC_LOGIN_MOBILE_STACK_V1_0_1_START
 *
 * Narrow-width correction after manual 520px / 390px visual proof exposed
 * the desktop two-column signup-page layout surviving below 780px.
 *
 * Presentation only.
 *****************************************************************************/

@media (max-width: 780px) {

  body[data-page="login"][data-tc-v1a2-page="login"]
  .signup-page {
    width: min(1230px, calc(100% - 20px));
    max-width: 100%;
    min-width: 0;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row;

    gap: 1rem;
    margin-inline: auto;

    box-sizing: border-box;
  }

  body[data-page="login"][data-tc-v1a2-page="login"]
  :is(
    .signup-intro,
    .signup-panel
  ) {
    grid-column: 1 / -1 !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;
  }

}

@media (max-width: 520px) {

  body[data-page="login"][data-tc-v1a2-page="login"]
  .signup-page {
    width: calc(100% - 16px);
    gap: 0.75rem;
  }

}

/* TC_LOGIN_MOBILE_STACK_V1_0_1_END */