Redesign article TOC as a localized sticky sidebar with icons & reading-depth layers

[Copilot]

The article Table of Contents on riksdagsmonitor.com rendered as a full-width vertical block above the body — visually noisy and hard to scan. This reworks it into a sticky left-sidebar TOC matching the euparliamentmonitor.com reference, with semantic icons, reading-depth badges, and full dark/light/RTL + 14-language localization.

Renderer (scripts/render-lib/article-scannability.ts)

• Rewrote generateArticleToc to emit a collapsible <aside> → <details open> → <summary> → <nav> → <ol> sidebar instead of a flat block.
• Added SECTION_META (canonical slug → {icon, layer}), SECTION_KEYWORD_FALLBACKS regexes for dynamic slugs, and SECTION_META_DEFAULT (📌/analysis).
• normalizeSlug() strips the rm- prefix and trailing -<digits> so suffixed ids (e.g. rm-risk-assessment-7) map correctly.
• Each entry carries a semantic emoji icon and an L1/L2/L3 layer badge (quick/analysis/intelligence) with localized title/aria-label via LAYER_NAME_I18N for all 14 languages.

Layout (scripts/render-lib/article.ts)

• Wrapped TOC + body in a two-column grid (rm-article-layout / rm-article-content), gated by a new rm-article--with-toc modifier so TOC-less articles keep the flat path.
• Preserved existing IntersectionObserver scroll-spy by keeping the .rm-article-toc / .rm-toc-active hooks.

Styling (styles/components/article-scannability.css)

• Mobile-first single column → 2-column (minmax(13rem,17rem) minmax(0,1fr)) at ≥1024px; sticky sidebar.
• Layer-colored badges (green/cyan/magenta), rotating disclosure caret, light-theme overrides, and an RTL caret flip.

Key design point

H2 section ids are language-stable (assigned from the canonical English scaffold), so icon/layer mapping is id-based and needs no per-language text parsing:

<li data-layer="quick">
  <a href="#rm-what-happened">
    <span class="rm-toc-icon" aria-hidden="true">📰</span>
    <span class="rm-toc-text">What Happened</span>
    <span class="rm-toc-layer rm-toc-layer--quick" title="Quick read" aria-label="Quick read">L1</span>
  </a>
</li>

Tests & output

• Extended tests/article-scannability.test.ts: sidebar disclosure structure, id-based icon/layer assignment (incl. -N normalization), default fallback, localized badge labels.
• Regenerated all article HTML (3262 files) so committed output reflects the new renderer; localization verified across EN/SV/AR/HE/JA/ZH/KO/FI (e.g. JA "目次", HE "קריאה מהירה", ZH "快速阅读").

TOC text flows through the existing escapeHtml/headingPlainText helpers; icon/layer/label values come from fixed internal maps, so there is no new injection surface.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[github-actions]

🏷️ Automatic Labeling Summary

This PR has been automatically labeled based on the files changed and PR metadata.

Applied Labels: html-css,translation,rtl,size-xs,news

Label Categories

• 🗳️ Content: news, dashboard, visualization, intelligence
• 💻 Technology: html-css, javascript, workflow, security
• 📊 Data: cia-data, riksdag-data, data-pipeline, schema
• 🌍 I18n: i18n, translation, rtl
• 🔒 ISMS: isms, iso-27001, nist-csf, cis-controls
• 🏗️ Infrastructure: ci-cd, deployment, performance, monitoring
• 🔄 Quality: testing, accessibility, documentation, refactor
• 🤖 AI: agent, skill, agentic-workflow

For more information, see .github/labeler.yml.

[github-actions]

🔍 Lighthouse Performance Audit

Category	Score	Status
Performance	85/100	🟡
Accessibility	95/100	🟢
Best Practices	90/100	🟢
SEO	95/100	🟢

📥 Download full Lighthouse report

Budget Compliance: Performance budgets enforced via budget.json

[github-actions]

🔍 Lighthouse Performance Audit

Category	Score	Status
Performance	85/100	🟡
Accessibility	95/100	🟢
Best Practices	90/100	🟢
SEO	95/100	🟢

📥 Download full Lighthouse report

Budget Compliance: Performance budgets enforced via budget.json