Expand MASTER_ROADMAP_STYLE with the missing style-system guardrails and implement the first real /index.html migration slice.

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.

PR: BUILD_PR_STYLE_02_INDEX_IMPLEMENTATION_AND_ROADMAP_EXPANSION & MODEL: GPT-5.4-codex
REASONING: high

COMMAND:
Create BUILD_PR_STYLE_03_SAMPLES_INDEX_RESET

Tasks:
1. Reset `/samples/index.html` to new theme system
2. Use shared header from src/engine/theme/toolboxaid-header.html
3. Remove all embedded CSS and JS styling
4. Match structure and spacing of `/index.html`
5. Keep implementation minimal and testable

Output:
<project folder>/tmp/BUILD_PR_STYLE_03_SAMPLES_INDEX_RESET.zip

Author: DavidQ

docs/dev/codex_commands.md

@@ -1,8 +1,15 @@
-MODEL: GPT-5.3-codex
-REASONING: medium
+MODEL: GPT-5.4-codex
+REASONING: high
 
 COMMAND:
-- Implement validation scan across samples
-- Report any fullscreen usage outside sample 0713
-- Verify 0713 scaling behavior
-- No engine changes
+Create BUILD_PR_STYLE_03_SAMPLES_INDEX_RESET
+
+Tasks:
+1. Reset `/samples/index.html` to new theme system
+2. Use shared header from src/engine/theme/toolboxaid-header.html
+3. Remove all embedded CSS and JS styling
+4. Match structure and spacing of `/index.html`
+5. Keep implementation minimal and testable
+
+Output:
+<project folder>/tmp/BUILD_PR_STYLE_03_SAMPLES_INDEX_RESET.zip

docs/dev/reports/style_roadmap_expansion_summary.txt

@@ -0,0 +1,17 @@
+Style roadmap expansion summary
+
+Added tracking for:
+- font baseline policy
+- spacing scale policy
+- container-width vs full-width policy
+- header CSS dependency extraction
+- compact tool-header evaluation
+- shared page shell standard
+- collapsible structure naming
+- host strategy clarity
+- hover/focus/active state standardization
+- no-legacy-dependency verification
+- minimal-JS policy and responsive baseline
+
+Execution slice:
+- implement /index.html only

docs/dev/roadmaps/MASTER_ROADMAP_STYLE.md

@@ -15,6 +15,7 @@ Track the style-system migration for HTML-JavaScript-Gaming using Toolbox Aid as
 - No style strings injected from JS.
 - Shared theme CSS lives under `src/engine/theme/`.
 - Theme does not move into `src/engine/ui/`.
+- No deletes from this roadmap during style migration planning; only additive roadmap updates unless explicit closeout status changes are earned.
 
 ## Folder Responsibilities
 ### src/engine/theme/
@@ -59,6 +60,9 @@ Behavior only:
   - fixed right column
   - only center grows/shrinks
 - Minimal JS for HTML pages.
+- Normal content pages use a centered content-width policy.
+- Tool pages use a full-width policy.
+- Header area may gain a compact mode for tool pages if needed after validation, but only as an explicit tracked slice.
 
 ## UX Clarification
 ### Tool launch labels
@@ -85,23 +89,29 @@ This explanation should be kept visible in related UI/help text so launch choice
 - border radius
 - shadows
 - transition timings
+- content widths
+- rail widths for tool layouts
 [ ] Base layout primitives:
 - page shell
 - content container
 - full-width section
 - intro/title block
 - nav row
+- fixed-rail / fluid-center tool shell
 [ ] Document which live Toolbox Aid behaviors are intentionally carried forward.
 [ ] Do not pull from existing project styling.
 
 ### A2. Establish shared file layout
 [ ] Create/confirm:
 - `src/engine/theme/main.css`
-- `src/engine/theme/header.css` or fold into main if still clean
+- `src/engine/theme/header.css`
+- `src/engine/theme/nav.css`
+- `src/engine/theme/layout.css`
 - `src/engine/theme/accordion.css`
 - `src/engine/theme/tools.css`
 - `src/engine/theme/games.css`
 - `src/engine/theme/samples.css`
+- `src/engine/theme/pages.css`
 [ ] Keep `main.css` foundational, not a dumping ground.
 
 ### A3. Shared selector hygiene
@@ -110,6 +120,13 @@ This explanation should be kept visible in related UI/help text so launch choice
 [ ] Remove embedded styling from migrated pages only.
 [ ] Ban new embedded styling in HTML and JS.
 
+### A4. Theme baseline details
+[ ] Define font baseline and font stack policy.
+[ ] Define spacing scale and usage policy.
+[ ] Define container-width policy for content pages.
+[ ] Define full-width policy for tools.
+[ ] Define shadow/border/radius policy so ad hoc visual drift does not return.
+
 ---
 
 ## Track B — Shared Header System
@@ -127,6 +144,7 @@ This explanation should be kept visible in related UI/help text so launch choice
 
 ### B2. Shared header assets and styling
 [ ] Pull the required Toolbox Aid CSS needed to reproduce the header look.
