diff --git a/CLAUDE.md b/CLAUDE.md
index a6a282d5c..f3ac1e1c6 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -153,6 +153,8 @@ bundle exec bundle-audit check --update
 - Controller naming: `[name]_controller.js`
 - Keep controllers focused and small
 - Use Tailwind CSS v4 utility classes
+- **Use Stimulus targets and data attributes** to reference DOM elements — avoid `this.element.querySelector` and direct DOM queries. Declare `static targets = [...]` and use `data-[controller]-target` attributes in views.
+- **Use Stimulus shorthand action descriptors and shorthand pairs** — omit the event when it's the default for that element (e.g., `input` for `<input>`/`<textarea>`, `click` for `<button>`/`<a>`, `submit` for `<form>`). Write `controller#action` not `input->controller#action` on an input element. Only specify the event when using a non-default (e.g., `change->controller#action` on an input). See [Stimulus Actions](https://stimulus.hotwired.dev/reference/actions#event-shorthand).
 
 ## Migrations
 
diff --git a/app/frontend/javascript/controllers/inactive_toggle_controller.js b/app/frontend/javascript/controllers/inactive_toggle_controller.js
index 16d5e34ae..29733c9f0 100644
--- a/app/frontend/javascript/controllers/inactive_toggle_controller.js
+++ b/app/frontend/javascript/controllers/inactive_toggle_controller.js
@@ -1,28 +1,60 @@
 import { Controller } from "@hotwired/stimulus";
 
+// Active themed classes used by person (sky) and organization (emerald) profile buttons
+const ACTIVE_CLASSES = [
+  "bg-sky-50", "bg-sky-100", "bg-sky-200", "hover:bg-sky-100", "hover:bg-sky-200",
+  "text-sky-700", "text-sky-800", "border-sky-200", "border-sky-300",
+  "bg-emerald-50", "bg-emerald-100", "bg-emerald-200", "hover:bg-emerald-100", "hover:bg-emerald-200",
+  "text-emerald-700", "text-emerald-800", "border-emerald-200", "border-emerald-300"
+];
+const GRAY_CLASSES = ["bg-gray-100", "hover:bg-gray-200", "text-gray-400", "border-gray-300"];
+
+function grayOut(el) {
+  ACTIVE_CLASSES.forEach((cls) => el.classList.remove(cls));
+  GRAY_CLASSES.forEach((cls) => el.classList.add(cls));
+}
+
 export default class extends Controller {
+  static targets = ["endDate", "title", "row", "profileButton"]
+
   connect() {
-    this.endDateInput = this.element.querySelector("input[type='date'][name*='end_date']");
-    if (this.endDateInput) {
-      this.apply();
-    }
+    // Save original classes for profile buttons and their styled children
+    this._savedClasses = [];
+    this.profileButtonTargets.forEach((btn) => {
+      btn.querySelectorAll("a.group, a.group span").forEach((el) => {
+        this._savedClasses.push({ el, className: el.className });
+      });
+    });
+
+    if (this.hasEndDateTarget) this.apply();
+    if (this.hasTitleTarget) this.updateBorder();
   }
 
   toggle() {
     this.apply();
   }
 
+  updateBorder() {
+    if (!this.hasTitleTarget) return;
+    const isFacilitator = this.titleTarget.value.toLowerCase().includes("facilitator");
+    this.rowTarget.style.borderLeft = `4px solid ${isFacilitator ? "#e879f9" : "#d1d5db"}`;
+  }
+
   apply() {
-    if (!this.endDateInput) return;
-    const value = this.endDateInput.value;
+    if (!this.hasEndDateTarget) return;
+    const value = this.endDateTarget.value;
     const isPast = value && new Date(value) < new Date(new Date().toDateString());
 
     if (isPast) {
-      this.element.classList.add("bg-gray-100", "border-gray-300", "opacity-60");
-      this.element.classList.remove("bg-white", "border-gray-200");
+      this.rowTarget.classList.add("bg-gray-100", "border-gray-300", "opacity-60");
+      this.rowTarget.classList.remove("bg-white", "border-gray-200");
+      this.profileButtonTargets.forEach((btn) => {
+        btn.querySelectorAll("a.group, a.group span").forEach((el) => grayOut(el));
+      });
     } else {
-      this.element.classList.remove("bg-gray-100", "border-gray-300", "opacity-60");
-      this.element.classList.add("bg-white", "border-gray-200");
+      this.rowTarget.classList.remove("bg-gray-100", "border-gray-300", "opacity-60");
+      this.rowTarget.classList.add("bg-white", "border-gray-200");
+      this._savedClasses.forEach(({ el, className }) => { el.className = className; });
     }
   }
 }
