Add hai_report_test_11x.html: 11× sample size + index.html CSS harmonization

[Copilot]

Creates a test duplicate of the April 12, 2026 HAI report at reports/hai_report_test_11x.html simulating 880 posts (11× the original 80) while preserving all rates, percentages, and the HAI score (25.9).

Data changes (absolute counts only)

• Stat row: Total 80→880, Neg 24→264, Pos 2→22, Neu 54→594
• Topic table: all post counts ×11 (e.g. Public Safety 23→253, Gov't 15→165)
• Platform chart news_rss: neg/pos/neu 24/2/54 → 264/22/594
• Language doughnut neg counts: en 13→143, fr 4→44, cr 7→77, it stays 0
• All %, weighted scores, bar-fill widths, and HAI score unchanged

CSS redesign (aligned to index.html design system)

• Variables: replaced standalone :root with --navy, --blue, --green, --gold, --ink, --bg, --card, --muted, --border, --shadow, --radius, --max
• Font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif
• Header: sticky linear-gradient(90deg, var(--navy), #2b4462) with .nav/.brand flex layout and gold CTA pill
• Cards: border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)
• Tables: th → background:var(--navy); td borders → var(--border)
• Footer: background:var(--navy); color:#cfe7ff; padding:1rem with .inner flex layout
• Grid: .grid-2 with gap:1.5rem
• Responsive: @media (max-width:1000px) single-column grid, @media (max-width:640px) hides nav meta
• Gauge, bar charts, doughnut, stat row, and methodology section all retained

Original prompt

Task

Create a test duplicate of the existing HAI report at reports/hai_report_20260412_223958.html with two major changes:

1. Scale ALL data to 11× the sample size

The original report is based on 80 posts. The test report should simulate 880 posts (80 × 11).

Scale up all post counts, sentiment counts, and per-topic/platform/language breakdowns proportionally (multiply by 11). Keep the percentages, rates, and the HAI score (25.9) the same — only the absolute counts change. Here is the mapping:

Metric	Original	11×
Total Posts	80	880
Negative	24	264
Positive	2	22
Neutral	54	594
Government & Corruption posts	15	165
International Relations posts	12	132
Human Rights & Diaspora posts	11	121
Public Safety & Crime posts	23	253
Economy & Poverty posts	12	132
Infrastructure posts	9	99
Health & Healthcare posts	7	77
General posts	11	121
Natural Disasters posts	3	33
Education posts	5	55
Platform chart — news_rss neg/pos/neu	24/2/54	264/22/594
Language chart — English neg	13	143
Language chart — French neg	4	44
Language chart — Creole neg	7	77
Language chart — it neg	0	0

All percentage columns (Neg%, Neg. Rate, etc.) and the HAI score (25.9), weighted scores, and bar-fill widths should remain exactly the same.

2. Harmonize the CSS with index.html

The current HAI report uses its own standalone CSS (custom :root variables, custom header, cards, tables, footer, etc.). Replace it with CSS that matches the design system from index.html (the main POLLNEX site). Key elements to adopt from index.html:

• CSS variables: Use the index.html :root variables: --navy:#233144, --blue:#2196F3, --green:#66BB6A, --gold:#DAA520, --ink:#1A3643, --bg:#F5F7FA, --card:#FFFFFF, --muted:#6B7B8C, --border:#D0D7DE, --shadow, --radius:14px, --max (container max-width).
• Font stack: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif (same as index.html body).
• Header: Use the sticky gradient header style from index.html (linear-gradient(90deg, var(--navy), #2b4462)) with .nav flex layout, .brand styling with "POLLNEX" logo text, and the gold CTA button style.
• Cards: Use index.html's .card style — background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow).
• Grid: Use index.html's .grid-2 style with gap:1.5rem.
• Footer: Use index.html's footer style (background:var(--navy); color:#cfe7ff; padding:1rem).
• Tables: Restyle th to use var(--navy) background. Style td borders with var(--border).
• Stat boxes, gauge section: Re-skin to match the card aesthetic from index.html (border, radius, shadow).
• Links: color:var(--blue) with underline on hover.
• Responsive: Use index.html's breakpoint approach (@media max-width:1000px and 640px).

The report should look like it belongs on the same site as index.html while keeping all the HAI-specific components (gauge chart, bar charts, doughnut charts, stat row, tables, methodology section).

Output

Save the new file as: reports/hai_report_test_11x.html

Do NOT modify any existing files. Only create the new test file.

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: create a test html duplicate with 11X THE SAMPLE SIZE AND HARMONIZE THE CSS WITH THE ONE IN index.html

Assistant:

Let me first examine the current index.html to understand its CSS styling before creating the PR.

Assistant: Now I have both files. Let me create the PR with a detailed problem statement.

Assistant: I'm waiting for your confirmation to proceed with creating the pull request that will add the reports/hai_report_test_11x.html test file with 11× sample size data and CSS harmonized with your index.html design system.

This pull request was created from Copilot chat.