[Arthurvdv]

Closes #138
Closes #124
Closes #113

The design system and app shell of the dashboard site on own CSS (D59), the engine side of the docs map (D58), the template count test and the roving tabindex of the grid. / stays the matrix of the first stage (D54 holds until #139). Screenshots and the look check: #138 (comment)

The shell

• Tokens and dark mode: site.css holds the light tokens under :root, the dark ones under [data-theme="dark"], and the same dark set again in a prefers-color-scheme block (a Site test checks the two dark blocks are equal line for line). Print uses the light set. An inline script first in <head> sets has-js and applies localStorage['rulebook-theme'] before the first paint. The toggle in js/shell.js sets the choice and goes back to the system setting on the second click. Dark mode follows the system without JavaScript.
• Header: inline ALCops logo (partials/logo.html, currentColor), "Rulebook", the owner of repository as span.brand-org, the stage and level links labelled "Stage" and "Level", Set up, and Help (docsUrl; G repoints it). div.header-tools holds the theme toggle, the cart with its count and the menu button, and stays beside the brand below 768 px. shell.js measures the header into --header-h.
• Mobile: below 768 px the navigation folds behind the menu from the first paint, and the open menu scrolls within the screen. Without JavaScript the navigation wraps and the header does not stick. The setup, level and rule pages have no horizontal scroll at 390 px; wide tables scroll inside themselves.
• Matrix: div.matrix-scroll with a sticky header row and rule column, each action as a span.chip, and every data-* kept. role="grid" is on the table and there is one Tab stop per grid (Site: a roving tabindex for the matrix grid #113).
• Head: title, meta description, og:title, og:description, og:type, og:url and og:site_name. The description comes from the content adapter (_content.gotmpl, _index.md). favicon.svg and a 180 px favicon.png sit in static/. There is no generator tag. <main class="page page-<kind>"> has a p.lead after each <h1>.
• Footer: generatedAt, engineRef, the organization repository, the rulebook.json link and "Powered by ALCops" linking docs.home. Assets are at fixed paths: css/site.css, js/shell.js, js/matrix.js, js/cart.mjs, js/cart-core.mjs.

The docs map

Get-RulebookDocsMap -Ref in Rulebook.Site.psm1 writes docs after alProjectDocsUrl, one link per line ($script:MultiLineKeys). The keys are home (https://alcops.dev), dashboard, levels, overrides, quarantine, twins (pte-or-appsource.md), changingARule and alProject, all built through Get-RulebookDocsUrl. docsUrl and alProjectDocsUrl are unchanged and equal docs.dashboard and docs.alProject (asserted). The fixture is regenerated, and the key order is asserted in the Site and Publish suites. Contract: docs/dashboard.md section 5 and template/docs/dashboard.md section 6.

#124

• One test counts template/ (without the site build output) against docs/reference/template-content.md, README.md and CONTRIBUTING.md. These now say 96 files, 64 by hand, 30 in site/ and 32 generated.
• One test pins the site page count, stages + levels + rules + 2, at 39 on the fixture.
• The regeneration test title, ARCHITECTURE and authoring-levels now say 14 hand-written files.
• issueState lists closed-duplicate and closed.

Dropped from the spike

The landing page of wp16/spike-own-css (head 8babfc2, kept on origin for #139) is not in this PR:

• the landing layouts/index.html;
• the what-and-why text of content/_index.md;
• the stage switcher's first link to stages/<first>/;
• data-rulebook-landing on <main>;
• the landing rules of site.css (hero, landing grid, prose, facts panel, stats, steps, cards, button).

The setup page's id="levels" from the spike stays.

Deviations

• Row links in the keyboard route: with JavaScript the rule links of the row headers also leave the tab order and form the first column of the arrow-key route (Home goes there). Without that, a stage page kept 628 link Tab stops. Without JavaScript only the first cell is focusable, and the row links keep their Tab stops; the popover needs JavaScript anyway.
• Deploy test: the forbidden-literal test skips .png, because the favicon's bytes matched \bv1\b.
• Page descriptions: they are the top-level description key of the content adapter's AddPage call (read as .Description, checked with Hugo 0.165).
• favicon.png is a committed binary from a one-off Playwright render. The steps are in CONTRIBUTING; there is no build step.
• Footer link: the footer hard-codes https://github.com/<repository>, as the cart's empty-form link already does (GHES is unsupported, an existing limit).
• Shared theme key: localStorage['rulebook-theme'] is shared by every project site of one github.io host, like the cart key (documented).

Contrast (WCAG, from the tokens of site.css)

Pair	Light	Dark	Needed
Text on background	15.80	16.02	4.5
Text on surface (header, footer)	14.84	14.65	4.5
Muted on background	6.11	6.50	4.5
Muted on surface (footer, labels)	5.74	5.94	4.5
Muted on surface-2 (group rows)	5.39	5.23	4.5
Link (accent) on background	5.19	6.11	4.5
Link (accent) on surface	4.88	5.59	4.5
Current nav item (accent-text on accent)	5.19	6.11	4.5
Chip Error	6.03	7.04	4.5
Chip Warning	6.10	7.25	4.5
Chip Info	6.07	7.48	4.5
Chip Hidden	6.09	7.15	4.5
Chip None (on background)	5.33	6.15	4.5
Badge O (mark-text on override)	6.35	7.47	4.5
Badge Q (mark-text on quarantine)	6.43	7.48	4.5

Tests

• Pester (local, Hugo 0.165 extended, the real-Hugo Site case ran):

  Suite	Passed
  Rulebook.Site	54
  Rulebook.Deploy	76
  Publish.Action	52
  Rulebook.Template	77
  Rulebook.Publish	100
  Docs	340

  No failures and no skips.

• node --test tests/site/*.test.mjs: 21 passed.

• Playwright (throwaway, in a scratch folder, fixture build): 36 of 36 checks passed.

  • Toggle and system default, persistence across a reload.
  • No page scroll at 390 px.
  • Sticky header row and column.
  • Cart on a cell click.
  • The keyboard route.
  • The menu and the tools beside it; --header-h.
  • Anchors below the header.
  • Print in light.
  • No JavaScript.
  • No foreign request.

🤖 Generated with Claude Code