moved remove from flock button

frontend/src/App.tsx

@@ -4005,9 +4005,6 @@ function App() {
                 <button className="secondary-button" onClick={() => startEditBird(selectedBird)} type="button">
                   Edit details
                 </button>
-                <button className="danger-button" onClick={handleRemoveBird} type="button" disabled={deletingBird}>
-                  {deletingBird ? 'Removing...' : 'Remove from flock'}
-                </button>
               </div>
             </div>
 
@@ -5281,6 +5278,25 @@ function App() {
                     </article>
                   )}
                 </section>
+
+                {selectedBird ? (
+                  <section className="settings-subsection settings-nested-card settings-danger-card">
+                    <div className="panel-header">
+                      <div>
+                        <p className="eyebrow">Danger zone</p>
+                        <h3>Remove bird profile</h3>
+                        <p className="muted">
+                          Remove {selectedBird.name} from this flock. This also removes weight records, vet visits, and medication history for this bird.
+                        </p>
+                      </div>
+                    </div>
+                    <div className="button-row">
+                      <button className="danger-button" onClick={handleRemoveBird} type="button" disabled={deletingBird}>
+                        {deletingBird ? 'Removing...' : 'Remove from flock'}
+                      </button>
+                    </div>
+                  </section>
+                ) : null}
               </>
             ) : null}
           </article>