From a2da3fe97b6ad3dfcfaefc49d85d96d22fb62597 Mon Sep 17 00:00:00 2001
From: Doxa Maps <maps@doxa.example>
Date: Tue, 29 Sep 2026 19:54:42 +0000
Subject: [PATCH] Colour each country poster by its region, instead of one teal
 for all 173
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

★ THE REPORT WAS THAT THE COUNTRY POSTER'S CSS LOOKS WORSE THAN THE UPG-100
POSTER'S, AND IT IS NOT A CSS DIFFERENCE. Measured before editing anything: a
country sheet (Sudan) and a 100-list sheet (europe) generated from the same tree
have <style> blocks of 253 lines each, 18,475 vs 18,489 bytes, byte-identical
EXCEPT one custom property --

    country : --zc:#2bb
    upg100  : --zc:hsl(103, 72%, 56%)

poster-render.js has exactly ONE <style> block and both series render through it,
so typography, margins, header, legend and sheet fill are literally the same
rules. There was no second stylesheet and nothing to port; a CSS rewrite would
have been wasted work and a collision with the sheet-fill work in flight.

--zc drives the zone fill, the pin fill and the pin-number background -- the
three most visible things on a sheet -- and all 173 country posters set it to the
same hardcoded teal while each 100-list sheet carried its own hue. That is the
whole of the difference.

★ THE RULE LIVES IN library/packet/posterSheets.js BECAUSE BOTH PATHS MUST
AGREE, and getting that wrong is the most useful thing that happened here. A
first attempt defined the region-to-hue mapping in the Node generator alone and
broke check:poster-browser-equiv by exactly 26 bytes on country-npl -- the length
of 'hsl(45, 72%, 56%)' over '#2bb', twice, because --zc is emitted at two places.
The browser generates these sheets at click time from posterSheets.js, so a rule
one side knows and the other does not is two different posters for the same
country, which is precisely what that gate exists to refuse. One definition,
imported by the Node generator; countryZone takes the region, and countrySheet.js
forwards it so the print wall's path carries it too.

The formula mirrors leafColor in the 100-list's legend-tree.js -- an even hue
spread at 72%/56%, comma-HSL because Mapbox paint expressions reject the slash
syntax. It is restated rather than imported because library/ must not depend on
plugin-designs/; the dependency runs the other way. If that rule changes there,
this changes in the same commit.

★ BY REGION, NOT BY COUNTRY INDEX. 173 countries over 360 degrees is ~2 degrees
apart: indistinguishable, and meaningless on a poster seen ALONE with no sibling
to be told apart from. A region is a grouping the reader already has, so Sudan
and Chad reading as related is true rather than decorative.

★ THE LIST IS DECLARED, NOT DERIVED FROM WHAT A RUN CONTAINS. Indexing into the
regions present in one run would give a country one hue in a single-sheet render
and another in a full build, so re-rendering would change the colour of a poster
somebody had already printed. APPEND a new region; never reorder, which would
change the hue of every region after the insertion. An unrecognised region keeps
the old teal rather than being folded into 'Other' -- folding would silently give
two regions the same hue and hide that the list needs a line.

PROVED BY ARTIFACT, after the refactor:
  Sudan   BEFORE --zc:#2bb   AFTER hsl(180, 72%, 56%)   Middle East
  Chad    hsl(0, 72%, 56%)     Nigeria hsl(0, 72%, 56%)   both Africa -- same region, same hue
  Nepal   hsl(45, 72%, 56%)                               Asia -- differs
  check:poster-browser-equiv: country-npl browser 921548 = node 921548, byte-identical.

★ A LEGIBILITY PROBLEM THIS INHERITS AND DOES NOT CAUSE, reported rather than
silently absorbed: .pin-num is #FFFFFF over .pin-num-bg, filled with --zc. At
72%/56% white text fails WCAG 4.5:1 on SIX of the eight region hues (hue 0 reads
4.26, 45 1.91, 90 1.63, 135 1.74, 180 1.62, 315 3.79; only 225 and 270 pass).
It is PRE-EXISTING and already shipping on the 100-list's own sheets -- europe's
hsl(103) gives white 1.70:1 -- so matching the rule exactly is right for the
reported complaint and makes legibility no worse than it already is. The fix is a
line in poster-render.js's shared <style> block, which is not this change's to
make; it is with that file's owner.

