docs: mark ui-ux-alignment plan complete

docs/superpowers/plans/2026-06-20-ui-ux-alignment.md

@@ -2,6 +2,8 @@
 
 > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
 
+**Status:** ✅ Complete (2026-06-20) — also extended to story map markers (white diamond) and story card flash highlight.
+
 **Goal:** Unify three micro-interaction patterns across the site: back navigation pills, card hover lift, and a map-to-card flash highlight.
 
 **Architecture:** CSS-first — shared `.back-pill` class drives visual consistency; entry card markup is collapsed from a two-level `article > a` to a flat `<a>` to align hover targets across all three card types; map flash is a short CSS keyframe triggered by a JS-added class.
@@ -41,7 +43,7 @@
 **Interfaces:**
 - Produces: `.back-pill` class (surface pill), `.entry-card.is-highlighted` animation, uniform hover lift on `.trip-card:hover`, `.entry-card:hover`, `.story-card:hover`
 
-- [ ] **Step 1: Add `.back-pill` surface pill class**
+- [x] **Step 1: Add `.back-pill` surface pill class**
 
 Find the `/* ── Back to top pill ──` section (around line 1217). Insert the following block immediately **before** it:
 
@@ -65,7 +67,7 @@ Find the `/* ── Back to top pill ──` section (around line 1217). Insert
 .back-pill:hover { border-color: var(--color-accent); color: var(--color-accent); }
 ```
 
-- [ ] **Step 2: Remove the duplicate `.story-escape` block**
+- [x] **Step 2: Remove the duplicate `.story-escape` block**
 
 Around line 958 there is a `/* ── Story page escape link ──` section with a `.story-escape` rule that is overridden later by the story-section block. Remove this entire section:
 
@@ -92,7 +94,7 @@ Around line 958 there is a `/* ── Story page escape link ──` section wit
 
 The authoritative `.story-escape` definition remains in the `/* ── Story pages ──` section (~line 1056).
 
-- [ ] **Step 3: Add uniform card hover lift + fix story-card transition**
+- [x] **Step 3: Add uniform card hover lift + fix story-card transition**
 
 Find the `.trip-card:hover` rule (in `/* ── Past trips archive ──`). After the existing `.trip-card:hover` block, add:
 
@@ -120,7 +122,7 @@ Then find `.story-card` in the `/* ── Stories listing ──` section and ad
 }
 ```
 
-- [ ] **Step 4: Add map flash keyframe**
+- [x] **Step 4: Add map flash keyframe**
 
 At the end of the `/* ── Feed ──` section (after `.entry-card` and related rules, around line 210), add:
 
@@ -135,7 +137,7 @@ At the end of the `/* ── Feed ──` section (after `.entry-card` and relat
 }
 ```
 
-- [ ] **Step 5: Verify no JS errors on the site**
+- [x] **Step 5: Verify no JS errors on the site**
 
 ```bash
 npx playwright test --project=chromium tests/ui/maps.spec.js -g "M1:"
@@ -143,7 +145,7 @@ npx playwright test --project=chromium tests/ui/maps.spec.js -g "M1:"
 
 Expected: PASS (map page loads without errors — confirms CSS is valid).
 
-- [ ] **Step 6: Commit**
+- [x] **Step 6: Commit**
 
 ```bash
 git add user/themes/intotheeast/css/style.css
@@ -160,7 +162,7 @@ git commit -m "feat: add back-pill class, card hover lift, flash keyframe; remov
 **Interfaces:**
 - Consumes: `.back-pill` class from Task 1
 
-- [ ] **Step 1: Write the failing test**
+- [x] **Step 1: Write the failing test**
 
 Add to `tests/ui/stories.spec.js`:
 
@@ -178,7 +180,7 @@ test('S7: story body back link has back-pill class', async ({ page }) => {
 });
 ```
 
-- [ ] **Step 2: Run test to verify it fails**
+- [x] **Step 2: Run test to verify it fails**
 
 ```bash
 npx playwright test --project=chromium tests/ui/stories.spec.js -g "S7:"
@@ -186,7 +188,7 @@ npx playwright test --project=chromium tests/ui/stories.spec.js -g "S7:"
 
 Expected: FAIL — "locator('.story-footer .back-pill')" found 0 elements.
 
-- [ ] **Step 3: Apply `.back-pill` to the story footer back link + fix `.story-footer a` conflict**
+- [x] **Step 3: Apply `.back-pill` to the story footer back link + fix `.story-footer a` conflict**
 
 In `story.html.twig`, the story footer currently reads:
 
@@ -222,7 +224,7 @@ Then in `style.css`, find `.story-footer a` and add `:not(.back-pill)` so it no
 }
 ```
 
-- [ ] **Step 4: Run test to verify it passes**
+- [x] **Step 4: Run test to verify it passes**
 
 ```bash
 npx playwright test --project=chromium tests/ui/stories.spec.js -g "S7:"
@@ -230,7 +232,7 @@ npx playwright test --project=chromium tests/ui/stories.spec.js -g "S7:"
 
 Expected: PASS.
 
-- [ ] **Step 5: Run full stories suite to check no regressions**
+- [x] **Step 5: Run full stories suite to check no regressions**
 
 ```bash
 npx playwright test --project=chromium tests/ui/stories.spec.js
@@ -238,10 +240,10 @@ npx playwright test --project=chromium tests/ui/stories.spec.js
 
 Expected: All S1–S7 pass.
 
-- [ ] **Step 6: Commit**
+- [x] **Step 6: Commit**
 
 ```bash
-git add user/themes/intotheeast/templates/story.html.twig tests/ui/stories.spec.js
+git add user/themes/intotheeast/templates/story.html.twig user/themes/intotheeast/css/style.css tests/ui/stories.spec.js
 git commit -m "feat: apply back-pill class to story footer back link"
 ```
 
@@ -257,7 +259,7 @@ git commit -m "feat: apply back-pill class to story footer back link"
 **Interfaces:**
 - Consumes: `.back-pill` class from Task 1
 
-- [ ] **Step 1: Write the failing test**
+- [x] **Step 1: Write the failing test**
 
 Add to `tests/ui/dailies.spec.js`:
 
@@ -279,7 +281,7 @@ test('T6: entry page has fixed back pill at top and back pill in footer', async
 });
 ```
 
-- [ ] **Step 2: Run test to verify it fails**
+- [x] **Step 2: Run test to verify it fails**
 
 ```bash
 npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T6:"
@@ -287,7 +289,7 @@ npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T6:"
 
 Expected: FAIL — `.entry-back-fixed` not found.
 
-- [ ] **Step 3: Add fixed top back pill to entry template**
+- [x] **Step 3: Add fixed top back pill to entry template**
 
 In `entry.html.twig`, the content block currently starts with `<article class="entry">`. Add the fixed pill immediately before it:
 
@@ -297,7 +299,7 @@ In `entry.html.twig`, the content block currently starts with `<article class="e
 <article class="entry">
 ```
 
-- [ ] **Step 4: Replace footer teal text link with `.back-pill`**
+- [x] **Step 4: Replace footer teal text link with `.back-pill`**
 
 The current entry footer (around line 124 of entry.html.twig):
 
@@ -315,7 +317,7 @@ Replace with:
     </footer>
 ```
 
-- [ ] **Step 5: Add `.entry-back-fixed` positioning to CSS**
+- [x] **Step 5: Add `.entry-back-fixed` positioning to CSS**
 
 In `style.css`, in the `/* ── Single entry ──` section, add after the existing `.entry-hero` rules:
 
@@ -328,7 +330,7 @@ In `style.css`, in the `/* ── Single entry ──` section, add after the ex
 }
 ```
 
-- [ ] **Step 6: Run test to verify it passes**
+- [x] **Step 6: Run test to verify it passes**
 
 ```bash
 npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T6:"
@@ -336,7 +338,7 @@ npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T6:"
 
 Expected: PASS.
 
-- [ ] **Step 7: Run full dailies suite to check no regressions**
+- [x] **Step 7: Run full dailies suite to check no regressions**
 
 ```bash
 npx playwright test --project=chromium tests/ui/dailies.spec.js
@@ -344,7 +346,7 @@ npx playwright test --project=chromium tests/ui/dailies.spec.js
 
 Expected: T1–T6 all pass.
 
-- [ ] **Step 8: Commit**
+- [x] **Step 8: Commit**
 
 ```bash
 git add user/themes/intotheeast/templates/entry.html.twig user/themes/intotheeast/css/style.css tests/ui/dailies.spec.js
@@ -365,7 +367,7 @@ Collapse the two-level `<article class="entry-card"><a class="entry-card-inner">
 **Interfaces:**
 - Produces: `.entry-card` is now an `<a>` element; `id`, `data-type`, `data-lat`, `data-lng` attributes remain on the card root; `.entry-card-inner` class is eliminated
 
-- [ ] **Step 1: Update T2 test selectors before touching the templates**
+- [x] **Step 1: Update T2 test selectors before touching the templates**
 
 In `tests/ui/dailies.spec.js`, find the T2 test and replace:
 
@@ -403,7 +405,7 @@ const olderIdx = await olderCard.evaluate(el => {
 });
 ```
 
-- [ ] **Step 2: Run T2 to verify it fails (not yet refactored)**
+- [x] **Step 2: Run T2 to verify it fails (not yet refactored)**
 
 ```bash
 npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T2:"
@@ -411,7 +413,7 @@ npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T2:"
 
 Expected: FAIL — `.entry-card[href*="..."]` finds 0 elements (the `href` is on the inner `<a>`, not the article).
 
-- [ ] **Step 3: Refactor journal entry card markup in `trip.html.twig`**
+- [x] **Step 3: Refactor journal entry card markup in `trip.html.twig`**
 
 Find the journal card block:
 
@@ -441,7 +443,7 @@ Replace with:
                     </a>
 ```
 
-- [ ] **Step 4: Refactor story-in-feed card markup in `trip.html.twig`**
+- [x] **Step 4: Refactor story-in-feed card markup in `trip.html.twig`**
 
 Find the story-in-feed card block:
 
@@ -462,7 +464,7 @@ And its closing tags (currently `</a></article>`) become:
                     </a>
 ```
 
-- [ ] **Step 5: Migrate `.entry-card-inner` CSS rules to `.entry-card`**
+- [x] **Step 5: Migrate `.entry-card-inner` CSS rules to `.entry-card`**
 
 In `style.css`, find the `/* ── Feed ──` section. Currently:
 
@@ -505,7 +507,7 @@ Then find the two `.entry-card-inner:hover` rules and rename them to `.entry-car
 .entry-card:hover .entry-title { color: var(--color-accent); }
 ```
 
-- [ ] **Step 6: Run T2 to verify it passes**
+- [x] **Step 6: Run T2 to verify it passes**
 
 ```bash
 npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T2:"
@@ -513,7 +515,7 @@ npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T2:"
 
 Expected: PASS.
 
-- [ ] **Step 7: Run full test suites to check no regressions**
+- [x] **Step 7: Run full test suites to check no regressions**
 
 ```bash
 npx playwright test --project=chromium tests/ui/dailies.spec.js tests/ui/trip-filter.spec.js tests/ui/maps.spec.js
@@ -521,7 +523,7 @@ npx playwright test --project=chromium tests/ui/dailies.spec.js tests/ui/trip-fi
 
 Expected: T1–T6, F1–F7, M1–M6 all pass.
 
-- [ ] **Step 8: Commit**
+- [x] **Step 8: Commit**
 
 ```bash
 git add user/themes/intotheeast/templates/trip.html.twig user/themes/intotheeast/css/style.css tests/ui/dailies.spec.js
@@ -539,7 +541,7 @@ git commit -m "refactor: collapse entry card article+a to flat <a>, unify hover
 **Interfaces:**
 - Consumes: `.entry-card.is-highlighted` CSS animation from Task 1; `id="entry-{{ slug }}"` on `<a class="entry-card">` from Task 4
 
-- [ ] **Step 1: Write the failing test**
+- [x] **Step 1: Write the failing test**
 
 Add to `tests/ui/maps.spec.js`:
 
@@ -559,7 +561,7 @@ test('M7: clicking map marker briefly highlights the corresponding entry card',
 });
 ```
 
-- [ ] **Step 2: Run test to verify it fails**
+- [x] **Step 2: Run test to verify it fails**
 
 ```bash
 npx playwright test --project=chromium tests/ui/maps.spec.js -g "M7:"
@@ -567,7 +569,7 @@ npx playwright test --project=chromium tests/ui/maps.spec.js -g "M7:"
 
 Expected: FAIL — `.entry-card.is-highlighted` not found.
 
-- [ ] **Step 3: Update the marker click handler in `trip.html.twig`**
+- [x] **Step 3: Update the marker click handler in `trip.html.twig`**
 
 Find the existing marker click handler in `trip.html.twig`:
 
@@ -592,7 +594,7 @@ Replace with:
         });
 ```
 
-- [ ] **Step 4: Run test to verify it passes**
+- [x] **Step 4: Run test to verify it passes**
 
 ```bash
 npx playwright test --project=chromium tests/ui/maps.spec.js -g "M7:"
@@ -600,7 +602,7 @@ npx playwright test --project=chromium tests/ui/maps.spec.js -g "M7:"
 
 Expected: PASS.
 
-- [ ] **Step 5: Run full maps suite**
+- [x] **Step 5: Run full maps suite**
 
 ```bash
 npx playwright test --project=chromium tests/ui/maps.spec.js
@@ -608,7 +610,7 @@ npx playwright test --project=chromium tests/ui/maps.spec.js
 
 Expected: M1–M7 all pass.
 
-- [ ] **Step 6: Run all affected suites for final check**
+- [x] **Step 6: Run all affected suites for final check**
 
 ```bash
 npx playwright test --project=chromium tests/ui/dailies.spec.js tests/ui/trip-filter.spec.js tests/ui/maps.spec.js tests/ui/stories.spec.js
@@ -616,7 +618,7 @@ npx playwright test --project=chromium tests/ui/dailies.spec.js tests/ui/trip-fi
 
 Expected: All pass.
 
-- [ ] **Step 7: Commit**
+- [x] **Step 7: Commit**
 
 ```bash
 git add user/themes/intotheeast/templates/trip.html.twig tests/ui/maps.spec.js