Reset /games/index.html to the new shared theme system and lock the updated shared-header rules.

Add Toolbox Aid as the first external menu item.
Keep the shared header full width regardless of content.
Preserve shared header sourcing under src/engine/theme.

PR: BUILD_PR_STYLE_04_GAMES_INDEX_RESET_AND_HEADER_LOCKS

Author: DavidQ

docs/dev/reports/header_lock_carry_forward_notes.txt

@@ -0,0 +1,11 @@
+Header lock carry-forward notes
+
+Locked for implementation:
+- first menu item = Toolbox Aid external link
+- external link standard = class is-external + target _blank + rel noopener noreferrer
+- header stretches full width regardless of content
+- no centered container may constrain the header
+- header image preserves aspect ratio
+
+Execution slice:
+- reset /games/index.html only

docs/operations/dev/codex_commands.md

@@ -2,35 +2,27 @@ MODEL: GPT-5.4-codex
 REASONING: high
 
 COMMAND:
-Create BUILD_PR_STYLE_02_INDEX_IMPLEMENTATION_AND_ROADMAP_EXPANSION as one focused, testable PR.
+Create BUILD_PR_STYLE_04_GAMES_INDEX_RESET_AND_HEADER_LOCKS as one focused, testable PR.
 
 Rules:
 - one PR purpose only
-- add to MASTER_ROADMAP_STYLE only; do not remove roadmap items
-- no big-bang migration
-- do not use existing HTML-JavaScript-Gaming styling as the base
-- derive the new style baseline from Toolbox Aid
+- use the established shared theme direction
+- do not use legacy project styling as the baseline
 - no embedded <style> in HTML
 - no inline style=""
 - no JS-generated styling
-- theme stays under src/engine/theme
-- keep HTML-page JS minimal
+- keep theme under src/engine/theme
 
 Required work:
-1. Update docs/dev/roadmaps/MASTER_ROADMAP_STYLE.md with the bundled additive items.
-2. Create the theme foundation files under src/engine/theme:
-   - main.css
-   - header.css
-   - nav.css
-   - layout.css
-   - pages.css
-   - any additional theme file only if justified
-3. Pull the Toolbox Aid header into src/engine/theme/toolboxaid-header.html with only:
-   - tagline changed to HTML-JavaScript Gaming
-   - menu changed to Home / Games / Samples / Tools
-4. Extract the minimum required CSS so the header renders correctly without legacy dependencies.
-5. Reset /index.html onto the new theme and shared header.
-6. Remove old embedded/page-local styling dependencies from /index.html.
-7. Keep the implementation surgical and testable.
+1. Reset `/games/index.html` to the new shared style system.
+2. Use the shared header from `src/engine/theme/toolboxaid-header.html`.
+3. Update the shared header menu so the FIRST item is:
+   <li class="menu-item">
+     <a href="https://toolboxaid.com" class="is-external" target="_blank" rel="noopener noreferrer">Toolbox Aid</a>
+   </li>
+4. Ensure header styling keeps the header full width regardless of content.
+5. Ensure the header image area preserves aspect ratio and is not constrained by a centered content wrapper.
+6. Add or keep shared external-link styling under theme CSS if useful.
+7. Keep `/games/index.html` structurally close to `/index.html` and `/samples/index.html`.
 8. Package to:
-   <project folder>/tmp/BUILD_PR_STYLE_02_INDEX_IMPLEMENTATION_AND_ROADMAP_EXPANSION.zip
+   <project folder>/tmp/BUILD_PR_STYLE_04_GAMES_INDEX_RESET_AND_HEADER_LOCKS.zip

docs/operations/dev/commit_comment.txt

@@ -1,7 +1,7 @@
-Expand MASTER_ROADMAP_STYLE with the missing style-system guardrails and implement the first real /index.html migration slice.
+Reset /games/index.html to the new shared theme system and lock the updated shared-header rules.
 
-Add the missing roadmap items so they are not forgotten.
-Reset /index.html onto the new Toolbox Aid-derived theme foundation.
-Keep the implementation narrow, testable, and free of embedded styling.
+Add Toolbox Aid as the first external menu item.
+Keep the shared header full width regardless of content.
+Preserve shared header sourcing under src/engine/theme.
 
-PR: BUILD_PR_STYLE_02_INDEX_IMPLEMENTATION_AND_ROADMAP_EXPANSION
+PR: BUILD_PR_STYLE_04_GAMES_INDEX_RESET_AND_HEADER_LOCKS

docs/pr/BUILD_PR_STYLE_04_GAMES_INDEX_RESET_AND_HEADER_LOCKS.md

@@ -0,0 +1,53 @@
+# BUILD_PR_STYLE_04_GAMES_INDEX_RESET_AND_HEADER_LOCKS
+
+## Purpose
+Apply the shared style system to `/games/index.html` and lock the newly agreed shared-header rules so they are implemented consistently.
+
+## Single PR Purpose
+Reset `/games/index.html` onto the new Toolbox Aid-derived theme while carrying forward the agreed shared header behavior.
+
+## Locked Header Rules For This PR
+1. Add this as the FIRST menu item:
+   - Toolbox Aid
+   - opens in a new tab
+   - uses:
+     - `class="is-external"`
+     - `target="_blank"`
+     - `rel="noopener noreferrer"`
+
+2. Header must stretch the full width of the screen regardless of content.
+   - no centered max-width wrapper may constrain the header
+   - header image area must remain full-width
+   - image behavior must preserve aspect ratio
+
+3. Shared header source remains under:
+   - `src/engine/theme/toolboxaid-header.html`
+
+4. Shared header styling remains under:
+   - `src/engine/theme/header.css`
+   - plus shared base support in `src/engine/theme/main.css` as needed
+
+## `/games/index.html` Scope
+- reset `/games/index.html` to shared theme only
+- use shared header
+- no embedded `<style>`
+- no inline `style=""`
+- no JS-generated styling
+- keep structure closely aligned with `/index.html` and `/samples/index.html`
+
+## External Link Standard
+If multiple external links exist, standardize them using:
+- `class="is-external"`
+- `target="_blank"`
+- `rel="noopener noreferrer"`
+
+Optional shared visual cue:
+- `is-external` may use a shared external-link marker in theme CSS
+
+## Acceptance
+- `/games/index.html` visually aligns with the new shared page shell
+- header renders from shared source
+- Toolbox Aid link is first in menu and opens in new tab safely
+- header remains full width regardless of content
+- no embedded styling remains on `/games/index.html`
+- page is testable and narrow in scope