+[ ] Extract the minimum required CSS for correct rendering; do not rely on unrelated project CSS.
 [ ] Keep the header image behavior:
 - full-width feel
 - maintain aspect ratio
@@ -137,13 +155,18 @@ This explanation should be kept visible in related UI/help text so launch choice
 - nav row
 - social area if retained
 [ ] Preserve the menu hover line effect from Toolbox Aid baseline.
+[ ] Validate the header against missing global dependencies such as resets, fonts, spacing, and wrappers.
 
 ### B3. Header loading
 [ ] Provide one shared import path.
 [ ] Avoid duplicating header markup across pages.
 [ ] Minimize JS required to place the shared header into HTML pages.
 [ ] Keep HTML-page JS minimal and boring.
 
+### B4. Header modes
+[ ] Evaluate whether tools need a compact header mode after the main entry pages land.
+[ ] If needed, implement compact mode as a tracked, explicit slice rather than as ad hoc page-specific overrides.
+
 ---
 
 ## Track C — Main Entry Pages
@@ -157,6 +180,7 @@ This explanation should be kept visible in related UI/help text so launch choice
 [ ] Validate spacing consistency.
 [ ] Validate nav behavior.
 [ ] Validate responsive behavior.
+[ ] Validate that `/index.html` uses no embedded styling and no JS-driven styling.
 
 ### C2. Reset `/samples/index.html`
 [ ] Apply same shell and shared header.
@@ -173,6 +197,14 @@ This explanation should be kept visible in related UI/help text so launch choice
 [ ] Keep page visually very close to `/index.html`.
 [ ] Use `tools.css` only for content-specific differences.
 
+### C5. Shared page-shell standard
+[ ] Standardize all four main pages around:
+- shared header
+- shared intro/title area
+- shared content shell
+- shared footer policy if footer is used later
+[ ] Avoid page-by-page shell drift.
+
 ---
 
 ## Track D — Collapsible Pattern
@@ -187,6 +219,14 @@ This explanation should be kept visible in related UI/help text so launch choice
 [ ] Add minimal JS only if needed for accessibility or state persistence.
 [ ] Use for shared header/page intro compaction where appropriate.
 
+### D3. Collapsible structure
+[ ] Standardize collapsible naming:
+- `.is-collapsible`
+- `.is-collapsible__summary`
+- `.is-collapsible__content`
+- `.is-collapsible--collapsed`
+[ ] Avoid vague state naming.
+
 ---
 
 ## Track E — Tool Shell UX
@@ -209,6 +249,10 @@ This explanation should be kept visible in related UI/help text so launch choice
 - Open Tool = launch the tool directly/standalone
 - Open In Host = launch the same tool inside a shared host shell/container
 
+### E4. Host strategy clarity
+[ ] Decide whether both launch modes remain permanent, get relabeled later, or eventually converge.
+[ ] Keep the current explanation visible until that decision is made.
+
 ---
 
 ## Track F — Spacing, Typography, and Consistency
@@ -236,6 +280,12 @@ This explanation should be kept visible in related UI/help text so launch choice
 - helper text
 - tool labels
 
+### F4. Hover, focus, and active states
+[ ] Standardize hover behavior.
+[ ] Standardize focus-visible behavior.
+[ ] Standardize active/current-nav states.
+[ ] Preserve Toolbox Aid-style hover line treatment where adopted.
+
 ---
 
 ## Track G — Migration Rules
@@ -255,6 +305,27 @@ This explanation should be kept visible in related UI/help text so launch choice
 [ ] Delete embedded `<style>` only after migrated coverage is validated.
 [ ] Delete JS styling only after migrated coverage is validated.
 
+### G4. No-legacy-dependency verification
+[ ] For each migrated page, verify that no old project-local style dependency remains.
+[ ] Record what was removed and what replaced it.
+
+---
+
+## Track H — Accessibility and Interaction Baseline
+
+### H1. Shared interaction states
+[ ] Ensure nav, buttons, and accordions have keyboard-usable states.
+[ ] Keep focus-visible styling consistent.
+
+### H2. Minimal-JS HTML policy
+[ ] Document what JS is allowed on plain HTML pages.
+[ ] Keep header loading and collapsible behavior minimal and auditable.
+
+### H3. Responsive baseline
+[ ] Validate common desktop widths first.
+[ ] Validate narrower widths for page-shell wrapping and nav behavior.
+[ ] Prevent fixed rails from collapsing the center below usable limits.
+
 ---
 
 ## Suggested Execution Order
@@ -265,4 +336,19 @@ This explanation should be kept visible in related UI/help text so launch choice
 [ ] STYLE_05 — Add `.is-collapsible` shared accordion behavior.
 [ ] STYLE_06 — Establish shared tool shell and migrate one tool.
 [ ] STYLE_07 — Clarify tool launch labels/help text.
