# TrueTraceShorts printable PDF checklists

Use this when building or revising TrueTraceShorts companion pages where the video is the hook and the website must give the viewer a practical take-away.

## User correction captured

Do **not** offer `.txt` checklist downloads. They feel low-trust and are not useful enough. Use a clean browser print/PDF flow instead.

## Content shape

Keep the visible short checklist, but add a richer optional checklist model for companion pages:

```ts
checklistDetails: z.array(z.object({
  title: z.string(),
  why: z.string().optional(),
  safer: z.string().optional(),
})).default([])
```

Rendering pattern:

- If `checklistDetails[]` exists, render those detailed items.
- Otherwise, fallback from `checklist[]` with `why = redFlag` and `safer = saferMove`.
- Each item should explain:
  1. what to check;
  2. why it matters;
  3. what safer action to take.
- For non-trivial scams, 3 terse bullets are usually too thin. Prefer 4–6 detailed items written for non-experts.

## UI / PDF flow

- Button label: `Save checklist as PDF`.
- Copy: tell users to use the browser print dialog and choose “Save as PDF”.
- Remove `Download checklist`, `data:text/plain`, `.txt`, and “small text file” language.
- In print CSS, hide navigation, video, related cards, decorative sections, action buttons, and the on-screen “Save as PDF” instruction panel.
- For companion detail pages, prefer a dedicated `.print-only` header inside `.printable-checklist` and mark the hero/action/general/related sections as `.no-print`; otherwise the browser can reserve page space for screen content and push the actual checklist to page 2.
- Print should be light, readable, and focused on the checklist; preserve numbering and avoid page-breaks inside checklist cards.

## CSS pitfall

When detailed checklist items use CSS grid, wrap item text in a child such as `.checklist-copy { min-width: 0; }` and use `grid-template-columns: 2rem minmax(0, 1fr)`. Without this, long text can wrap one word per line in the right column.

## Verification

- `npm run build` passes.
- Browser QA confirms no TXT link/copy remains:
  - no `Download checklist` text;
  - no `small text file` text;
  - no `.checklist-actions a` anchor for text download.
- Visual QA checks the detailed checklist wraps normally on desktop and mobile.
- Print/PDF QA checks the output is readable and does not include hero/video/navigation clutter.