Copy and layout improvements.

app/pages/events/index.vue

@@ -11,9 +11,18 @@
 
     <!-- FILTER BAR -->
     <FilterBar v-model="activeFilter" :filters="filterOptions">
-      <label class="filter-toggle">
-        <input v-model="includePastEvents" type="checkbox" /> Show past events
-      </label>
+      <button
+        type="button"
+        class="past-toggle"
+        :class="{ active: includePastEvents }"
+        :aria-pressed="includePastEvents"
+        @click="includePastEvents = !includePastEvents"
+      >
+        <span class="past-toggle-box" aria-hidden="true">
+          <span v-if="includePastEvents" class="past-toggle-check">×</span>
+        </span>
+        Show past events
+      </button>
     </FilterBar>
 
     <!-- EVENT LIST -->
@@ -53,6 +62,14 @@
             <span :class="{ 'seats-warn': isAlmostFull(event) }">
               {{ event.registeredCount || 0 }}/{{ event.maxAttendees }} seats
             </span>
+            <span v-if="isSoldOut(event)" class="capacity-badge sold-out"
+              >Sold out</span
+            >
+            <span
+              v-else-if="isAlmostFull(event)"
+              class="capacity-badge limited"
+              >Limited tickets</span
+            >
           </template>
           <template v-else>Open</template>
         </span>
@@ -154,9 +171,15 @@ const formatLocation = (event) => {
   return event.location;
 };
 
+const isSoldOut = (event) => {
+  if (!event.maxAttendees) return false;
+  return (event.registeredCount || 0) >= event.maxAttendees;
+};
+
 const isAlmostFull = (event) => {
   if (!event.maxAttendees) return false;
-  return (event.registeredCount || 0) / event.maxAttendees > 0.8;
+  if (isSoldOut(event)) return false;
+  return (event.registeredCount || 0) / event.maxAttendees >= 0.8;
 };
 </script>
 
@@ -289,10 +312,29 @@ const isAlmostFull = (event) => {
   color: var(--text-faint);
   white-space: nowrap;
   padding-top: 2px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
 .seats-warn {
   color: var(--ember);
 }
+.capacity-badge {
+  font-size: 9px;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  padding: 1px 5px;
+  border: 1px dashed currentColor;
+  line-height: 1.5;
+  white-space: nowrap;
+}
+.capacity-badge.limited {
+  color: var(--ember);
+}
+.capacity-badge.sold-out {
+  color: var(--text-faint);
+  border-style: solid;
+}
 
 .event-badges {
   display: flex;
@@ -358,17 +400,43 @@ const isAlmostFull = (event) => {
 }
 
 
-.filter-toggle {
-  display: flex;
+.past-toggle {
+  display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   margin-left: auto;
+  font-family: "Commit Mono", monospace;
   font-size: 11px;
+  letter-spacing: 0.04em;
   color: var(--text-faint);
+  background: transparent;
+  border: 1px dashed var(--border);
+  padding: 4px 10px;
   cursor: pointer;
+  transition: all 0.15s;
 }
-.filter-toggle input {
-  accent-color: var(--candle-dim);
+.past-toggle:hover {
+  border-color: var(--candle-faint);
+  color: var(--text-dim);
+}
+.past-toggle.active {
+  border-color: var(--candle);
+  border-style: solid;
+  color: var(--candle);
+}
+.past-toggle-box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  border: 1px solid currentColor;
+  flex-shrink: 0;
+}
+.past-toggle-check {
+  font-size: 12px;
+  line-height: 1;
+  color: var(--candle);
 }
 
 .empty {