Implement watch-event feature (017) with bookmark in RsvpBar

Add client-side watch/bookmark functionality: users can save events to
localStorage without RSVPing via a bookmark button next to the "I'm attending"
CTA. Watched events appear in the event list with a "Watching" label.
Bookmark is only visible for visitors (not attendees or organizers).

Includes spec, plan, research, tasks, unit tests, and E2E tests.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

specs/017-watch-event/issues.md

@@ -0,0 +1,72 @@
+# Visual Issues: Bookmark Icon on Event Detail Page
+
+**Date**: 2026-03-12
+**Branch**: `017-watch-event`
+**File**: `frontend/src/views/EventDetailView.vue`
+
+## Issue 1: Meta icons have hover effect
+
+**Problem**: The `<dt class="detail__meta-icon glass">` elements (date, location, attendees) change background/border color on hover. These are non-interactive `<dt>` elements — they should not react to hover.
+
+**Root cause**: The global `.glass:hover` rule in `frontend/src/assets/main.css:247`:
+```css
+.glass:hover:not(input):not(textarea):not(.btn-primary) {
+  background: var(--color-glass-hover);
+  border-color: var(--color-glass-border-hover);
+}
+```
+This applies to ALL `.glass` elements including the static meta icons. Scoped CSS overrides don't win because the global rule has equal or higher specificity.
+
+**Fix options**:
+- A) Remove `glass` class from meta icons, replicate the static glass styles in scoped CSS
+- B) Add `.glass--static` modifier that opts out of hover, use it on meta icons
+- C) Add `:not(.detail__meta-icon)` to the global rule (leaks component knowledge into global CSS — bad)
+
+Option A is cleanest — meta icons only need the static glass background, not the full interactive glass behavior.
+
+## Issue 2: Glow effect on bookmark is ugly
+
+**Problem**: The accent-colored `box-shadow` glow around the bookmark icon looks bad visually.
+
+**Current CSS**:
+```css
+.detail__bookmark {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 6px rgba(255, 112, 67, 0.15);
+}
+.detail__bookmark--filled {
+  box-shadow: 0 0 8px rgba(255, 112, 67, 0.3);
+}
+```
+
+**Fix**: Remove the glow entirely. Differentiate the bookmark from inert meta icons through a different, subtler approach — e.g. a slightly brighter/different border color, or rely solely on the cursor change and active/focus states.
+
+## Issue 3: Filled bookmark should use same icon color as unfilled
+
+**Problem**: Filled bookmark uses `color: var(--color-accent)` (orange), unfilled uses `color: var(--color-text-on-gradient)` (white/light). User wants both states to use the same color.
+
+**Current CSS**:
+```css
+.detail__bookmark--filled {
+  color: var(--color-accent);
+  border-color: var(--color-accent);
+}
+```
+
+**Fix**: Remove `color: var(--color-accent)` from `.detail__bookmark--filled`. The SVG `fill` attribute is already controlled by `:fill="eventIsStored ? 'currentColor' : 'none'"` in the template — so filled state will use `currentColor` (which inherits from the parent), and unfilled state will be outline-only. Both will be the same color (`--color-text-on-gradient`).
+
+## Issue 4: Icons not centered in their boxes
+
+**Problem**: SVGs inside the 36x36 glass boxes (both bookmark and meta icons) are shifted slightly to the right. The centering is off despite `display: flex; align-items: center; justify-content: center`.
+
+**Root cause**: SVGs rendered inline have implicit `line-height` whitespace. The `line-height: 0` fix was added to `.detail__bookmark` and `.detail__meta-icon` but the meta icon override may not be applying due to specificity issues with the `glass` class, or the SVGs themselves may need `display: block`.
+
+**Context**: The `<dt>` element defaults to `display: block` but the SVG inside is inline. The flex container should handle it, but browser rendering of inline SVGs inside flex containers can be inconsistent.
+
+**Fix options**:
+- Add `display: block` to the SVGs directly via a scoped rule: `.detail__meta-icon svg, .detail__bookmark svg { display: block; }`
+- Or ensure `line-height: 0` is actually applying (check specificity)
+
+## Screenshot reference
+
+User-provided screenshot showing the issues: `/home/nitrix/Pictures/Screenshot_20260312_215543.png`