-[ ] STYLE_08+ — Continue tool UX migration tool-by-tool.
+[ ] STYLE_08 — Evaluate compact tool-header mode if still needed.
+[ ] STYLE_09+ — Continue tool UX migration tool-by-tool.
+
+---
+
+## STYLE_02 Additive Expansion Bundle
+
+The following additive requirements are explicitly tracked for STYLE_02 implementation and validation:
+
+- [ ] Confirm `/index.html` imports only `src/engine/theme/main.css` for page styling.
+- [ ] Confirm shared header styles are resolved through theme-level imports rather than page-local overrides.
+- [ ] Confirm header template content changes remain limited to:
+  - tagline = `HTML-JavaScript Gaming`
+  - menu = Home / Games / Samples / Tools
+- [ ] Confirm `/index.html` contains no embedded `<style>` and no inline `style=""`.
+- [ ] Confirm plain-page JS remains minimal and limited to shared-header mounting.

docs/operations/dev/codex_commands.md

@@ -1,6 +1,36 @@
-MODEL: GPT-5.3-codex
-REASONING: low
+MODEL: GPT-5.4-codex
+REASONING: high
 
 COMMAND:
-- Maintain roadmap lock enforcement
-- Reject non-status changes
+Create BUILD_PR_STYLE_02_INDEX_IMPLEMENTATION_AND_ROADMAP_EXPANSION 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
+- no embedded <style> in HTML
+- no inline style=""
+- no JS-generated styling
+- theme stays under src/engine/theme
+- keep HTML-page JS minimal
+
+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.
+8. Package to:
+   <project folder>/tmp/BUILD_PR_STYLE_02_INDEX_IMPLEMENTATION_AND_ROADMAP_EXPANSION.zip

docs/operations/dev/commit_comment.txt

@@ -1,5 +1,7 @@
-Confirm roadmap lock enforcement.
+Expand MASTER_ROADMAP_STYLE with the missing style-system guardrails and implement the first real /index.html migration slice.
 
-No changes required. Validation-only confirmation.
+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.
 
-PR: LEVEL 24.4 ROADMAP LOCK VALIDATION
+PR: BUILD_PR_STYLE_02_INDEX_IMPLEMENTATION_AND_ROADMAP_EXPANSION

docs/pr/BUILD_PR_STYLE_02_INDEX_IMPLEMENTATION_AND_ROADMAP_EXPANSION.md

@@ -0,0 +1,31 @@
+# BUILD_PR_STYLE_02_INDEX_IMPLEMENTATION_AND_ROADMAP_EXPANSION
+
+## Purpose
+Expand the style roadmap so no important style-system requirements are lost, and execute the next real testable slice: implement the `/index.html` migration on the new Toolbox Aid-derived theme base.
+
+## Single PR Purpose
+Implement `/index.html` on the new shared style system and record the expanded roadmap requirements.
+
+## Required Deliverables
+1. Update `docs/dev/roadmaps/MASTER_ROADMAP_STYLE.md` with the bundled additive expansions only.
+2. Add the new theme foundation files under `src/engine/theme/`.
+3. Add `src/engine/theme/toolboxaid-header.html` sourced from Toolbox Aid with only the approved content changes:
+   - tagline = `HTML-JavaScript Gaming`
+   - menu = Home / Games / Samples / Tools
+4. Extract the minimum required CSS for the header to render correctly without relying on legacy project CSS.
+5. Reset `/index.html` to use the new theme only.
+6. Remove any embedded styling from `/index.html`.
+7. Keep plain-page JS minimal.
+
+## Must Not Do
+- do not inspect or preserve old project CSS/HTML as the styling baseline
+- do not migrate `/samples/index.html`, `/games/index.html`, or `/tools/index.html` in this PR
+- do not add inline style or JS-generated styling
+- do not turn `main.css` into a dumping ground
+
+## Acceptance
+- roadmap gains the additive tracking items from this bundle
+- `/index.html` becomes a clean testable implementation slice
+- `/index.html` depends only on the new theme path
+- header renders from shared source
+- no embedded styling remains on `/index.html`

docs/pr/BUILD_PR_STYLE_03_SAMPLES_INDEX_RESET.md

@@ -0,0 +1,22 @@
+# BUILD_PR_STYLE_03_SAMPLES_INDEX_RESET
+
+## Purpose
+Apply the same clean, Toolbox Aid–derived style system to `/samples/index.html` using the established `/index.html` pattern.
+
+## Scope
+- Reset `/samples/index.html` to use shared theme only
+- Use shared header (no duplication)
+- No embedded CSS or JS styling
+- Match `/index.html` structure closely
+
+## Rules
+- Do NOT reuse old classes/ids
+- Do NOT inspect old styling as baseline
+- Keep layout consistent with `/index.html`
+- Use only theme files under `src/engine/theme/`
+
+## Acceptance
+- `/samples/index.html` visually aligns with `/index.html`
+- No embedded styles exist
+- Header loads from shared source
+- Clean, testable page

index.html

@@ -12,7 +12,6 @@
   <title>HTML JavaScript Gaming</title>
   <link rel="icon" href="favicon.ico" />
   <link rel="stylesheet" href="src/engine/theme/main.css" />
-  <link rel="stylesheet" href="src/engine/theme/toolboxaid-header.css" />
 </head>
 <body>
   <main class="page-shell">