feat: grey out long activities when a short activity is selected

activity.css

@@ -74,6 +74,15 @@
   font-weight: 700;
 }
 
+.activity-card.is-disabled,
+.activity-card:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  filter: grayscale(0.4);
+  box-shadow: none;
+  background: #f7e8ec;
+}
+
 .time-notice {
   background: var(--color-white);
   border: 2px solid var(--color-peach);

activity.js

@@ -43,6 +43,7 @@
 
   function renderActivities() {
     activityGrid.innerHTML = "";
+    const hasShortSelected = selectedList.some((a) => a.type === "short");
 
     availableActivities.forEach((activity) => {
       const card = document.createElement("button");
@@ -55,6 +56,12 @@
         card.classList.add("selected");
       }
 
+      const isLongDisabled = hasShortSelected && activity.type === "long";
+      if (isLongDisabled) {
+        card.classList.add("is-disabled");
+        card.disabled = true;
+      }
+
       const icon = document.createElement("span");
       icon.className = "icon";
       icon.setAttribute("aria-hidden", "true");