Rebuild /whatsthat onto SPEC-wtc-rebuild.md: container-first hero, Tokyo-11 tokens

[WilfordGrimley]

Description

Full visual/layout rebuild of /whatsthat (What's That Card?) per
SPEC-wtc-rebuild.md, implementing the owner's three rulings on that
spec's open questions:

1. BurstSvg retired — the token-derived --wtc-reveal-glow field glow
   replaces the starburst animation entirely; the reveal reads through the
   mystery-card flip only (cardPanel.tsx: BurstSvg/HoverBurst/
   useStarburstFrame deleted).
2. Session counter kept — the quiet "N tagged this session" pill stays
   as the only reward surface (volume-rewarding, direction-neutral — no
   streak/score/confetti), incrementing on every real vote cast.
3. WD3 phone compaction accepted — the subject card compacts to a
   132px-wide horizontal layout below the hero's own 560px @container
   fold point; the open-ended shape (d) expands (dashed "tricky one"
   framing) rather than compacting further.

Spec sections → implementation

Spec section	Implementation
§0 Theme foundation	whatsthat.tsx's WtcTokenScope — page-scoped --body/--conf/--raised/.../--danger bridged from the (in-flight) Tokyo-11 --bs-*/--theme-* runtime vars, with literal Tokyo-11-value fallbacks so the page renders correctly today AND picks up the real tokens automatically once that branch merges (see "Train sequencing" below)
§1a/1b Token table	Same WtcTokenScope block + the five --wtc-* identity tokens (--wtc-field/--wtc-mystery-face/--wtc-mystery-glyph/--wtc-reveal-glow/--wtc-wordmark), all color-mix()-derived from --accent/--body/--conf — zero invented literals
§1c Per-element table	QuestionFeed.tsx's new styled primitives (WtcHead/WtcHero/Subject/QPanel/ShapePill/Btn/ActionGrid/SuggestedCard/CandidateGrid/NegWrap/OpenWrap/TriStateChip/etc) — every value copied verbatim from the table
§2 Question-shape inventory	All 8 shapes (a–L3) render from the same QuestionFeedItem.type, visually distinguished per WD7 (shapepill variant + frame colour)
§3 Container-first layout	One @container-driven hero (WtcHero, container-type: inline-size); HeroGrid's 768px breakpoint, MobileButtonRow/MobileCandidateScroller/MobileChipRow, and Level2NarrowGrid all deleted — replaced by flex-wrap + clamp() + auto-fill/auto-fit grids. The one permitted viewport media query (.wtc-head column-reorder below 520px) is structural only
§4 react-bootstrap primitives	No new dependency; AttributeChipPanel/ArtistVotePicker/QueueTagQuestion/NoMatchReasonStrip unforked, CandidateGrid is the one new shared layout primitive
ANNEX A (mix-logging seam)	Noted, out of scope — question_feed.py's serve-mix ordering is a backend concern; this PR only renders what's served
ANNEX B (survivor_pks/#433)	Shape (d) open-ended framing applies whenever an identify_printing item has zero candidates — degrades gracefully with no new backend dependency
ANNEX C (reduced-motion)	Mystery-card reveal fade unchanged (still reduced-motion-gated); confirm-lands feedback fades in 0.2s, instant under reduced motion; reveal glow and solved affordance are static (no animation)

Train sequencing (deviation, reasoned)

This branch is cut off current master, which does not yet carry the
Tokyo-11 token layer (that branch, tokyo-11-retheme, is in-flight and
expected to land before this PR per the orchestrator's train note).
Every inherited token in WtcTokenScope is var(--runtime-name, <exact Tokyo-11 hex>) — once Tokyo-11 merges, the real :root custom
properties take over automatically with zero code change here. Measured
live (see Verification): --bs-primary/--bs-success/--bs-body-color
already exist pre-merge (Superhero's own values), so 3 colour tokens
render with Superhero's palette today and will self-correct to the exact
Tokyo-11 spec values the moment that branch merges — not a defect, a
sequencing artifact. All 5 genuinely-new --theme-* tokens (accent,
raised-bg, divider, muted, btn-ink, radii) already fall back to my
literal Tokyo-11 values correctly, since nothing else defines them yet.

Other deviations (reasoned)

• Mystery-card glyph: the old whatsthat-mark.svg gold-gradient
  mascot asset can't be retinted onto --wtc-mystery-glyph (its fill is
  baked into the SVG file) — replaced with a plain, token-coloured ?
  text glyph (data-testid="mystery-card-glyph").
• Wordmark: WhatsThatWords.tsx drops the sliced-SVG animated
  pop-in sequence entirely (ANNEX C's animation inventory doesn't list
  it) in favour of a plain, static, single-tree <h1> — also retires the
  WideWordmark/NarrowWordmark viewport fork per the container-first
  policy. whatsthat.tsx's VisuallyHiddenHeading is retired alongside
  it (this <h1> is now the page's one real, visible heading).
• Card pulse: CardPulseWrapper/wtcCardPulse (synced to the now-
  retired wordmark pop) removed — not in ANNEX C's animation inventory.
• Shape (d) open-ended: no speculative search/typeahead field was
  added (the mockup shows one, but no backend search-printings endpoint
  exists — API surface unchanged per the task's own critical constraint).
  The existing Level 2 candidate-grid/"None of these"/Skip flow renders
  inside the dashed "tricky one" framing instead.
• ChipCard.tsx gains an additive, optional variant prop
  ("accent" | "danger", default unchanged) so NoMatchReasonStrip's
  reason chips can carry the WTC quick-negative danger frame without
  touching ReportCardPanel.tsx's own unrelated use of the component.
• QueueTagQuestion.tsx/ArtistVotePicker.tsx: left untouched per
  spec §4 ("no structural change; inherit tokens") — their Bootstrap
  Button variants pick up Tokyo-11 automatically once that theme lands,
  no page-specific work needed.

Self-verification (measured, not by inspection)

Computed-style delta vs the spec's binding token table, extracted at
1400px and 390px via getComputedStyle() on 8 representative elements
(wordmark, solved pill, subject card, shapepill, btn-primary, btn-secondary,
btn-ghost, suggested card) covering colour + sizing:

• Sizing/spacing/radius: 0 mismatches — every font-size/padding/
  border-radius/min-height value matches the spec exactly at both
  widths (wordmark clamp(26px,4.4cqi,44px) measured 26px@390 / 44px@1400
  exactly; .btn base 44px/15px/600/6px 16px; .btn.big 17px/800/
  10px 20px; solved pill 5px 12px/12px/--r-pill; all radii 6px/
  8px/10px exact).
• Colour: 3 mismatches, all attributable to the Tokyo-11 train-
  sequencing gap (see above) — --primary/--success/--text render
  Superhero's pre-existing values instead of the Tokyo-11 spec hex, since
  --bs-primary/--bs-success/--bs-body-color are already emitted by
  the current theme and my fallback never activates for those three. All
  5 new --theme-*-derived tokens (--accent, --wtc-* identity colours,
  --btn-ink, --divider, --raised, --muted) match the spec exactly,
  confirmed live (e.g. wordmark color: rgb(187,154,247) = #bb9af7
  exactly).

Screenshots — all 8 question shapes × {1400px, 390px} captured against
this build and visually diffed against wtc-mockup.html (subject card
compaction, danger-red quick-negative frame, dashed open-ended frame,
Level 3 follow-up chips all match). Screenshots themselves are not
committed (build artifacts, available on request); the binding spec +
mockup HTML they were diffed against is now permanently in-repo at
docs/proposals/mockups/wtc-rebuild/ (landed via #441, concurrently
with this PR — rebased on top; this PR adds an AMENDMENTS block to that
spec recording the three owner rulings above).

Checklist

• I have installed pre-commit and installed the hooks with pre-commit install before creating any commits.
• I have updated any related tests for code I modified or added new tests where appropriate — QuestionFeed.test.tsx (jest, 14/14 passing), QuestionFeedResponsive.spec.ts (substantially rewritten: kept/adapted still-true invariants, dropped 10 tests guarding now-retired mechanisms with inline justification, added new coverage for container folding at 390/768/1400, shape-b→d fallback, WD3 compaction, and the session counter), WhatsThatWordsAnimation.spec.ts (re-purposed for the retired wordmark animation → ANNEX C reduced-motion coverage), WhatsThatPWA.spec.ts (theme-color assertion updated). All 65 jest suites (573 tests) and the full affected Playwright surface (55 tests across QuestionFeed.spec.ts/QuestionFeedResponsive.spec.ts/WhatsThatWordsAnimation.spec.ts/WhatsThatPWA.spec.ts/NoMatchReasonStrip.spec.ts/ModerationTab.spec.ts/ModerationQueue.spec.ts) pass at 4 workers.
• I have manually tested my changes as follows:
  • Ran a full local next build (compiles clean) and drove the rebuilt page through a local dev server via Playwright across all 8 question shapes at 1400px and 390px, screenshotting each against wtc-mockup.html.
  • Verified tsc --noEmit clean, prettier --check clean, eslint clean (only pre-existing no-img-element warning class, present elsewhere in the codebase too).
• I have updated any relevant documentation or created new documentation where appropriate — docs/features/printing-tags.md's "Frontend architecture" section updated in place with a SUPERSEDED note (this doc's own established convention) pointing to the new spec and summarizing what changed; the detailed pre-rebuild "quiz-reveal hero"/starburst/gold-button narrative is kept for history. docs/proposals/mockups/wtc-rebuild/SPEC-wtc-rebuild.md (landed via Commit 4 BINDING design specs into docs/proposals/mockups/ for durability #441) gains an AMENDMENTS block recording the three owner rulings.

Wiki: /whatsthat is user-facing and was rebuilt — the wiki's
What's That Card? page needs a screenshot/description refresh to match
the new Tokyo-11 look before merge (not done in this PR — flagging per
the wiki-maintenance convention).