html,
body,
#root {
  width: 100%;
  max-width: 100%;
}

body {
  overflow-x: hidden;
}

.app-shell,
.page-content,
.page-section,
.profile,
.panel,
.card,
.notice,
.filters,
.membership-actions {
  max-width: 100%;
  min-width: 0;
}

.profile h1,
.profile h2,
.profile h3,
.profile p,
.panel h1,
.panel h2,
.panel h3,
.panel p,
.card h3,
.card p,
.notice {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.profile .primary,
.profile .primary-link,
.profile button,
.profile a,
.panel .primary,
.panel .primary-link,
.panel button,
.panel a {
  max-width: 100%;
  white-space: normal;
}

@media (max-width: 720px) {
  .main-content {
    width: 100%;
    max-width: 100vw;
    padding-left: 12px;
    padding-right: 12px;
  }

  .page-content,
  .page-section,
  .profile {
    width: 100%;
  }

  .profile {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .profile h1 {
    font-size: clamp(30px, 8vw, 38px);
    line-height: 1.04;
  }

  .settings-card,
  .panel.settings-card {
    overflow: visible !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .settings-card form,
  .panel.settings-card form {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .settings-card form .primary[type="submit"],
  .panel.settings-card form .primary[type="submit"] {
    width: 100%;
    min-height: 48px;
    margin-top: 4px;
  }

  .settings-card .status-message,
  .panel.settings-card .status-message {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .membership-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
  }

  .membership-actions > *,
  .profile .primary,
  .profile .primary-link,
  .profile button {
    width: 100%;
  }
}