/* Final surface correction. This file is intentionally last in the cascade. */
.content,
.content > .view,
.content .post-card,
.content .profile-card {
  background: transparent !important;
  background-color: transparent !important;
}

.content .post-card {
  border-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.content .profile-card,
.content .profile-card.profile-card--styled {
  border-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.content .profile-card > *:not(.profile-banner),
.content .profile-card.profile-card--styled > *:not(.profile-banner),
.content .profile-card .profile-top,
.content .profile-card .profile-identity,
.content .profile-card .profile-bio,
.content .profile-card .profile-stats,
.content .profile-card .spark-card,
.content .profile-card .profile-actions {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* The selected profile header remains colorful; only the surrounding surface is cleared. */
.content .profile-card .profile-banner {
  background-color: transparent;
}

@media (max-width: 600px) {
  .modal-backdrop {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-backdrop .profile-editor,
  .modal-backdrop .story-editor {
    width: 100%;
    max-width: 520px;
    min-height: 0;
    max-height: calc(100dvh - 16px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .modal-backdrop .profile-editor .editor-actions,
  .modal-backdrop .story-editor .editor-actions {
    position: sticky;
    bottom: -1px;
    z-index: 20;
  }

  .modal-backdrop .upload-zone,
  .modal-backdrop .upload-zone input[type="file"] {
    touch-action: manipulation;
  }
}

@supports not (height: 100dvh) {
  @media (max-width: 600px) {
    .modal-backdrop .profile-editor,
    .modal-backdrop .story-editor {
      max-height: calc(100vh - 16px);
    }
  }
}