/* Match main-mobile.css breakpoints, phone text scaling and 12px/24px gutters.
   Keep the exported desktop layout above 1400px; override inline geometry only here. */
@media (max-width: 1400px) {
  body.login-page {
    --login-gutter: 12px;
    --login-side-inset: max(var(--login-gutter), env(safe-area-inset-left), env(safe-area-inset-right));
    --login-text-size: calc(clamp(0.875rem, 4.1vw, 1.125rem) + 0.0625rem);
    --login-icon-size: clamp(22px, 6vw, 32px);
    display: block;
    min-height: 100svh;
  }

  .login-page .login-shell {
    width: 100%;
    max-width: 622px;
    height: auto;
    min-height: 100svh;
    margin-inline: auto;
    padding: 0
      var(--login-side-inset)
      calc(var(--login-gutter) + env(safe-area-inset-bottom));
    overflow: visible;
  }

  .login-page .login-card {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: minmax(12px, 1fr) minmax(0, 520px) minmax(12px, 1fr);
    align-content: start;
    gap: clamp(16px, 4vw, 24px) 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100svh - var(--login-gutter) - env(safe-area-inset-bottom));
    padding: 0 0 24px !important;
    background-color: transparent !important;
    box-shadow: none !important;
    overflow: visible !important; /* Let the title span beyond the inset card without trapping sticky positioning. */
  }

  .login-page .login-card > div {
    position: static !important;
    grid-column: 2;
    min-width: 0;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    justify-self: center;
  }

  .login-page .login-card > :is([data-pencil-name="Welcome Back"], .signup-header) {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    width: calc(100% + 2 * var(--login-side-inset)) !important;
    max-width: none;
    border-radius: 0 !important;
  }
  .login-page .login-card > [data-pencil-name="Welcome Back"] {
    grid-column: 1 / -1;
    padding-top: calc(15px + env(safe-area-inset-top)) !important;
  }
  .login-page [data-pencil-name="Welcome Back!"] {
    font-size: clamp(1.5rem, 6.67vw, 2rem) !important;
    letter-spacing: -0.03em !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .login-page :is([data-pencil-name="Textboxes"], [data-pencil-name="textboxes"]) { order: 1; gap: 12px !important; }
  .login-page .login-card > [data-pencil-name="login button"] {
    order: 2;
    width: fit-content !important;
    padding: 10px 32px !important;
  }
  .login-page .login-divider { order: 3; }
  .login-page [data-pencil-name="Login/Create account/Forgot password"] { order: 4; gap: 16px !important; }

  .login-page :is([data-pencil-name="Textboxes"], [data-pencil-name="textboxes"]) > div {
    width: 100% !important;
    height: auto !important;
    min-height: 48px;
    padding: 10px 12px !important;
  }
  .login-page :is(.export-172, .export-193, .export-208,
    [data-pencil-name="Log in with google"], [data-pencil-name="Forgot password?"]) {
    min-width: 0;
    font-size: var(--login-text-size) !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .login-page :is([data-pencil-name="login button"], [data-pencil-name="Login with google"],
    [data-pencil-name="Forgot password?"], [data-pencil-name="New account button"]) {
    display: flex;
    align-items: center;
    justify-content: center !important;
    min-height: 44px;
    max-width: 100%;
  }
  .login-page [data-pencil-name="New account button"] { padding: 10px 24px; }
  .login-page .export-235 { width: var(--login-icon-size); height: var(--login-icon-size); }
  .login-page .export-291 { width: 100%; height: 100%; }

  .login-page .login-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
  .login-page .login-divider > div { position: static; grid-column: 2; grid-row: 1; }
  .login-page .login-divider > svg { position: static; width: 100%; grid-row: 1; }
  .login-page .login-divider > .export-270 { grid-column: 1; }
  .login-page .login-divider > .export-274 { grid-column: 3; }
}

@media (max-width: 600px) {
  .login-page [data-pencil-name="login button"] { margin-top: 8px; }
  .login-page :is([data-pencil-name="Textboxes"], [data-pencil-name="textboxes"]) { margin-top: 8px; }
}

@media (min-width: 601px) and (max-width: 1400px) {
  body.login-page { --login-gutter: 24px; --login-text-size: 18px; }
  .login-page .login-shell { max-width: none; }
}