diff --git a/app/views/organizations/_affiliation_fields.html.erb b/app/views/organizations/_affiliation_fields.html.erb
index b159e57fd..f7ca8f0dd 100644
--- a/app/views/organizations/_affiliation_fields.html.erb
+++ b/app/views/organizations/_affiliation_fields.html.erb
@@ -1,76 +1,84 @@
 <% if allowed_to?(:manage?, Organization) %>
   <% expired = f.object.inactive? || (f.object.end_date.present? && f.object.end_date < Date.current) %>
-  <div class="nested-fields flex flex-wrap gap-x-4 gap-y-1 items-end mb-4 rounded-lg border p-3 <%= expired ? 'bg-gray-100 border-gray-300 opacity-60' : 'bg-white border-gray-200' %>"
-       style="border-left: 4px solid <%= f.object.facilitator? ? '#e879f9' : '#d1d5db' %>"
-       <% if f.object.persisted? %>id="<%= dom_id(f.object) %>"<% end %>
-       data-controller="inactive-toggle">
-    <div style="width: 350px; min-width: 350px; flex-shrink: 0;">
-      <% if f.object.persisted? && f.object.person.present? %>
-        <label class="block text-sm font-medium text-gray-700 mb-1">Person</label>
-        <% show_email = f.object.person.profile_show_email? || allowed_to?(:manage?, Person) %>
-        <%= person_profile_button(f.object.person, truncate_at: 30, subtitle: (f.object.person.preferred_email if show_email)) %>
-        <%= f.hidden_field :person_id %>
-      <% else %>
-        <%= f.input :person_id,
-          include_blank: true,
-          required: true,
-          input_html: {
-            data: {
-              controller: "remote-select",
-              remote_select_model_value: "person"
-            }
-          },
-          label: "Person"
-        %>
-      <% end %>
-    </div>
+  <div data-controller="inactive-toggle">
+    <div class="nested-fields flex flex-wrap gap-x-4 gap-y-1 items-end mb-4 rounded-lg border p-3 <%= expired ? 'bg-gray-100 border-gray-300 opacity-60' : 'bg-white border-gray-200' %>"
+         style="border-left: 4px solid <%= f.object.facilitator? ? '#e879f9' : '#d1d5db' %>"
+         <% if f.object.persisted? %>id="<%= dom_id(f.object) %>"<% end %>
+         data-inactive-toggle-target="row">
+      <div style="width: 350px; min-width: 350px; flex-shrink: 0;" data-inactive-toggle-target="profileButton">
+        <% if f.object.persisted? && f.object.person.present? %>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Person</label>
+          <% show_email = f.object.person.profile_show_email? || allowed_to?(:manage?, Person) %>
+          <%= person_profile_button(f.object.person, truncate_at: 30, subtitle: (f.object.person.preferred_email if show_email)) %>
+          <%= f.hidden_field :person_id %>
+        <% else %>
+          <%= f.input :person_id,
+            include_blank: true,
+            required: true,
+            input_html: {
+              data: {
+                controller: "remote-select",
+                remote_select_model_value: "person"
+              }
+            },
+            label: "Person"
+          %>
+        <% end %>
+      </div>
 
-    <div class="w-full sm:flex-1">
-      <%= f.input :title,
-                  as: :text,
-                  input_html: {
-                    rows: 1,
-                    value: f.object&.title || f.object&.position || "Facilitator",
-                    style: "height: 42px; min-height: 42px;",
-                    data: { action: "input->affiliation-dates#recalculate" }
-                  } %>
-    </div>
+      <div class="w-full sm:w-auto" style="min-width: 200px;">
+        <%= f.input :title,
+                    as: :text,
+                    input_html: {
+                      rows: 1,
+                      value: f.object&.title || f.object&.position || "Facilitator",
+                      style: "height: 42px; min-height: 42px;",
+                      data: {
+                        inactive_toggle_target: "title",
+                        action: "affiliation-dates#recalculate inactive-toggle#updateBorder"
+                      }
+                    } %>
+      </div>
 
-    <div class="w-full sm:w-auto">
-      <%= f.input :start_date,
-                  as: :string,
-                  label: "Start",
-                  input_html: {
-                    type: "date",
-                    value: (f.object.start_date || (Date.current unless f.object.persisted?))&.strftime("%Y-%m-%d"),
-                    class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
-                    data: { action: "change->affiliation-dates#recalculate" }
-                  } %>
-    </div>
+      <div class="w-full sm:w-auto">
+        <%= f.input :start_date,
+                    as: :string,
+                    label: "Start",
+                    input_html: {
+                      type: "date",
+                      value: (f.object.start_date || (Date.current unless f.object.persisted?))&.strftime("%Y-%m-%d"),
+                      class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
+                      data: { action: "change->affiliation-dates#recalculate" }
+                    } %>
+      </div>
 