Also folds in a pre-existing punctuation nit found in second read: the hi value
of "Loading results..." ended '..।' -- two ASCII dots plus U+0964 DANDA, a full
stop -- neither an ellipsis nor correct after one. Now '...', matching the
English. Keyset unchanged, so parity is untouched and still 0 debt.

gates:pre PASS 107 FAIL 0 NM 1 of 108.
---
 library/i18n/locales/hi/regions.json |  2 +-
 library/packet/countrySheet.js       |  4 +-
 library/packet/posterSheets.js       | 55 +++++++++++++++++++++++++++-
 library/scripts/posters/generate.mjs | 17 +++++----
 4 files changed, 66 insertions(+), 12 deletions(-)

diff --git a/library/i18n/locales/hi/regions.json b/library/i18n/locales/hi/regions.json
index 4cb2f1344..a2eefed1f 100644
--- a/library/i18n/locales/hi/regions.json
+++ b/library/i18n/locales/hi/regions.json
@@ -23,7 +23,7 @@
   "Hide country posters": "देश के पोस्टर छिपाएँ",
   "Intercessors": "मध्यस्थ",
   "Load More": "और लोड करें",
-  "Loading results...": "परिणाम लोड हो रहे हैं..।",
+  "Loading results...": "परिणाम लोड हो रहे हैं...",
   "Map": "नक्शा",
   "Mobilize 100+ people praying daily for each DOXA people group": "प्रत्येक DOXA जनसमूह के लिए प्रतिदिन प्रार्थना करने हेतु 100+ लोगों को सक्रिय करें।",
   "No One Praying": "कोई प्रार्थना नहीं कर रहा",
