updateees

@@ -26,5 +26,6 @@ Flower prices are a fourth, independent data set. They provide market context bu
 the freedom score.
 
-Seed and clone law is an optional, unscored section of the profile (see "Seeds and clones").
+Seed and clone law is an optional, unscored section of the profile (see "Seeds and clones"),
+as are cannabis clubs and the black market (see "Cannabis clubs and the black market").
 
 ## Where things are
@@ -138,4 +139,41 @@ by the ECB, cite the alternative exchange-rate source in the observation note.
   map modes.
 
+## Cannabis clubs and the black market
+
+Two more optional, unscored sections under `context`. Each is a plain cited text, like
+`production` or `medical`; leave a section out until something reliable is found.
+
+```yaml
+context:
+  clubs:
+    status: tolerated       # regulated | tolerated | underground | none
+    text: >-
+      Around 1,000 to 1,500 private associations grow for their members in a legal grey area …
+    sources:
+      - key
+  black_market:
+    text: >-
+      Most cannabis is still bought illegally; a gram costs about …
+    sources:
+      - key
+```
+
+- **`clubs`**: do cannabis clubs (social clubs, associations, members-only lounges) exist, and on
+  what footing? The interest is in unregulated or lightly regulated ones: how they work around the
+  law, how many there are, how membership works, how often they are raided. Licensed shops and
+  pharmacies belong in the access segment, not here. Where none are known, say so only if a source
+  says so.
+- **`clubs.status`** is required with the section and colours the "Cannabis clubs" map option:
+  `regulated` (a law provides for clubs: licensed or registered, within set limits), `tolerated`
+  (no law, but they operate fairly openly and are mostly left alone), `underground` (they exist
+  but are treated as illegal: raided, organisers prosecuted), `none` (none known, or the law
+  leaves no room; use only when a source supports it). Judge the country as a whole, not one city.
+- **`black_market`**: the state of the illegal market: how large it is next to any legal supply,
+  where the cannabis comes from, typical prices if sourced, how openly it is sold, and how
+  violent or organised it is. Prefer surveys, police and UN figures over anecdotes.
+- Neither section moves a score. If research for them shows the law or practice differs from a
+  scored segment, fix the segment and add a history entry as usual.
+- `node scripts/data-status.cjs clubs` and `… black_market` list what is done and what is left.
+
 ## Seeds and clones
 
@@ -229,4 +267,6 @@ all read from there, together with `PLANTING_TRADE`.
 - **`estimate: true`** (with an optional `window: [from, to]`) marks a first restriction whose
   date is unknown. Replace these with a dated law whenever one is found.
+- **`country`** may also be a disputed territory (`xa`, `xn`, `xs`, `xt`). Its entries show on its
+  page and in the history list, but its scored changes never move the world average.
 - **`checked: true`** means: the date and the event were compared with a source that was read.
   A search-result summary is not a read source (see "What went wrong").

@@ -1,3 +1,3 @@
-// Where the data stands: node scripts/data-status.cjs [unchecked|estimates|thin|weak|planting|chain [id]]
+// Where the data stands: node scripts/data-status.cjs [unchecked|estimates|thin|weak|planting|clubs|black_market|chain [id]]
 // Run from the project root. Needs js-yaml (already in node_modules).
 const fs = require("fs"), y = require("js-yaml");
