ToC CTA on every strategy card, and the floating chrome finally clears the header in dark mode
The slot-rating matrix that already drove Play-UI work on other dididecks sites is now one click from every strategy card. While wiring it up, two long-standing shell chrome bugs surfaced — the pagination pill overlapping the header, and unreadable dark-mode colors — and got fixed at the root.
Michael StatonMusic Editoraugmented with Claude Code on Claude Sonnet 5ToC on every card, and the chrome finally behaves in dark mode
Why Care?
Every other dididecks site (chroma, calmstorm) builds decks by recreating a known set of slides — so the slot-rating ToC has always had a stable list to rate against from day one. Reach's seven strategy decks were improvised from scratch instead, with no fixed slide list until the citation-sourcing pass landed. Now that it has, it's the right moment to start rating slots and scaffolding Play-UI the same way every other deck site does.
What's New?
A "ToC" pill on every strategy card, next to "1-Pager," linking straight to
/toc/{deck}— the dual-surface (Scroll + Play) rating matrix. Dev-only by default: the page is raw internal tooling, and the hub now shares one gate between the team and the stakeholder, so it stays off the deployed site.workforce-developmentregistered in the slot matrix. It was the one deck added after the others and had noslides.tsentry — its/tocpage would have shown "no slot registry found." Fixed.First real ratings landed — Rural Income (11 slots) and Literacy & Numeracy (10 slots) both have live founder ratings in
data/audits/slides.jsonnow, the first use of this workflow on this site.Two shell chrome bugs fixed, both surfaced by actually using the overlay in the deployed layout:
The floating slide-pagination pill and mode toggle were pinned
top: 1remwith no awareness of the site's own sticky header (h-12, 3rem) — they sat inside the header instead of below it.Dark mode made the pagination pill nearly unreadable — a border token darker than the surface it outlined, on Reach's purple-on-near-black palette.
A first-pass exploration on getting these decks into Google Slides (
context-v/explorations/Exporting-Strategy-Decks-to-Google-Slides.md) — short version: PNG screenshots assembled into a.pptx, not SVG, and it needs Play-UI to exist first for a clean result. The ToC/scaffold workflow above is literally step one of that plan.
How it Works
The header-clearance fix was one line — --ddd-paginator-top and
--ddd-mode-toggle-top are consumer-overridable by design, just never
overridden here. The dark-mode fix took two tries to actually land, and the
reason is worth recording: the shell's chrome-tokens.css sets
:root { --ddd-chrome-bg: var(--color-surface) }, and it loads via a
<style> tag after this site's deck-primitives.css in the page (Vite
resolves the shell's own component-scoped styles later in the import graph).
A same-specificity override ([data-mode="dark"] { --ddd-chrome-bg: ... })
was silently losing that tie on load order alone — the fix never reached the
browser. Bumping to :root[data-mode="dark"] (higher specificity) wins
regardless of load order. Verified this time with an actual headless-browser
computed-style check rather than trusting the CSS on paper — the first fix
looked correct and wasn't.
What's Next
Go rate the remaining five decks' slots the same way Rural Income and Literacy & Numeracy just got rated, scaffolding Play-UI for anything ranked urgent-redo or could-be-better. That work is the actual prerequisite for the Google Slides export path — not a side quest.