fix(countdown): stop the pinned group header clipping its own outline

The sticky header was offset by minus the row margin, on the assumption
that sticky insets constrain the margin box. They do not, so the header
sat 2px above the scroll port and lost its top 2px to the overflow. That
is exactly the width of the outline marking a group as active, so the
top edge of the ring disappeared as soon as the header pinned.

Anchoring at 0 leaves the header flush with no clipping. The follow
offset now adds a full row gap rather than a single margin, so the
running event lines up under the header on the same rhythm as every
other row.

The operator keeps its negative inset: its list carries a top padding
which the header has to cover, and there is no clipping to avoid since
the offset only cancels that padding.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GjX7D56AW8cL3FXjvtnjtL

apps/client/src/views/countdown/Countdown.scss

@@ -114,8 +114,7 @@ $item-height: 3.5rem;
   /* scoped to the section, the select view shows the same cards in a flat list */
   .sub-section .sub--group {
     position: sticky;
-    /* sticky insets constrain the margin box, negate the row margin so the header sits flush */
-    top: -2px;
+    top: 0;
     z-index: 1;
   }
 

apps/client/src/views/countdown/CountdownSubscriptions.tsx

@@ -59,8 +59,8 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
   // Measured between 91px and 171px, so a constant would leave the running event behind the header.
   const getStickyOffset = useCallback(() => {
     const header = stickyHeaderRef.current;
-    // account for the row margin, so that the rows do not touch
-    return header ? header.offsetHeight + 2 : 0;
+    // add a row gap, the 2px margins of the header and of the running event
+    return header ? header.offsetHeight + 4 : 0;
   }, []);
 
   const scrollToComponent = useFollowComponent({