@@ -14,4 +14,12 @@ console.log(`history: ${changes.length} entries | checked ${changes.filter((e) =
 if (what === "unchecked") for (const e of unchecked) console.log([e.country || "--", e.date, e.id, e.sources[0].url].join(" | "));
 if (what === "estimates") console.log(estimates.map((e) => `${e.country}${e.window ? `[${e.window}]` : ""}`).join(" "));
+if (what === "clubs" || what === "black_market") {
+  // An optional context section: which profiles have it, and which are still to do, most people first.
+  const pop = (id) => { const p = country[id].population; return p[Object.keys(p).sort().at(-1)]; };
+  const has = ids.filter((id) => country[id].context[what]);
+  console.log(`${what}: ${has.length} of ${ids.length} profiles`);
+  console.log("done:", has.map((id) => (what === "clubs" ? `${id}:${country[id].context.clubs.status}` : id)).join(" "));
+  console.log("to do:", ids.filter((id) => !country[id].context[what]).sort((a, b) => pop(b) - pop(a)).map((id) => `${id}:${country[id].name}`).join(", "));
+}
 if (what === "planting") {
   // Seeds and clones: which profiles have the section, and which are still to do, best score first.

@@ -8,5 +8,5 @@ import CountryChart from "./CountryChart.astro";
 import PricePanel from "./PricePanel.astro";
 import { SHOW_PRICES } from "../lib/config.js";
-import { PLANTING_STATUS, PLANTING_TRADE } from "../lib/segment-ids.js";
+import { PLANTING_STATUS, CLUBS_STATUS, PLANTING_TRADE } from "../lib/segment-ids.js";
 import { answersFor } from "../lib/answers.js";
 
@@ -122,5 +122,6 @@ const circ = 2 * Math.PI * r;
     )}
     {SHOW_PRICES && !sub && <PricePanel id={c.id} />}
-    {scored.length > 0 && <CountryChart history={scored} />}
+    {/* in the drawer the chart stays in this column; on the full page it moves under the breakdown */}
+    {scored.length > 0 && <div class="chart-in-side"><CountryChart history={scored} /></div>}
   </div>
 
@@ -182,4 +183,5 @@ const circ = 2 * Math.PI * r;
       );
     })}
+    {scored.length > 0 && <div class="chart-in-main"><CountryChart history={scored} /></div>}
 
     {group && (
@@ -213,4 +215,9 @@ const circ = 2 * Math.PI * r;
           <div class="segrow">
             <div class="segrow-top"><span>{x.name === "Death penalty" ? "☠️ " : ""}{x.name}</span></div>
+            {x.clubs && (
+              <div class="d-chips">
+                <span class={`chip s-${CLUBS_STATUS[x.clubs].tone}`} title={CLUBS_STATUS[x.clubs].help}>Clubs: {CLUBS_STATUS[x.clubs].label}</span>
+              </div>
+            )}
             {x.seeds && (
               <div class="d-chips">

@@ -4,5 +4,5 @@
 // and the kind filters above the list lead to the other pages.
 import ScoreChange from "./ScoreChange.astro";
-import { changes, historyPeriods, formatDate, CHANGE_CATEGORIES } from "../lib/countries.js";
+import { changes, places, historyPeriods, formatDate, CHANGE_CATEGORIES } from "../lib/countries.js";
 import { tierColor } from "../lib/tiers.js";
 
@@ -20,4 +20,22 @@ const kindCount = (key) => dated.filter((ch) => ch.category === key).length;
 const years = [...new Set(items.map((ch) => ch.date.slice(0, 4)))]
   .map((year) => ({ year, items: items.filter((ch) => ch.date.startsWith(year)) }));
+// The whole history in numbers, for the side panel. The same on every page of the list.
+const num = (n) => n.toLocaleString("en-GB");
+const perPlace = new Map();
+for (const ch of changes) if (ch.country) perPlace.set(ch.country, (perPlace.get(ch.country) ?? 0) + 1);
+const stats = {
+  total: changes.length,
+  scored: dated.filter((ch) => ch.score).length,
+  context: dated.filter((ch) => !ch.score).length,
+  estimated: changes.length - dated.length,
+  checked: dated.filter((ch) => ch.checked).length,
+  international: dated.filter((ch) => !ch.country).length,
+  places: perPlace.size,
+  oldest: dated.at(-1),
+  newest: dated[0],
+  top: [...perPlace].sort((x, y) => y[1] - x[1] || x[0].name.localeCompare(y[0].name)).slice(0, 8),
+  // every place, also those with no entry at all
+  fewest: places.map((c) => [c, perPlace.get(c) ?? 0]).sort((x, y) => x[1] - y[1] || x[0].name.localeCompare(y[0].name)).slice(0, 8),
+};
 ---
 <nav class="periods" aria-label="Periods">
@@ -36,4 +54,5 @@ const years = [...new Set(items.map((ch) => ch.date.slice(0, 4)))]
 </nav>
 
+<div class="change-layout hist-layout">
 <div class="chlog">
   {years.map(({ year, items }) => (
@@ -59,4 +78,37 @@ const years = [...new Set(items.map((ch) => ch.date.slice(0, 4)))]
 </div>
 
+<aside class="change-aside hist-aside" aria-label="History in numbers">
+  <div class="card ca-card">
+    <h2 class="hs-title">History in numbers</h2>
+    <dl class="hs-grid">
+      <div><dt>Entries in total</dt><dd>{num(stats.total)}</dd></div>
+      <div><dt>{kind ? "Of this kind" : "In this period"}</dt><dd>{num(items.length)}</dd></div>
+      <div><dt>Moved a score</dt><dd>{num(stats.scored)}</dd></div>
+      <div><dt>Context only</dt><dd>{num(stats.context)}</dd></div>
+      <div><dt>Countries and territories</dt><dd>{num(stats.places)}</dd></div>
+      <div><dt>Tied to no country</dt><dd>{num(stats.international)}</dd></div>
+    </dl>
+    <p class="ca-note">{num(stats.checked)} of the {num(dated.length)} dated entries ({Math.round((stats.checked / dated.length) * 100)}%) were checked against a source that was read. Another {num(stats.estimated)} are estimated first bans with no known date; they are not listed here.</p>
+    <p class="ca-note">The oldest entry is from <a href={`${base}history/${stats.oldest.id}/`}>{stats.oldest.date.slice(0, 4)}</a>, the newest from <a href={`${base}history/${stats.newest.id}/`}>{formatDate(stats.newest.date)}</a>.</p>
+  </div>
+  <div class="ca-more hs-top">
+    <h2>Most entries</h2>
+    <ol>
+      {stats.top.map(([c, n]) => (
+        <li><a href={`${base}country/${c.slug}/`}><b>{c.flag} {c.name}</b><time>{n} entries</time></a></li>
+      ))}
+    </ol>
+  </div>
+  <div class="ca-more hs-top">
+    <h2>Fewest entries</h2>
+    <ol>
+      {stats.fewest.map(([c, n]) => (
+        <li><a href={`${base}country/${c.slug}/`}><b>{c.flag} {c.name}</b><time>{n === 1 ? "1 entry" : `${n} entries`}</time></a></li>
+      ))}
+    </ol>
+  </div>
+</aside>
+</div>
+
 {period && <nav class="pager chl-pager" aria-label="Other periods">
   {newer

@@ -4,5 +4,5 @@ import { defineCollection } from "astro:content";
 import { glob, file } from "astro/loaders";
 import { z } from "astro/zod";
-import { SEGMENT_IDS, CONTEXT_IDS, CHANGE_CATEGORIES, PLANTING_STATUS, PLANTING_TRADE } from "./lib/segment-ids.js";
+import { SEGMENT_IDS, CONTEXT_IDS, CHANGE_CATEGORIES, PLANTING_STATUS, PLANTING_TRADE, CLUBS_STATUS } from "./lib/segment-ids.js";
 
 const score = z.number().int().min(0).max(10);
@@ -16,4 +16,6 @@ const plantingStatus = z.enum(Object.keys(PLANTING_STATUS) as [string, ...string
 const plantingTrade = z.enum(Object.keys(PLANTING_TRADE) as [string, ...string[]]);
 const planting = z.object({ seeds: plantingStatus, seeds_trade: plantingTrade, clones: plantingStatus, clones_trade: plantingTrade, text: z.string().min(1), sources: z.array(z.string()) }).strict();
+// cannabis clubs: the cited text plus the footing they stand on (CLUBS_STATUS)
+const clubs = z.object({ status: z.enum(Object.keys(CLUBS_STATUS) as [string, ...string[]]), text: z.string().min(1), sources: z.array(z.string()) }).strict();
 const status = {
   // "death": illegal, and the law allows the death penalty for cannabis offences, in practice trafficking.
@@ -57,7 +59,8 @@ const countries = defineCollection({
       scores: perSegment(score),
       segments: perSegment(cited),
-      // the four standard sections, plus `death_penalty` where the law provides for one and
-      // `planting` (seeds and clones) where it has been researched
-      context: z.object({ death_penalty: cited.optional(), planting: planting.optional(), ...Object.fromEntries(CONTEXT_IDS.map((id) => [id, cited])) }).strict(),
+      // the four standard sections, plus `death_penalty` where the law provides for one and,
+      // where they have been researched, `planting` (seeds and clones), `clubs` (cannabis clubs,
+      // above all unregulated or lightly regulated ones) and `black_market` (the illegal market)
+      context: z.object({ death_penalty: cited.optional(), planting: planting.optional(), clubs: clubs.optional(), black_market: cited.optional(), ...Object.fromEntries(CONTEXT_IDS.map((id) => [id, cited])) }).strict(),
       sources: z.record(z.string(), source),
       subunits: z

@@ -20,5 +20,5 @@ export const MED_LABEL = { yes: "Legal", limited: "Limited", no: "None" };
 // "Death penalty" comes first and exists only for countries whose law provides for it;
 // "Seeds and clones" exists only where it has been researched and carries a status for each.
-const CONTEXT = [["death_penalty", "Death penalty"], ["production", "Commercial production"], ["products", "Products"], ["planting", "Seeds and clones"], ["medical", "Medical use"], ["consequences", "Other consequences"]];
+const CONTEXT = [["death_penalty", "Death penalty"], ["production", "Commercial production"], ["products", "Products"], ["planting", "Seeds and clones"], ["medical", "Medical use"], ["clubs", "Cannabis clubs"], ["black_market", "Black market"], ["consequences", "Other consequences"]];
 export const CONTEXT_NAMES = CONTEXT.map(([, name]) => name);
 
@@ -71,8 +71,9 @@ const everyPlace = (await getCollection("countries"))
         reviewed: isoDate(data.updated),
         segments: SEGMENTS.map((seg) => cited(data.segments[seg.id])), // in SEGMENTS order
-        context: CONTEXT.map(([key, name]) => (data.context[key] ? { name, ...cited(data.context[key]), ...(key === "planting" && plantingOf(data.context[key])) } : null)), // null: no such section
+        context: CONTEXT.map(([key, name]) => (data.context[key] ? { name, ...cited(data.context[key]), ...(key === "planting" && plantingOf(data.context[key])), ...(key === "clubs" && { clubs: data.context[key].status }) } : null)), // null: no such section
         sources: Object.values(data.sources).map(pair),
       },
       planting: data.context.planting ? plantingOf(data.context.planting) : null,
+      clubs: data.context.clubs?.status ?? null, // a key of CLUBS_STATUS, or null until researched
       subunitMeta: data.subunits ?? null,
     };
@@ -154,5 +155,5 @@ const changeEntries = (await getCollection("changes")).map(({ data }) => data).s
 export const changes = changeEntries
   .map((data, i) => {
-    const country = data.country ? countries.find((c) => c.slug === data.country) : null;
+    const country = data.country ? places.find((c) => c.slug === data.country) : null; // a country or a disputed territory
     if (data.country && !country) throw new Error(`changes.yaml: "${data.id}" refers to unknown country "${data.country}"`);
     // context only (a treaty, report or ruling): part of the history, but it moves no score
@@ -226,5 +227,5 @@ function averageOverTime(weight) {
     return sum / total;
   };
-  const events = changes.filter((ch) => ch.score && !ch.estimate).map((ch) => ({ change: ch, date: ch.date, t: dateTime(ch.date) }));
+  const events = changes.filter((ch) => ch.score && !ch.estimate && !ch.country.disputed).map((ch) => ({ change: ch, date: ch.date, t: dateTime(ch.date) }));
   for (let year = CHART_FROM; year <= +DATA_SNAPSHOT; year++) events.push({ change: null, date: `${year}-01-01`, t: Date.UTC(year, 0, 1) });
   events.sort((a, b) => a.t - b.t);

@@ -23,4 +23,5 @@ export const scoreRows = places.map((c) => ({
   clones: c.planting?.clones ?? "",
   clones_trade: c.planting?.clones_trade ?? "",
+  clubs: c.clubs ?? "", // empty until researched; see CLUBS_STATUS
   population: c.population,
   users: c.use.users,

@@ -19,4 +19,12 @@ export const PLANTING_TRADE = {
   banned: { label: "Banned", tone: "illegal", help: ["Selling or handing them on is an offence", "Selling or handing them on is an offence"] },
 };
+// Cannabis clubs: an optional context section with one status, the footing clubs stand on.
+// Not part of the score. Licensed shops and pharmacies are not clubs.
+export const CLUBS_STATUS = {
+  regulated: { label: "Regulated by law", tone: "legal", help: "A law provides for clubs: they are licensed or registered and work within set limits" },
+  tolerated: { label: "Tolerated", tone: "decrim", help: "No law provides for clubs, but they operate fairly openly and are mostly left alone" },
+  underground: { label: "Underground", tone: "partial", help: "Clubs exist but are treated as illegal: they are raided or their organisers prosecuted" },
+  none: { label: "None known", tone: "illegal", help: "No clubs are known, or the law leaves no room for them" },
+};
 // What kind of event a History entry is, in the order the legend lists them.
 export const CHANGE_CATEGORIES = {

@@ -11,5 +11,5 @@ export function getStaticPaths() {
 export function GET({ props }) {
   const { c } = props;
-  const entry = ({ t, src, seeds, seeds_trade, clones, clones_trade }) => ({ t, src, ...(seeds && { seeds, seeds_trade, clones, clones_trade }) });
+  const entry = ({ t, src, seeds, seeds_trade, clones, clones_trade, clubs }) => ({ t, src, ...(seeds && { seeds, seeds_trade, clones, clones_trade }), ...(clubs && { clubs }) });
   const body = {
     id: c.id,

@@ -4,5 +4,5 @@ import { SEGMENTS, CONTEXT_NAMES, REC_LABEL, MED_LABEL, countries, places } from
 import { flatLatestPricesFor } from "../lib/prices.js";
 import { SHOW_PRICES } from "../lib/config.js";
-import { PLANTING_STATUS, PLANTING_TRADE } from "../lib/segment-ids.js";
+import { PLANTING_STATUS, CLUBS_STATUS, PLANTING_TRADE } from "../lib/segment-ids.js";
 
 const light = places.map(({ id, slug, name, flag, region, raw, score, rank, s, rec, med }) =>
@@ -13,4 +13,5 @@ const meta = {
   planting: PLANTING_STATUS,
   plantingTrade: PLANTING_TRADE,
+  clubs: CLUBS_STATUS,
   rec: REC_LABEL,
   med: MED_LABEL,
@@ -116,5 +117,6 @@ const presets = [
     const plantingChip = (what, set, key, i) => `<span class="chip s-${set[key].tone}" title="${esc(set[key].help[i])}">${what}: ${set[key].label}</span>`;
     const statusChips = (entry) => entry.seeds ? `<div class="d-chips">${plantingChip("Seeds", META.planting, entry.seeds, 0)}${plantingChip("Seed sales", META.plantingTrade, entry.seeds_trade, 0)}${plantingChip("Clones", META.planting, entry.clones, 1)}${plantingChip("Clone sales", META.plantingTrade, entry.clones_trade, 1)}</div>` : "";
-    const prose = (entry) => entry ? `${statusChips(entry)}<p class="cmp-text">${esc(entry.t)}</p>${sources(entry)}` : "";
+    const clubsChip = (entry) => entry.clubs ? `<div class="d-chips"><span class="chip s-${META.clubs[entry.clubs].tone}" title="${esc(META.clubs[entry.clubs].help)}">Clubs: ${META.clubs[entry.clubs].label}</span></div>` : "";
+    const prose = (entry) => entry ? `${statusChips(entry)}${clubsChip(entry)}<p class="cmp-text">${esc(entry.t)}</p>${sources(entry)}` : "";
     const priceCell = (p) => p
       ? `<div class="cmp-val"><b>$${p.usd.toFixed(2)}</b><span>/g</span></div><div class="cmp-sub">${p.price} ${p.currency}/g · ${p.date}</div>`

@@ -5,5 +5,5 @@ import Changes from "../components/Changes.astro";
 import { SEGMENTS, DATA_SNAPSHOT, REC_LABEL, REC_ORDER, REC_HELP, MED_LABEL, countries, regions, worldAvg, lastUpdated, formatDate, subunitsOf, places } from "../lib/countries.js";
 import { TIERS, tierColor } from "../lib/tiers.js";
-import { PLANTING_STATUS, PLANTING_TRADE } from "../lib/segment-ids.js";
+import { PLANTING_STATUS, PLANTING_TRADE, CLUBS_STATUS } from "../lib/segment-ids.js";
 import { PRICE_MARKETS, PRICE_MARKET_LABEL, flatLatestPricesFor, latestPricesFor } from "../lib/prices.js";
 import { SHOW_PRICES } from "../lib/config.js";
@@ -30,6 +30,6 @@ const MED_ORDER = ["yes", "limited", "no"];
 // `ratio` is the share of people who use cannabis divided by the index score: how far use runs
 // ahead of freedom. A score below 1 counts as 1, so that a zero does not divide.
-const mapData = places.map(({ id, num, name, flag, raw, score, rank, s, use, planting }) =>
-  ({ id, num, name, flag, raw, score, rank, s, planting, prices: SHOW_PRICES ? flatLatestPricesFor(id) : {}, use: { ...use, ratio: +(use.prevalence / Math.max(raw, 1)).toFixed(2) } }));
+const mapData = places.map(({ id, num, name, flag, raw, score, rank, s, use, planting, clubs }) =>
+  ({ id, num, name, flag, raw, score, rank, s, planting, clubs, prices: SHOW_PRICES ? flatLatestPricesFor(id) : {}, use: { ...use, ratio: +(use.prevalence / Math.max(raw, 1)).toFixed(2) } }));
 // States, provinces and territories of the federations, for the map's "show states" switch.
 // Keyed like the shapes in src/data/subunits.geo.json: "us/ca".
@@ -58,5 +58,34 @@ const PLANTING_COLOR = { legal: 5, licensed: 4, grey: 3, illegal: 0, open: 5, re
 const plantingScale = (statuses) => Object.fromEntries(Object.entries(statuses).map(([k, v]) => [k, { label: v.label, color: `var(--t${PLANTING_COLOR[k]})` }]));
 const PLANTING_SCALES = { status: plantingScale(PLANTING_STATUS), trade: plantingScale(PLANTING_TRADE) };
+// Cannabis clubs on the map: one option, coloured by the footing clubs stand on.
+const CLUBS_COLOR = { regulated: 5, tolerated: 4, underground: 2, none: 0 };
+const CLUBS_SCALE = Object.fromEntries(Object.entries(CLUBS_STATUS).map(([k, v]) => [k, { label: v.label, help: v.help, color: `var(--t${CLUBS_COLOR[k]})` }]));
 const streetFlower = (c) => latestPricesFor(c.id).street;
+
+// Rankings columns the reader can switch on and off. `on` marks the ones shown by default.
+// Extra columns sort on a number kept on the row: higher means freer (or bigger), -1 means no data.
+const order = (keys) => Object.fromEntries(keys.map((k, i) => [k, keys.length - i]));
+const STATUS_RANK = { ...order(Object.keys(PLANTING_STATUS)), ...order(["open", "regulated", "gift", "unclear", "banned"]) };
+const CLUBS_RANK = order(Object.keys(CLUBS_STATUS));
+const statusCol = (key, label, vocab, helpIndex) => ({
+  key, label, group: "Context",
+  sort: (c) => STATUS_RANK[c.planting?.[key]] ?? -1,
+  chip: (c) => c.planting && { ...vocab[c.planting[key]], help: vocab[c.planting[key]].help[helpIndex] },
+});
+const BASE_COLUMNS = [
+  { key: "region", label: "Region" }, { key: "users", label: "Users" }, { key: "share", label: "Share of adults" },
+  ...(SHOW_PRICES ? [{ key: "price", label: "Price per gram" }] : []),
+  { key: "rec", label: "Recreational" }, { key: "med", label: "Medical" },
+];
+const EXTRA_COLUMNS = [
+  ...SEGMENTS.map((s, i) => ({ key: `s${i}`, label: s.name, group: "Score segments", sort: (c) => c.s[i], score: (c) => c.s[i] })),
+  { key: "pop", label: "Population", group: "People", sort: (c) => c.population, text: (c) => compact(c.population) },
+  statusCol("seeds", "Seeds", PLANTING_STATUS, 0),
+  statusCol("seeds_trade", "Seed sales", PLANTING_TRADE, 0),
+  statusCol("clones", "Clones", PLANTING_STATUS, 1),
+  statusCol("clones_trade", "Clone sales", PLANTING_TRADE, 1),
+  { key: "clubs", label: "Cannabis clubs", group: "Context", sort: (c) => CLUBS_RANK[c.clubs] ?? -1, chip: (c) => c.clubs && CLUBS_STATUS[c.clubs] },
+];
+const columnGroups = [["Shown by default", BASE_COLUMNS], ...["Score segments", "People", "Context"].map((g) => [g, EXTRA_COLUMNS.filter((x) => x.group === g)])];
 ---
 <Base description={`A score from 0 to 100 for how free cannabis is in every country, with a map, rankings${SHOW_PRICES ? ", retail prices" : ""} and legal history.`}>
@@ -76,19 +105,31 @@ const streetFlower = (c) => latestPricesFor(c.id).street;
         <div>
           <h2>World map</h2>
-          <p class="sub" id="mapSub" data-score="Red means prison risk, green means free. Select a country for its full breakdown." data-use="The stronger the blue, the more people use cannabis. Select a country for its full breakdown." data-ratio="The stronger the blue, the further cannabis use runs ahead of the freedom to use it. Select a country for its full breakdown." data-price="Pale yellow means cheaper, violet means more expensive. Countries without a sourced price are hatched." data-planting="Green means legal or sold freely, red means illegal or banned. Hatched countries have not been researched yet. Not part of the score.">Red means prison risk, green means free. Select a country for its full breakdown.</p>
         </div>
-        <label class="field">
-          <span>Colour by</span>
-          <select id="metric">
-            <option value="index">Overall index</option>
-            {SEGMENTS.map((s, i) => <option value={i}>{s.name}</option>)}
-            <option value="users">Cannabis users (number)</option>
-            <option value="prevalence">Cannabis users (share of adults)</option>
-            <option value="ratio">Share of users ÷ index</option>
-            {SHOW_PRICES && PRICE_MARKETS.map((market) => <option value={`price:${market}`}>{PRICE_MARKET_LABEL[market]} price</option>)}
-            {Object.entries(PLANTING_FIELDS).map(([field, label]) => <option value={`plant:${field}`}>{label}</option>)}
-          </select>
-        </label>
       </div>
+      <div class="metric-bar" id="metric" role="group" aria-label="Colour the map by">
+        <div class="metric-group">
+          <span>Freedom</span>
+          <button type="button" data-metric="index" aria-pressed="true">Overall index</button>
+          {SEGMENTS.map((s, i) => <button type="button" data-metric={i} aria-pressed="false">{s.name}</button>)}
+        </div>
+        <div class="metric-group">
+          <span>Use</span>
+          <button type="button" data-metric="users" aria-pressed="false">Number of users</button>
+          <button type="button" data-metric="prevalence" aria-pressed="false">Share of adults</button>
+          <button type="button" data-metric="ratio" aria-pressed="false">Share of users ÷ index</button>
+        </div>
+        {SHOW_PRICES && (
+          <div class="metric-group">
+            <span>Price</span>
+            {PRICE_MARKETS.map((market) => <button type="button" data-metric={`price:${market}`} aria-pressed="false">{PRICE_MARKET_LABEL[market]}</button>)}
+          </div>
+        )}
+        <div class="metric-group">
+          <span>Context</span>
+          {Object.entries(PLANTING_FIELDS).map(([field, label]) => <button type="button" data-metric={`plant:${field}`} aria-pressed="false">{label}</button>)}
+          <button type="button" data-metric="clubs" aria-pressed="false">Cannabis clubs</button>
+        </div>
+      </div>
+      <p class="sub map-sub" id="mapSub" data-score="Red means prison risk, green means free. Select a country for its full breakdown." data-use="The stronger the blue, the more people use cannabis. Select a country for its full breakdown." data-ratio="The stronger the blue, the further cannabis use runs ahead of the freedom to use it. Select a country for its full breakdown." data-price="Pale yellow means cheaper, violet means more expensive. Countries without a sourced price are hatched." data-planting="Green means legal or sold freely, red means illegal or banned. Hatched countries have not been researched yet. Not part of the score." data-clubs="Green means cannabis clubs are regulated or tolerated, orange that they work underground, red that none are known. Hatched countries have not been researched yet. Not part of the score.">Red means prison risk, green means free. Select a country for its full breakdown.</p>
       <div class="card map-card">
         <div class="map-wrap" id="mapWrap">
@@ -118,12 +159,17 @@ const streetFlower = (c) => latestPricesFor(c.id).street;
           <span class="legend-note">{PRICE_SCALE.note}</span>
         </div>}
+        <div class="legend" data-legend="clubs" hidden>
+          {Object.values(CLUBS_SCALE).map((v) => <span title={v.help}><i class="sw" style={`background:${v.color}`}></i>{v.label}</span>)}
+          <span><i class="sw sw-nodata"></i>Not researched yet</span>
+          <span class="legend-note">The footing cannabis clubs stand on, shown for context and not part of the score. Licensed shops and pharmacies are not counted as clubs.</span>
+        </div>
         {Object.entries(PLANTING_SCALES).map(([key, scale]) => (
           <div class="legend" data-legend={`plant-${key}`} hidden>
             {Object.values(scale).map((v) => <span><i class="sw" style={`background:${v.color}`}></i>{v.label}</span>)}
             <span><i class="sw sw-nodata"></i>Not researched yet</span>
-            <span class="legend-note">Seed and clone rules are shown for context and are not part of the score. States and provinces take their country's status.</span>
+            <span class="legend-note">Seed and clone rules are shown for context and are not part of the score.</span>
           </div>
         ))}
-        <div class="map-under">
+        <div class="map-under" id="mapUnder">
           <label class="map-toggle" title="Show the United States, Canada and Australia state by state">
             <input type="checkbox" id="showUnits"> States and provinces
@@ -149,4 +195,16 @@ const streetFlower = (c) => latestPricesFor(c.id).street;
             {REC_ORDER.map((k) => <option value={k}>{REC_LABEL[k]}</option>)}
           </select>
+          <details class="col-menu" id="colMenu">
+            <summary>Columns</summary>
+            <div class="col-panel">
+              {columnGroups.map(([group, cols], g) => (
+                <fieldset>
+                  <legend>{group}</legend>
+                  {cols.map((col) => <label><input type="checkbox" data-col={col.key} checked={g === 0}> {col.label}</label>)}
+                </fieldset>
+              ))}
+              <button type="button" class="btn" id="colReset">Reset</button>
+            </div>
+          </details>
         </div>
       </div>
@@ -157,10 +215,11 @@ const streetFlower = (c) => latestPricesFor(c.id).street;
               <th data-sort="rank" class="num" aria-sort="ascending">#</th>
               <th data-sort="name">Country</th>
-              <th data-sort="region" class="hide-sm">Region</th>
-              <th data-sort="users" class="num-col hide-md" title="People who used cannabis in the past year">Users</th>
-              <th data-sort="share" class="num-col hide-md" title="Share of people aged 15–64 who used cannabis in the past year">Share</th>
-              {SHOW_PRICES && <th data-sort="price" class="num-col hide-md" title="Latest sourced street-flower price, normalised to US dollars per gram">Price/g</th>}
-              <th data-sort="rec" class="hide-sm">Recreational</th>
-              <th data-sort="med" class="hide-md">Medical</th>
+              <th data-sort="region" data-col="region" class="hide-sm">Region</th>
+              <th data-sort="users" data-col="users" class="num-col hide-md" title="People who used cannabis in the past year">Users</th>
+              <th data-sort="share" data-col="share" class="num-col hide-md" title="Share of people aged 15–64 who used cannabis in the past year">Share</th>
+              {SHOW_PRICES && <th data-sort="price" data-col="price" class="num-col hide-md" title="Latest sourced street-flower price, normalised to US dollars per gram">Price/g</th>}
+              <th data-sort="rec" data-col="rec" class="hide-sm">Recreational</th>
+              <th data-sort="med" data-col="med" class="hide-md">Medical</th>
+              {EXTRA_COLUMNS.map((col) => <th data-sort={col.key} data-col={col.key} class:list={["col-off", { "num-col": !col.chip }]}>{col.label}</th>)}
               <th data-sort="score" class="score-col">Index</th>
             </tr>
@@ -169,13 +228,25 @@ const streetFlower = (c) => latestPricesFor(c.id).street;
             {places.map((c) => (
               <tr data-id={c.id} data-rank={c.rank ?? c.worldRank - 0.5} data-name={c.name} data-region={c.region}
-                  data-rec={REC_ORDER.indexOf(c.rec)} data-med={MED_ORDER.indexOf(c.med)} data-reckey={c.rec} data-users={c.use.users} data-share={c.use.prevalence} data-price={SHOW_PRICES ? streetFlower(c)?.usd ?? -1 : undefined}>
+                  data-rec={REC_ORDER.indexOf(c.rec)} data-med={MED_ORDER.indexOf(c.med)} data-reckey={c.rec} data-users={c.use.users} data-share={c.use.prevalence} data-price={SHOW_PRICES ? streetFlower(c)?.usd ?? -1 : undefined}
+                  {...Object.fromEntries(EXTRA_COLUMNS.map((col) => [`data-${col.key}`, col.sort(c)]))}>
                 <td class="num">{c.rank ?? "–"}</td>
                 <td><a class="cname" href={`${base}country/${c.slug}/`}><span class="flag">{c.flag}</span>{c.name}</a>{c.disputed && <span class="tag-disputed" title={c.disputed.note}>disputed</span>}</td>
-                <td class="hide-sm">{c.region}</td>
… 134 more lines

@@ -170,5 +170,5 @@ select:focus-visible, input:focus-visible, button:focus-visible, tr:focus-visibl
 
 /* ── Table ──────────────────────────────────────────── */
-.table-card { overflow: hidden; }
+.table-card { overflow-x: auto; }
 table { width: 100%; border-collapse: collapse; }
 th {
@@ -351,4 +351,9 @@ th.num-col { text-align: right; }
 .country-page .d-flag { font-size: 56px; }
 .country-page .c-main > .d-h:first-child { margin-top: 0; }
+/* Score over time: beside the head in the drawer, under the score breakdown on the full page */
+.chart-in-main { display: none; }
+.country-page .chart-in-side { display: none; }
+.country-page .chart-in-main { display: block; margin-top: 26px; }
+.country-page .chart-in-main .c-chart { margin-top: 0; }
 .country-page .why p, .country-page .ctx { font-size: 15px; max-width: 72ch; }
 .c-sources ol { margin: 6px 0 0; padding-left: 20px; color: var(--muted); font-size: 13.5px; }
@@ -747,6 +752,45 @@ table.cani tr[hidden] { display: none; }
 .ca-all { margin: 10px 0 0; font-size: 13px; }
 .ca-all a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
+/* History list: the same two columns, with the history in numbers on the right */
+.hist-layout { margin-top: 28px; }
+.hist-layout .chlog { margin-top: 0; }
+/* taller than most screens: it scrolls on its own so the lists at the bottom stay reachable */
+.hist-aside { max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-width: thin; padding-right: 8px; }
+.hs-title { margin: 0; font-size: 17px; }
+.hs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin: 0; }
+.hs-grid dt { color: var(--text-2); font-size: 12.5px; line-height: 1.3; }
+.hs-grid dd { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 26px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
+.hist-aside .ca-note a { text-decoration: underline; text-underline-offset: 3px; }
+.hs-top li a { grid-template-columns: 1fr auto; align-items: baseline; gap: 10px; }
 @media (max-width: 980px) {
   .change-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
   .change-aside { position: static; }
-}
+  .hist-aside { order: -1; max-height: none; overflow: visible; padding-right: 0; }
+  .hs-top { display: none; }
+}
+
+/* Map: what to colour by, as buttons grouped by kind */
+.metric-bar { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 14px; }
+.metric-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.metric-group > span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 2px; }
+.metric-group button { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; }
+.metric-group button:hover { border-color: var(--muted); color: var(--text); }
+.metric-group button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
+.map-sub { margin: 0 0 14px; }
+
+/* Rankings: choose which columns to show */
+.col-off { display: none !important; }
+.col-menu { position: relative; }
+.col-menu summary { list-style: none; cursor: pointer; padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font-size: 14px; user-select: none; }
+.col-menu summary::-webkit-details-marker { display: none; }
+.col-menu summary::after { content: " ▾"; color: var(--muted); }
+.col-menu[open] summary { border-color: var(--muted); }
+.col-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(560px, calc(100vw - 32px)); padding: 14px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgb(0 0 0 / .28); }
+.col-panel fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
+.col-panel legend { padding: 0; margin-bottom: 4px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
+.col-panel label { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
+.col-panel .btn { justify-self: start; align-self: end; }
+#table td .pill { display: inline-block; min-width: 30px; font-size: 13.5px; padding: 1px 8px; }
+#table td .chip { white-space: nowrap; }
+@media (max-width: 860px) { .col-panel { right: auto; left: 0; } }
+#table td[data-col="region"] { white-space: nowrap; }