fix(brainstorming): add a safe canvas for multi-element card mockups

[dajiaohuang]

Who is submitting this PR? (required)

Field	Value
Your model + version	OpenAI GPT-5 (exact served model ID is not exposed by Codex)
Harness + version	Codex desktop (build ID is not exposed to the task)
All plugins installed	Browser 26.721.41059; Chrome 26.721.41059; Documents 26.812.11052; Figma 2.0.17; Gmail 0.1.8; Google Drive 0.1.11; Hugging Face 1.0.0; Investment Banking 0.1.29; PDF 26.812.11052; Presentations 26.812.11052; Public Equity Investing 0.1.31; Sites 0.1.31; Spreadsheets 26.812.11052; Template Creator 26.812.11052; Visualize 1.0.15; local RepoStew and personal skills
Human partner who reviewed this diff	@dajiaohuang — reviewed the complete two-file diff and approved submission; later authorized ready-for-review conversion under the direct-PR gate

What problem are you trying to solve?

Issue #2043 reports a real brainstorming-companion failure: placing a header,
toolbar, and body directly inside the documented .card-image helper makes them
horizontal flex items. In the reported screen a 606px-wide card produced 812px
of content, and the card silently clipped the overflow. This made a syntactically
valid visual decision screen visibly broken with no failure signal before it was
shown to the user.

What does this PR change?

This adds a full-size .card-canvas helper that stacks multi-section preview
content vertically while preserving .card-image's existing single-object
centering behavior. The visual companion guide now documents the contract and
uses the helper in a realistic dashboard-card example.

Is this change appropriate for the core library?

Yes. The failure is in the shared brainstorming frame and affects any project
that uses multi-section visual cards. The fix is project-, team-, harness-, and
service-independent, adds no dependency, and keeps existing card markup working.

What alternatives did you consider?

I considered changing .card-image itself to flex-direction: column. That is
smaller, but it silently changes existing fragments that intentionally place
multiple direct children in a horizontal preview. An explicit inner helper is
backward-compatible and gives multi-section mockups a clear layout contract.

I also considered a render-preflight requirement and automated browser fixture.
Those are broader workflow/test-infrastructure changes; this PR keeps the fix
focused on the reproduced layout defect without adding dependencies.

Does this PR contain multiple unrelated changes?

No. The CSS helper and its documentation example are one atomic fix: the helper
defines the safe layout, and the guide makes agents use it.

Existing PRs

• I have reviewed all open AND closed PRs for duplicates or prior art
• Related PRs: none found

Searches for #2043, card-image, card canvas, and mockup overflow returned
no open or closed PRs immediately before submission.

Environment tested

Harness (e.g. Claude Code, Cursor)	Harness version	Model	Model version/ID
Codex desktop	Build ID not exposed to task	OpenAI GPT-5	Exact served ID not exposed by Codex

New harness support (required if this PR adds a new harness)

Not applicable — this PR does not add or modify harness support.

Evaluation

• Initial prompt: audit obra/superpowers, revisit prior maintainer questions,
  and prepare a tested Draft route for still-valid work.
• Post-change eval sessions: 2 — one live browser layout evaluation and one fresh-
  context documentation pressure test.
• Before: a fresh agent naturally placed .mockup-header, .mock-nav, and
  .mockup-body directly in .card-image; computed layout was a row, with child
  left positions 333, 461, and 681.
• After: the fresh agent naturally used .card-canvas. In the live frame it
  filled the 1199×749 image area, computed to flex-direction: column, placed the
  sections at top positions 123, 158, and 213, and kept scrollWidth equal to
  clientWidth (1199).
• Relevant automated tests: server.test.js passed 33/33 and
  branding.test.js passed 7/7 under Ubuntu 24.04 WSL. On Windows, fixed
  port 3334 is reserved by the host exclusion range 3323–3422, so the server
  suite could not bind there; rerunning the unchanged tests in WSL passed.

Rigor

• If this is a skills change: I used superpowers:writing-skills and
  completed adversarial pressure testing (results above)
• This change was tested adversarially, not just on the happy path
• I did not modify carefully-tuned content (Red Flags table,
  rationalizations, "human partner" language) without extensive evals
  showing the change is an improvement

Human review

• A human has reviewed the COMPLETE proposed diff before submission