/* Local patch for Element Web: make the auth (login/register) card fit phones.
 *
 * Upstream Element Web sizes the auth card with a fixed 500px chain
 * (.mx_AuthPage_modal / modalBlur / modalContent / .mx_AuthBody) plus a 480px
 * .mx_Register_mainContent, with no responsive fallback. On a phone the card is
 * centred with `margin: auto`, so it overflows off BOTH edges and the right-hand
 * side of every row (Confirm password, helper text) is clipped off-screen.
 *
 * Note: this does NOT show up as scrollWidth > innerWidth, because the overflow
 * is centred rather than scrollable - it has to be measured via element rects.
 *
 * Scoped to narrow viewports so the desktop layout is untouched.
 */
@media (max-width: 520px) {
  .mx_AuthPage_modal,
  .mx_AuthPage_modalBlur,
  .mx_AuthPage_modalContent,
  .mx_AuthBody,
  .mx_Register_mainContent {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .mx_AuthPage_modal {
    margin: 0 auto !important;
    border-radius: 0 !important;
  }

  /* .mx_AuthPage is overflow-x:auto; any stray horizontal content leaves it
   * scrolled sideways, rendering the whole card shifted off the left edge.
   * Nothing on the auth page is meant to scroll horizontally, so pin that axis. */
  .mx_AuthPage {
    overflow-x: hidden !important;
  }

  /* The footer links (Blog / Mastodon / GitHub / Powered by Matrix) are inline
   * with NO whitespace between the <a> tags in the markup, so there is no soft
   * wrap opportunity between them and the last link overruns the edge - which
   * is what pushes .mx_AuthPage into horizontal overflow. Making the footer a
   * wrapping flex container gives each link its own break opportunity. */
  .mx_AuthFooter {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
  }

  /* Password + Confirm password sit side by side and cannot fit; stack them. */
  .mx_AuthBody_fieldRow {
    flex-direction: column !important;
  }

  .mx_AuthBody_fieldRow > .mx_Field {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}