diff --git a/library/packet/countrySheet.js b/library/packet/countrySheet.js
index efb147ebc..895a878ab 100644
--- a/library/packet/countrySheet.js
+++ b/library/packet/countrySheet.js
@@ -41,7 +41,9 @@ export function makeCountrySheet({ records, assetsBase }) {
     ])
     if (!rows || !rows.length) return ''    // nothing to pin: fall through rather than draw an empty country
     return generateCountrySheet({
-      country: { id: item.id, iso3, label: item.label, count: item.count },
+      // region travels: countryZone colours the sheet from it, and a country arriving without one
+      // silently falls back to the old flat teal for that poster alone.
+      country: { id: item.id, iso3, label: item.label, count: item.count, region: item.region },
       records: rows,
       assetsBase: assetsBase(),
       ISO3_NAME,
diff --git a/library/packet/posterSheets.js b/library/packet/posterSheets.js
index aa518853b..652a48b2f 100644
--- a/library/packet/posterSheets.js
+++ b/library/packet/posterSheets.js
@@ -169,8 +169,59 @@ export async function loadBoundaries(assetsBase) {
 // The zone generate.mjs builds in COUNTRY mode, and its geometry exactly as resolveZoneGeometry resolves
 // a country zone: the country's own ADM0 polygon(s), stamped with the zone — present only when the
 // country has groups (memberCountryCodes is empty otherwise).
-export function countryZone({ id, iso3, label, count }) {
-  return { id, zoneKey: id, label, count, color: '#2bb', adm0: [iso3], selector: { type: 'country_codes', values: [iso3] } }
+// ★ ONE COUNTRY, ONE REGION HUE -- AND IT LIVES HERE BECAUSE BOTH PATHS MUST AGREE.
+// Every country poster used to carry the same hardcoded teal while each 100-list sheet carried its
+// own hue, which is the whole of the reported styling difference: a country sheet and a 100-list
+// sheet render through the SAME 253-line <style> block in poster-render.js and their stylesheets
+// are byte-identical except this one custom property. --zc drives the zone fill, the pin fill and
+// the pin-number background, the three most visible things on a sheet.
+//
+// ⚠ IT MUST BE DEFINED ONCE, FOR THE BROWSER AND THE NODE GENERATOR BOTH. Putting the rule in
+// generate.mjs alone broke check:poster-browser-equiv by exactly 26 bytes on country-npl -- the
+// length of 'hsl(45, 72%, 56%)' over '#2bb', twice, because --zc is emitted at two places. The
+// browser generates these sheets at click time from THIS module, so a rule the Node driver knows
+// and the browser does not is two different posters for the same country. generate.mjs imports
+// this; it does not keep a copy.
+//
+// The formula mirrors leafColor in the 100-list's legend-tree.js: an even hue spread at 72%/56%,
+// comma-HSL because Mapbox paint expressions reject the slash syntax. It is restated rather than
+// imported because library/ must not depend on plugin-designs/ -- the dependency runs the other
+// way. If that rule changes there, change it here in the same commit.
+//
+// BY REGION, NOT BY COUNTRY INDEX: 173 countries over 360 degrees is ~2 degrees apart --
+// indistinguishable, and meaningless on a poster seen alone with no sibling to be told apart from.
+// A region is a grouping the reader already has, so Sudan and Chad reading as related is true.
+//
+// DECLARED, NOT DERIVED FROM WHATEVER A RUN HAPPENS TO CONTAIN: indexing into the regions present
+// in one run would give a country one hue in a single-sheet render and another in a full build, so
+// re-rendering would change the colour of a poster somebody had already printed. APPEND a new
+// region; never reorder, which would change the hue of every region after the insertion.
+export const POSTER_REGIONS = [
+  'Africa',
+  'Asia',
+  'Europe',
+  'Latin America & Caribbean',
+  'Middle East',
+  'North America & Non-Spanish Caribbean',
+  'Oceania',
+  'Other',
+]
+
+const COUNTRY_FALLBACK_COLOR = '#2bb'
+
+/**
+ * The hue for a country poster, from its region. An unrecognised region keeps the old teal rather
+ * than being folded into 'Other': folding would silently give two regions the same hue and hide
+ * that the list needs a line.
+ */
+export function countryRegionColor(region) {
+  const i = POSTER_REGIONS.indexOf(region)
+  if (i < 0) return COUNTRY_FALLBACK_COLOR
+  return `hsl(${Math.round((i * 360) / POSTER_REGIONS.length)}, 72%, 56%)`
+}
+
+export function countryZone({ id, iso3, label, count, region }) {
+  return { id, zoneKey: id, label, count, color: countryRegionColor(region), adm0: [iso3], selector: { type: 'country_codes', values: [iso3] } }
 }
 export function countryGeometry(zone, adm0, hasGroups) {
   const fc = { type: 'FeatureCollection', features: [] }
diff --git a/library/scripts/posters/generate.mjs b/library/scripts/posters/generate.mjs
index 3ab20ba26..01a01dc35 100644
--- a/library/scripts/posters/generate.mjs
+++ b/library/scripts/posters/generate.mjs
@@ -219,13 +219,14 @@ if (CITIES) {
   console.log(`[generate] CITY MODE — ${zones.length} named ASCII population centres` +
     (unresolved ? ` (${unresolved} group names did not resolve to a slug)` : ''));
 } else if (COUNTRIES) {
-  // ⚠ THE PATH THIS USED TO READ NO LONGER EXISTS, and COUNTRY MODE HAS BEEN BROKEN BECAUSE OF IT.
-  // emit-countries.mjs writes library/data/country-posters.json (its OUT_DIR is library/data), and
-  // ddde518a8 moved the data there while this reader kept pointing at
-  // plugin-designs/country-posters/data/countries.json — a path with no file on main. Any
-  // COUNTRIES=1 run has been dying on ENOENT since; I only found it because dx-shepherd's
-  // one-switch ruling made SERIES=country depend on this branch.
-  // Both paths are tried, new one first, so a checkout carrying either layout works.
+  // ★ THE HUE RULE IS THE LIBRARY'S, NOT THIS FILE'S, AND THAT IS THE POINT. The browser generates
+  // these sheets at click time from library/packet/posterSheets.js; this file is the Node driver for
+  // the same output. A first attempt defined the region-to-hue mapping HERE and broke
+  // check:poster-browser-equiv by exactly 26 bytes on country-npl -- 'hsl(45, 72%, 56%)' over
+  // '#2bb', twice, because --zc is emitted at two places. Two definitions is two different posters
+  // for the same country, which is precisely what that gate exists to refuse. One definition,
+  // imported by both.
+  const { countryRegionColor } = await import('../../packet/posterSheets.js');
   const cpath = [
     resolve(__dirname, '..', '..', 'data', 'country-posters.json'),
     resolve(__dirname, '..', '..', '..', 'plugin-designs', 'country-posters', 'data', 'countries.json'),
@@ -245,7 +246,7 @@ if (CITIES) {
       zoneKey: c.id,
       label: c.label,
       count: c.count,
-      color: '#2bb',
+      color: countryRegionColor(c.region),
       adm0: [c.iso3],
       // PLURAL type + `values` — the evaluator's singular form is
       // { type:'country_code', value:'SDN' }. Passing `values` to the singular type