<!-- CANONICAL page-level skeleton for /changes/ pages.
     Included by: generate-changes-page.md, apply.md. The per-ITEM
     markup lives in
     changes-item-contract.md; THIS file is everything around the items.
     History: apply-generated pages once referenced these rules by name
     instead of inlining them, and the result shipped embedded in the
     site's layout (navbar + footer + cookie banner over the decision
     bars, no h2/meta grouping). Prompts are closed worlds — a rule that
     isn't included doesn't exist. -->

### ⚠️ NORMATIVE — the /changes/ PAGE skeleton (applies to every generation AND regeneration, from any prompt)

- **Self-contained — never extend the site's layout.** No site navbar,
  footer, cookie banner, analytics overlays, or theme imports. All CSS
  inline in one `<style>` block (don't rely on the site's utility
  classes — Tailwind etc. may be purged for this page). Anything the
  site injects globally (cookie consent!) must not be able to cover the
  review UI. One file, trivially deletable — `/pinappai:remove` and
  `/pinappai:reset-project` assume deleting it leaves zero traces.
- **noindex + no sitemap.** `<meta name="robots" content="noindex,nofollow">`;
  never add the page to sitemap generation.
- **Top-of-page furniture, in order:** yellow "TEMPORARY FILE — delete
  before merging" banner → `<h1>` → a visible
  `Generated: YYYY-MM-DD HH:mm TZ` stamp (real wall-clock time of THIS
  run — it's the page's version marker) → one-line intro. Any count you
  claim in the h1/intro ("N changes") must equal the actual
  `.pp-change-item` count on the page — no quality buzzwords.
- **Group items by PAGE:** each affected page gets
  `<h2 id="{page-slug}">{page-url}</h2>` followed by a
  `<div class="meta">` line naming the source **Files:** in `<code>`
  (and the spec/doc link when one exists). Items for that page go under
  its h2. Single-page runs still emit the h2 + meta — the widget parser
  and the markdown export both fall back to them for source-file
  context.
- **`.toc` with anchor links** to each `<h2>` when there is more than
  one page section.
- **The PinAppAI widget snippet, immediately before `</body>` — the page
  is DEAD without it.** No snippet → no decision bars, no summary panel,
  no item registration; the page renders as inert text (shipped exactly
  this way once — 2026-07-05 regression). Exact shape:

  ```html
  <script src="<API_BASE>/widget.js" data-project="<PROJECT_KEY>" defer></script>
  ```

  `<API_BASE>` defaults to `https://api.pinappai.com`; `<PROJECT_KEY>`
  is the project's `pk_…` value — take it from the `get_project`
  response for the resolved project (don't echo it in chat; substitute
  it in the file write). Keep `defer`.

**Self-check before you ship the page** (in addition to the per-item
contract's own list): view it mentally as the reviewer will — no site
chrome, banner + stamp at top, every item under a page `<h2>`, the
widget `<script>` present before `</body>`, and deleting the one file
removes the whole surface.