-    <div class="w-full sm:w-auto">
-      <%= f.input :end_date,
-                  as: :string,
-                  label: "End",
-                  input_html: {
-                    type: "date",
-                    value: f.object.end_date&.strftime("%Y-%m-%d"),
-                    class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
-                    data: { action: "change->inactive-toggle#toggle change->affiliation-dates#recalculate" }
-                  } %>
-    </div>
+      <div class="w-full sm:w-auto">
+        <%= f.input :end_date,
+                    as: :string,
+                    label: "End",
+                    input_html: {
+                      type: "date",
+                      value: f.object.end_date&.strftime("%Y-%m-%d"),
+                      class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
+                      data: {
+                        inactive_toggle_target: "endDate",
+                        action: "change->inactive-toggle#toggle change->affiliation-dates#recalculate"
+                      }
+                    } %>
+      </div>
 
-    <div class="w-full sm:w-auto pb-3">
-      <label class="block text-sm font-medium text-gray-700 mb-1">Primary</label>
-      <%= f.check_box :primary_contact,
-                      checked: f.object.primary_contact? || !f.object.persisted?,
-                      class: "h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" %>
-    </div>
+      <div class="w-full sm:w-auto pb-3">
+        <label class="block text-sm font-medium text-gray-700 mb-1">Primary contact</label>
+        <%= f.check_box :primary_contact,
+                        checked: f.object.primary_contact? || !f.object.persisted?,
+                        class: "h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" %>
+      </div>
 
-    <div class="w-full text-right admin-only">
-      <%= link_to_remove_association "Remove",
-                                     f,
-                                     class: "text-sm text-gray-400 hover:text-red-600 underline whitespace-nowrap admin-only bg-blue-100 rounded px-2 py-1" %>
+      <div class="w-full text-right admin-only">
+        <%= link_to_remove_association "Remove",
+                                       f,
+                                       class: "text-sm text-gray-400 hover:text-red-600 underline whitespace-nowrap admin-only bg-blue-100 rounded px-2 py-1" %>
+      </div>
     </div>
   </div>
 <% else %>
diff --git a/app/views/people/_affiliation_fields.html.erb b/app/views/people/_affiliation_fields.html.erb
index 545b5abb3..085745fdc 100644
--- a/app/views/people/_affiliation_fields.html.erb
+++ b/app/views/people/_affiliation_fields.html.erb
@@ -1,78 +1,86 @@
 <% if allowed_to?(:manage?, Person) %>
   <% expired = f.object.inactive? || (f.object.end_date.present? && f.object.end_date < Date.current) %>
-  <div class="nested-fields flex flex-wrap gap-x-4 gap-y-1 items-end mb-4 rounded-lg border p-3 <%= expired ? 'bg-gray-100 border-gray-300 opacity-60' : 'bg-white border-gray-200' %>"
-       style="border-left: 4px solid <%= f.object.facilitator? ? '#e879f9' : '#d1d5db' %>"
-       data-controller="inactive-toggle">
-    <div style="width: 350px; min-width: 350px; flex-shrink: 0;">
-      <% if f.object.persisted? && f.object.organization.present? %>
-        <label class="block text-sm font-medium text-gray-700 mb-1">Organization</label>
-        <%= organization_profile_button(f.object.organization, truncate_at: 30) %>
-        <%= f.hidden_field :organization_id %>
-      <% else %>
-        <%= f.input :organization_id,
-          include_blank: true,
-          required: true,
-          input_html: {
-            data: {
-              controller: "remote-select",
-              remote_select_model_value: "organization"
-            }
-          },
-          error: "Organization can't be blank",
-          prompt: "Search by name",
-          label: "Organization",
-          label_html: { class: "block text-sm font-medium text-gray-700 mb-1 " } %>
-      <% end %>
-    </div>
+  <div data-controller="inactive-toggle">
+    <div class="nested-fields flex flex-wrap gap-x-4 gap-y-1 items-end mb-4 rounded-lg border p-3 <%= expired ? 'bg-gray-100 border-gray-300 opacity-60' : 'bg-white border-gray-200' %>"
+         style="border-left: 4px solid <%= f.object.facilitator? ? '#e879f9' : '#d1d5db' %>"
+         data-inactive-toggle-target="row">
+      <div style="width: 350px; min-width: 350px; flex-shrink: 0;" data-inactive-toggle-target="profileButton">
+        <% if f.object.persisted? && f.object.organization.present? %>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Organization</label>
+          <%= organization_profile_button(f.object.organization, truncate_at: 30) %>
+          <%= f.hidden_field :organization_id %>
+        <% else %>
+          <%= f.input :organization_id,
+            include_blank: true,
+            required: true,
+            input_html: {
+              data: {
+                controller: "remote-select",
+                remote_select_model_value: "organization"
+              }
+            },
+            error: "Organization can't be blank",
+            prompt: "Search by name",
+            label: "Organization",
+            label_html: { class: "block text-sm font-medium text-gray-700 mb-1 " } %>
+        <% end %>
+      </div>
+
+      <div class="w-full sm:w-auto" style="min-width: 200px;">
+        <div class="pt-1">
+          <%= f.input :title,
+                      as: :text,
+                      input_html: {
+                        rows: 1,
+                        value: f.object.title || f.object.position || "Facilitator",
+                        style: "height: 42px; min-height: 42px;",
+                        data: {
+                          inactive_toggle_target: "title",
+                          action: "affiliation-dates#recalculate inactive-toggle#updateBorder"
+                        }
+                      } %>
+        </div>
+      </div>
 
