.add-activity {
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 20;
  isolation: isolate;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--page) 50%, transparent);
}

.add-activity::before {
  content: "";
  position: absolute;
  inset: -8px -2px;
  z-index: -1;
  border-radius: 22px;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.activity-input,
.edit-input,
.search-field input {
  font-size: 16px;
}

.activity-card,
.backup-panel,
.data-safety {
  scroll-margin-top: calc(max(8px, env(safe-area-inset-top)) + 84px);
}

.activity-more > summary,
.history-panel summary,
.manage-panel summary,
.theme-toggle,
.clear-search,
.empty-clear-search,
.backup-button,
.replace-backup-button,
.cancel-import-button,
.delete-button,
.cancel-delete-button,
.history-delete-button,
.history-cancel-button,
.history-expand-button {
  touch-action: manipulation;
}

html {
  scroll-padding-top: calc(max(8px, env(safe-area-inset-top)) + 84px);
  scroll-padding-bottom: max(24px, env(safe-area-inset-bottom));
}

@media (max-width: 540px) {
  .app-shell {
    padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px));
  }

  .add-activity {
    top: max(6px, env(safe-area-inset-top));
    gap: 8px;
    padding: 8px;
    border-radius: 16px;
  }

  .add-activity::before {
    inset: -6px -2px;
    border-radius: 20px;
  }

  .activity-input {
    min-height: 44px;
  }

  .add-button {
    min-height: 44px;
    padding-inline: 12px;
  }

  .activity-input {
    padding-inline: 12px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .add-activity::before {
    background: var(--page);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}