-    <div class="w-full sm:flex-1">
-      <div class="pt-1">
-        <%= f.input :title,
-                    as: :text,
+      <div class="w-full sm:w-auto">
+        <%= f.input :start_date,
+                    as: :string,
+                    label: "Start",
                     input_html: {
-                      rows: 1,
-                      value: f.object.title || f.object.position || "Facilitator",
-                      style: "height: 42px; min-height: 42px;",
-                      data: { action: "input->affiliation-dates#recalculate" }
+                      type: "date",
+                      value: (f.object.start_date || (Date.current unless f.object.persisted?))&.strftime("%Y-%m-%d"),
+                      class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
+                      data: { action: "change->affiliation-dates#recalculate" }
                     } %>
       </div>
-    </div>
-
-    <div class="w-full sm:w-auto">
-      <%= f.input :start_date,
-                  as: :string,
-                  label: "Start",
-                  input_html: {
-                    type: "date",
-                    value: (f.object.start_date || (Date.current unless f.object.persisted?))&.strftime("%Y-%m-%d"),
-                    class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
-                    data: { action: "change->affiliation-dates#recalculate" }
-                  } %>
-    </div>
 
-    <div class="w-full sm:w-auto">
-      <%= f.input :end_date,
-                  as: :string,
-                  label: "End",
-                  input_html: {
-                    type: "date",
-                    value: f.object.end_date&.strftime("%Y-%m-%d"),
-                    class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
-                    data: { action: "change->inactive-toggle#toggle change->affiliation-dates#recalculate" }
-                  } %>
-    </div>
+      <div class="w-full sm:w-auto">
+        <%= f.input :end_date,
+                    as: :string,
+                    label: "End",
+                    input_html: {
+                      type: "date",
+                      value: f.object.end_date&.strftime("%Y-%m-%d"),
+                      class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
+                      data: {
+                        inactive_toggle_target: "endDate",
+                        action: "change->inactive-toggle#toggle change->affiliation-dates#recalculate"
+                      }
+                    } %>
+      </div>
 
-    <div class="w-full sm:w-auto pb-3">
-      <label class="block text-sm font-medium text-gray-700 mb-1">Primary</label>
-      <%= f.check_box :primary_contact,
-                      checked: f.object.primary_contact? || !f.object.persisted?,
-                      class: "h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" %>
-    </div>
+      <div class="w-full sm:w-auto pb-3">
+        <label class="block text-sm font-medium text-gray-700 mb-1">Primary contact</label>
+        <%= f.check_box :primary_contact,
+                        checked: f.object.primary_contact? || !f.object.persisted?,
+                        class: "h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" %>
+      </div>
 
-    <div class="w-full text-right admin-only">
-      <%= link_to_remove_association "Remove",
-                                     f,
-                                     class: "text-sm text-gray-400 hover:text-red-600 underline whitespace-nowrap admin-only bg-blue-100 rounded px-2 py-1" %>
+      <div class="w-full text-right admin-only">
+        <%= link_to_remove_association "Remove",
+                                       f,
+                                       class: "text-sm text-gray-400 hover:text-red-600 underline whitespace-nowrap admin-only bg-blue-100 rounded px-2 py-1" %>
+      </div>
     </div>
   </div>
 <% else %>