@bongos/core 1.24.86 → 1.24.88

package/modules/hall-ui/public/home-city-draw.js

@@ -37,10 +37,13 @@
 // shapes, so tests run it in node (the roadmap-timeline.js precedent). The scene
 // comes back as a tree of plain shape objects, never markup (see citySvg).
 //
-// THE PALETTE is the city's own drawing data (city-draw.js isoTheme, trimmed to
-// what this scene spends: the dark blocks in the black, the white paper model in
-// light). Everything around the drawing takes the hall's tokens; salmon
-// (var(--accent)) is spent only on what waits on the viewer.
+// THE PALETTE (task 1005196: the city in the clouds) is the hour's sky tokens
+// (--sky-now-*, style.css; set by sky-time.js) and mixes of them, as city-draw.js
+// isoTheme is: this file types in no colour. There is no ground; a face that stands in
+// the cloud fades into it (the gradients are city-draw.js skyDefs, put in this scene's
+// <defs>), and cloud lies behind the city, at each tower's foot and in front of it.
+// A face pin, the artists' glass and the salmon of what waits on the viewer are the
+// hall's own tokens, so they mean the same at every hour.
 (function (root) {
   'use strict';
 
@@ -67,50 +70,64 @@
   const LOOSE = { cx: 690, cy: 312, rx: 150, ry: 54 };
   const MOON = { x: 905, y: 70, r: 28 };
   // the museum as the skyline sees it: the marble block with its portico, the atrium behind
+  // Where the banks of cloud lie about the city's back corner (dx, dy from it, scale): far
+  // and back behind it, near in front. The cloud's shape is city-draw.js's (cloudAt, puffAt).
+  const BANKS = {
+    far: [[-250, 50, 0.55], [250, 40, 0.55], [0, -60, 0.7]],
+    back: [[-200, 130, 0.55], [220, 120, 0.55], [0, 20, 0.5]],
+    near: [[-330, 322, 0.45], [215, 336, 0.45], [-60, 392, 0.5]],
+  };
   const MUSEUM_SIL = [{ k: 'museum', x0: 4.9, y0: 12.4, x1: 11.1, y1: 13.7, h: 43, portico: true }, { k: 'museum', x0: 5.6, y0: 10.9, x1: 10.4, y1: 12.3, h: 40 }];
 
   const r1 = (n) => Math.round(n * 10) / 10;
   const num = (v) => (Number.isFinite(Number(v)) ? Number(v) : 0);
   const sum = (a) => (Array.isArray(a) ? a.reduce((s, v) => s + num(v), 0) : 0);
 
-  // The sky's own drawing data, as theme() is the city's: night over black, dusk over paper.
-  function skyTheme(mode) {
-    if (mode === 'light') {
-      return { star: '#b8732f', glow: 'rgba(214,140,70,0.28)', line: 'rgba(150,95,40,0.38)', label: 'rgba(23,24,26,0.58)', near: '#b9b6c2', far: '#d4d2dc', civic: '#c9bfb2', win: 'rgba(214,140,70,0.85)', moon: '#3b3f52', shade: '#e8eaf3', streak: 'rgba(214,140,70,0.9)', field: 'rgba(23,24,26,0.2)', beacon: '#fb9569', outline: '#8a5523' };
-    }
-    return { star: '#ffe2c2', glow: 'rgba(255,214,170,0.35)', line: 'rgba(255,214,170,0.32)', label: 'rgba(255,255,255,0.5)', near: '#060609', far: '#14141d', civic: '#0d0c12', win: 'rgba(255,214,160,0.9)', moon: '#f4ead8', shade: '#08080e', streak: 'rgba(255,226,194,0.95)', field: 'rgba(255,255,255,0.18)', beacon: '#fff4e6', outline: '#ffe2c2' };
+  // now('lit') is the token the hour's blend is written to; mix() is a share of one colour
+  // in another (or in nothing: a glaze or a thin line).
+  // The banks and the sky gradients never change with the week, and citySvg runs once a
+  // frame while the slider glides, so both are worked out once and kept (per scene origin).
+  const bankPaths = new Map();
+  const bankPath = (Gov, key, at, ox, oy) => {
+    const k = key + '|' + ox + '|' + oy;
+    if (!bankPaths.has(k)) bankPaths.set(k, at.map((c) => Gov.cloudAt(ox + c[0], oy + c[1], c[2])).join(''));
+    return bankPaths.get(k);
+  };
+  let gradDefs = null;
+  const skyGrads = (Gov, node) => {
+    if (!(Gov && typeof Gov.skyDefs === 'function')) return [];
+    if (!gradDefs) gradDefs = Gov.skyDefs([]);
+    return gradDefs.map((g) => node('linearGradient', { id: g.id, x1: 0, y1: 0, x2: 0, y2: 1 }, g.stops.map((st) => node('stop', { offset: st[0], 'stop-color': st[1] }))));
+  };
+  const now = (role) => 'var(--sky-now-' + role + ')';
+  const mix = (a, pct, b) => 'color-mix(in srgb, ' + a + ' ' + pct + '%, ' + (b || 'transparent') + ')';
+  // a face that stands in the cloud: the scene's gradient for that side (city-draw.js
+  // skyDefs), then the plain face colour for a scene drawn without them
+  const FOOT_L = 'url(#sky-face-l) ' + now('lit'), FOOT_R = 'url(#sky-face-r) ' + now('shade');
+  const SEA = 'var(--sea)';
+
+  // The sky's drawing data: the hour's tokens (the labels are words, so they are the hall's ink).
+  function skyTheme() {
+    const win = now('lamp');
+    return { star: win, glow: mix(win, 32), line: mix(win, 32), label: 'var(--ink-soft)', near: now('shade'), far: now('lit'), civic: mix(now('shade'), 70, now('top')), win: mix(win, 88), moon: now('cloud'), shade: now('mid'), streak: mix(win, 92), field: mix(now('line'), 30), beacon: win, outline: win };
   }
 
-  function theme(mode) {
-    if (mode === 'light') {
-      return {
-        work: { t: '#f6f5f8', l: '#e6e5e9', r: '#d2d1d6', s: 'rgba(23,24,26,0.22)' },
-        plinth: { t: '#efeef1', l: '#e2e1e5', r: '#cfced3', s: 'rgba(23,24,26,0.22)' },
-        glassL: 'rgba(91,111,208,0.30)', glassR: 'rgba(91,111,208,0.42)', glassT: 'rgba(91,111,208,0.22)',
-        floor: 'rgba(23,24,26,0.10)', steel: 'rgba(23,24,26,0.62)', scaffold: 'rgba(23,24,26,0.40)', lit: 'rgba(226,150,90,0.55)',
-        slab: { t: '#d9d8dd', l: '#c4c3c9', r: '#b2b1b8', s: 'rgba(23,24,26,0.4)' },
-        ground: 'rgba(23,24,26,0.035)', groundLine: 'rgba(23,24,26,0.08)',
-        orb: '#d98a4e', orbGlow: 'rgba(217,138,78,0.30)', ideaLine: 'rgba(217,138,78,0.55)',
-        av: '#e4e3e7', avAgent: '#d3d8f2', avInk: '#17181a',
-        star: '#b8732f',
-        marble: { t: '#fbfaf7', l: '#ece9e2', r: '#d8d4cb', s: 'rgba(23,24,26,0.28)' }, granite: { t: '#cfcdd2', l: '#bcbac0', r: '#a9a7ae', s: 'rgba(23,24,26,0.25)' },
-        mglass: { t: 'rgba(91,111,208,0.16)', l: 'rgba(91,111,208,0.22)', r: 'rgba(91,111,208,0.3)', s: 'rgba(60,80,180,0.5)' },
-        grass: '#c9ddbf', grassLine: 'rgba(40,70,40,0.2)', path: '#ece6da', water: '#a9cbe3', tree: ['#8fb27c', '#7aa36b', '#9dbd89'], col: '#ffffff', dark: 'rgba(23,24,26,0.35)',
-      };
-    }
+  // One palette: the hall is dark only (ADR 0402) and the hour, not a mode, changes it.
+  function theme() {
+    const roof = now('roof'), lit = now('lit'), shade = now('shade'), line = now('line');
     return {
-      work: { t: '#34343a', l: '#1c1c20', r: '#111114', s: 'rgba(255,255,255,0.12)' },
-      plinth: { t: '#27272c', l: '#141417', r: '#0b0b0d', s: 'rgba(255,255,255,0.08)' },
-      glassL: 'rgba(110,130,230,0.30)', glassR: 'rgba(110,130,230,0.20)', glassT: 'rgba(150,170,255,0.30)',
-      floor: 'rgba(255,255,255,0.06)', steel: 'rgba(255,255,255,0.70)', scaffold: 'rgba(255,255,255,0.40)', lit: 'rgba(255,200,150,0.55)',
-      slab: { t: '#5a5a62', l: '#3a3a40', r: '#2a2a2f', s: 'rgba(255,255,255,0.2)' },
-      ground: 'rgba(255,255,255,0.018)', groundLine: 'rgba(255,255,255,0.05)',
-      orb: '#ffe2c2', orbGlow: 'rgba(255,214,170,0.35)', ideaLine: 'rgba(255,214,170,0.45)',
-      av: '#2c2c32', avAgent: '#2b3157', avInk: '#ffffff',
-      star: '#ffe2c2',
-      marble: { t: '#dcd8d0', l: '#bfbab0', r: '#9f9a90', s: 'rgba(255,255,255,0.22)' }, granite: { t: '#3c3c42', l: '#28282d', r: '#1c1c20', s: 'rgba(255,255,255,0.12)' },
-      mglass: { t: 'rgba(150,170,255,0.24)', l: 'rgba(120,140,230,0.2)', r: 'rgba(100,120,210,0.16)', s: 'rgba(170,190,255,0.45)' },
-      grass: '#273f2d', grassLine: 'rgba(160,220,160,0.10)', path: '#3d3a36', water: '#34577a', tree: ['#4f7a4c', '#43683f', '#5b8656'], col: '#e8e4dc', dark: 'rgba(0,0,0,0.55)',
+      work: { t: roof, l: lit, r: shade, lg: FOOT_L, rg: FOOT_R, s: mix(roof, 40) },
+      plinth: { t: mix(roof, 60, now('base')), l: lit, r: shade, lg: FOOT_L, rg: FOOT_R, s: mix(roof, 30) },
+      glassL: mix(SEA, 36), glassR: mix(SEA, 26), glassT: mix(SEA, 36),
+      floor: mix(roof, 24), steel: mix(line, 90), scaffold: mix(line, 60), lit: mix(now('lamp'), 72),
+      slab: { t: roof, l: mix(lit, 70, roof), r: lit, s: mix(line, 40) },
+      orbGlow: mix(now('lamp'), 35),
+      av: 'var(--bg-card)', avAgent: mix(SEA, 26, 'var(--bg-card)'), avInk: 'var(--ink)',
+      star: now('lamp'),
+      marble: { t: roof, l: mix(lit, 42, roof), r: mix(shade, 46, roof), s: mix(line, 36) }, granite: { t: mix(roof, 70, lit), l: lit, r: shade, lg: FOOT_L, rg: FOOT_R, s: mix(roof, 30) },
+      mglass: { t: mix(SEA, 20), l: mix(SEA, 26), r: mix(SEA, 34), s: mix(SEA, 55) },
+      grass: mix(now('cloud-shade'), 34), grassLine: mix(line, 14), path: mix(now('cloud'), 46), water: mix(now('mid'), 46), tree: [mix(lit, 70, now('cloud-shade')), mix(lit, 86, now('cloud-shade')), mix(lit, 55, now('cloud-shade'))], col: roof, dark: mix(shade, 72),
+      plaza: mix(now('cloud'), 34), plazaLine: mix(line, 34),
     };
   }
 
@@ -138,11 +155,11 @@
       const row = (k) => Array.from({ length: W }, (_, i) => num(p[k] && p[k][i]));
       people[String(p.id)] = { id: String(p.id), login: p.login || '', name: p.name || p.login || 'Builder', avatar: p.avatar_url || null, agent: !!p.agent, build: row('build'), art: row('art'), idea: row('idea'), gov: row('gov'), vote: row('vote') };
     });
-    const now = d.now || {};
+    const nowAt = d.now || {};
     const sites = {};
-    (Array.isArray(now.sites) ? now.sites : []).forEach((s) => { if (s && s.goal_id != null && s.builder_id != null) sites[String(s.goal_id)] = { builder: String(s.builder_id), agent: !!s.agent }; });
+    (Array.isArray(nowAt.sites) ? nowAt.sites : []).forEach((s) => { if (s && s.goal_id != null && s.builder_id != null) sites[String(s.goal_id)] = { builder: String(s.builder_id), agent: !!s.agent }; });
     const waiting = {};
-    (Array.isArray(now.waiting) ? now.waiting : []).forEach((w) => { if (w && w.goal_id != null && num(w.count) > 0) waiting[String(w.goal_id)] = num(w.count); });
+    (Array.isArray(nowAt.waiting) ? nowAt.waiting : []).forEach((w) => { if (w && w.goal_id != null && num(w.count) > 0) waiting[String(w.goal_id)] = num(w.count); });
     const ideas = (Array.isArray(d.ideas) ? d.ideas : []).map((x) => ({
       id: String(x.id), week: num(x.week), by: x.by != null ? String(x.by) : null, title: x.title == null ? 'A private idea' : String(x.title),
       goal: x.goal_id != null ? String(x.goal_id) : null,
@@ -217,7 +234,7 @@
   // attribute value or a text node, which is also why this file needs no escaper.
   function citySvg(m, t, opts) {
     const o = opts || {};
-    const I = theme(o.mode);
+    const I = theme();
     const Gov = o.gov || null;
     const vb = viewBoxOf(m);
     const i = Math.max(0, Math.min(m.W - 1, Math.floor(t + 1e-6)));
@@ -229,28 +246,41 @@
     const line = (a, b, s, w, dash) => node('line', Object.assign({ x1: r1(a[0]), y1: r1(a[1]), x2: r1(b[0]), y2: r1(b[1]), stroke: s, 'stroke-width': w || 1, 'stroke-linecap': 'round' }, dash ? { 'stroke-dasharray': dash } : {}));
     const circle = (cx, cy, r, attrs) => node('circle', Object.assign({ cx: r1(cx), cy: r1(cy), r }, attrs));
     const box = (x0, y0, x1, y1, z0, h, tn) => {
-      const z1 = z0 + h;
+      // a box on the ground stands in the cloud: its two seen faces fade into it
+      const z1 = z0 + h, inCloud = !(z0 > 0);
       return [
-        face([P(x0, y1, z1), P(x1, y1, z1), P(x1, y1, z0), P(x0, y1, z0)], tn.l, tn.s),
-        face([P(x1, y1, z1), P(x1, y0, z1), P(x1, y0, z0), P(x1, y1, z0)], tn.r, tn.s),
+        face([P(x0, y1, z1), P(x1, y1, z1), P(x1, y1, z0), P(x0, y1, z0)], (inCloud && tn.lg) || tn.l, tn.s),
+        face([P(x1, y1, z1), P(x1, y0, z1), P(x1, y0, z0), P(x1, y1, z0)], (inCloud && tn.rg) || tn.r, tn.s),
         face([P(x0, y0, z1), P(x1, y0, z1), P(x1, y1, z1), P(x0, y1, z1)], tn.t, tn.s),
       ];
     };
     const quiet = (key) => (o.focus === key ? '' : ' hc-quiet');
 
+    // No ground: the city stands in cloud (task 1005196). The face gradients and the cloud's
+    // shape are the Governor City's own (Gov.skyDefs, Gov.cloudAt, Gov.puffAt), never copied:
+    // a scene drawn without it has plain faces and no cloud.
+    const cloudy = !!(Gov && typeof Gov.cloudAt === 'function' && typeof Gov.puffAt === 'function');
+    const bank = (key, at) => node('path', { d: bankPath(Gov, key, at, vb.OX, vb.OY), class: 'hc-cloud hc-cloud--' + key, filter: 'url(#hc-soft' + (key === 'near' ? '' : 'er') + ')', 'aria-hidden': 'true' });
+    const puff = (x, y, r) => { const c = P(x, y, 0); return node('path', { d: Gov.puffAt(c[0], c[1] + 4, r), class: 'hc-cloud hc-cloud--row', filter: 'url(#hc-soft)', 'aria-hidden': 'true' }); };
+    const grads = skyGrads(Gov, node);
+    // the two filters that soften the cloud (nothing that moves is blurred)
+    const soft = (id, blur) => node('filter', { id, x: -0.2, y: -0.8, width: 1.4, height: 2.6 }, [node('feGaussianBlur', { stdDeviation: blur })]);
     const out = [
-      node('defs', {}, [node('radialGradient', { id: 'hc-orb' }, [node('stop', { offset: 0, 'stop-color': I.orbGlow }), node('stop', { offset: 1, 'stop-color': 'transparent' })])]),
-      face([P(0, 0), P(m.width, 0), P(m.width, m.depth), P(0, m.depth)], I.ground, I.groundLine),
+      node('defs', {}, [node('radialGradient', { id: 'hc-orb' }, [node('stop', { offset: 0, 'stop-color': I.orbGlow }), node('stop', { offset: 1, 'stop-color': 'transparent' })]), soft('hc-soft', 7), soft('hc-softer', 12)].concat(grads)),
     ];
+    if (cloudy) out.push(bank('far', BANKS.far), bank('back', BANKS.back));
 
     // the ideas: a thin band of stars high above the city, apart from it — one door to the sky
     const seen = m.ideas.filter((x) => x.week <= i);
     const fresh = m.ideas.filter((x) => x.week === i).length;
-    const band = [node('rect', { x: 60, y: 8, width: 880, height: SKY_H - 16, fill: 'transparent' })];
+    // the stars sit in one group the sheet shows at the hour's star strength (out at night,
+    // gone by day); the door under them is there at every hour
+    const stars = [];
     seen.forEach((x) => {
       const h = hash(x.id), recent = i - x.week <= 1;
-      band.push(circle(80 + (h % 1000) / 1000 * 840, 14 + (Math.floor(h / 1000) % 1000) / 1000 * (SKY_H - 34), recent ? 1.7 : 1.1, Object.assign({ fill: I.star, opacity: recent ? 0.75 : 0.28 }, x.week === i ? { class: 'hc-twinkle' } : {})));
+      stars.push(circle(80 + (h % 1000) / 1000 * 840, 14 + (Math.floor(h / 1000) % 1000) / 1000 * (SKY_H - 34), recent ? 1.7 : 1.1, Object.assign({ fill: I.star, opacity: recent ? 0.75 : 0.28 }, x.week === i ? { class: 'hc-twinkle' } : {})));
     });
+    const band = [node('rect', { x: 60, y: 8, width: 880, height: SKY_H - 16, fill: 'transparent' }), node('g', { class: 'hc-stars' }, stars)];
     out.push(node('a', { href: '/thinking', class: 'hc-door hc-sky', 'aria-label': `The ideas: ${fresh} new this week. Open the sky.`, 'data-tip': 'Ideas', 'data-tip-body': `${fresh} new this week. Click to look up at the sky.` }, band));
 
     // every building on the ground, back to front; the civic core draws as one district
@@ -306,7 +336,11 @@
       const shipped = Math.round(d.build + d.art), byArt = Math.round(d.art);
       const tip = `${shipped} shipped${byArt ? ` · ${byArt} by artists` : ''}${who ? ` · ${agent ? `${who.name}'s agent` : who.name} on site` : ''} · click to open the goal`;
       out.push(node('a', { href: `/goals#/goal/${encodeURIComponent(a.id)}`, class: 'hc-tower', 'aria-label': `${a.title}: ${shipped} shipped. Open the goal.`, 'data-tip': a.title, 'data-tip-body': tip }, g));
+      // the cloud at its foot, over this tower and under the next one forward
+      if (cloudy) out.push(puff(x1 - 0.5, y1 - 0.5, 62));
     });
+    // the near banks, either side of the garden and under the front corner
+    if (cloudy) out.push(bank('near', BANKS.near));
 
     over.forEach((v, n) => {
       if (v.k === 'face') { out.push(avatarNode(v.p, v.who, v.agent, v.a, I, n, node, line, circle)); return; }
@@ -321,9 +355,9 @@
     // The government district: the plaza and the nine civic buildings, drawn by
     // city-draw.js's own recipes in its own palette — one hover, one door, to the street.
     function coreNode() {
-      const CI = Gov.isoTheme(o.mode === 'light' ? 'light' : 'dark');
-      const k = Gov.isoKit(TW, TH, vb.OX, vb.OY, CIVIC_S, CI, o.mode !== 'light');
-      const kids = [face([P(CORE.x0, CORE.y0), P(CORE.x1, CORE.y0), P(CORE.x1, CORE.y1), P(CORE.x0, CORE.y1)], CI.plaza, CI.plazaLine)];
+      const CI = Gov.isoTheme();
+      const k = Gov.isoKit(TW, TH, vb.OX, vb.OY, CIVIC_S, CI, true);
+      const kids = [face([P(CORE.x0, CORE.y0), P(CORE.x1, CORE.y0), P(CORE.x1, CORE.y1), P(CORE.x0, CORE.y1)], I.plaza, I.plazaLine)];
       Gov.CIVIC_SLOTS.slice().sort((p, q) => (p[1] + p[2]) - (q[1] + q[2])).forEach((sl) => {
         const list = [];
         Gov.isoInstitution(list, k, sl[0], sl[1] - 0.6, sl[2] - 0.6, {});
@@ -424,7 +458,7 @@
   // The sky for week t as shapes (citySvg's contract: a tree of plain nodes, never markup).
   function skySvg(m, t, opts) {
     const o = opts || {};
-    const C = skyTheme(o.mode);
+    const C = skyTheme();
     const Gov = o.gov || null;
     const i = Math.max(0, Math.min(m.W - 1, Math.floor(t + 1e-6)));
     const latest = t >= m.W - 1 - 1e-3;

package/modules/hall-ui/public/home-city.css

@@ -1,14 +1,36 @@
 /* modules/hall-ui/public/home-city.css — Home's project city (task 1005054; v16, task 1005058).
    The scene card, the ladder of builders beside it and the time slider under it
    (home-city.js; record modules/hall-ui/records/home-city.md). Every colour is a
-   hall token or a mix of one; the tower faces are drawing data in
-   home-city-draw.js. One sky for both the city and the ladder, so the two read
+   hall token or a mix of one; the tower faces are the hour's sky tokens, named
+   in home-city-draw.js. One sky for both the city and the ladder, so the two read
    as one scene. No :root here; motion is CSS and the hall's reduced-motion rule (style.css, `prefers-reduced-motion: reduce`)
    stops it. */
 
 .home-city { padding: 0; overflow: hidden; background: linear-gradient(var(--bg-card), var(--bg)); }
 .hc-stage { display: flex; align-items: center; gap: 4px; }
 .hc-svg { display: block; flex: 1; min-width: 0; height: auto; }
+/* THE CITY IN THE CLOUDS, AND THE HOUR (task 1005196; ADR 0402). The sky is the hour's
+   (--sky-now-*, set by sky-time.js; night at rest) and it is art. It runs edge to edge and
+   nothing darkens it: the far sky above, and the light from below behind the city (the
+   scene's own glow, so it sits under the city at any width). With the bars up the sky fills
+   the city's panel; in game mode it is the ground of the whole Home view, behind the visor,
+   and the panel is clear. What you read or press on it stands on a plate of the night
+   (--night-plate): the ladder, and in game mode the greeting; the slider keeps its own strip. */
+.hc-stage { background: linear-gradient(to bottom, var(--sky-now-top), var(--sky-now-mid) 46%, var(--sky-now-haze)); }
+.hc-svg { background: radial-gradient(ellipse closest-side at 46% 62%, var(--sky-now-cloud), var(--sky-now-base) 30%, var(--sky-now-haze) 62%, transparent); }
+.hc-svg .hc-stars { opacity: var(--sky-now-stars); }
+/* the ground is the hall's own plate seam (style.css body::before: fixed, the whole view, under the page), with no veil over it */
+html[data-game="on"] body[data-page="home"] { --plate: linear-gradient(to bottom, var(--sky-now-top), var(--sky-now-mid) 46%, var(--sky-now-haze)); --plate-veil: none; --plate-blend: normal; }
+html[data-game="on"] body[data-page="home"] .home-city, html[data-game="on"] body[data-page="home"] .hc-stage { background: none; }
+html[data-game="on"] body[data-page="home"] .page-head--hall .page-head__h { width: fit-content; padding: var(--ds-space-hair) var(--ds-space-xs); background: var(--night-plate); clip-path: var(--cut-path-sm); }
+/* the ladder's plate: the night between two strong hairlines, sized to the rungs */
+.hc-ladder { isolation: isolate; }
+.hc-ladder::before { content: ""; position: absolute; inset: calc(-1 * var(--ds-space-xs)) calc(-1 * var(--ds-space-sm)); z-index: -1; background: var(--night-plate); border: 0 solid var(--rule); border-left-width: var(--line-strong); border-right-width: var(--line-strong); }
+.hc-cloud { stroke: none; pointer-events: none; }
+.hc-cloud--row { fill: var(--sky-now-cloud); opacity: .5; }
+.hc-cloud--far { fill: color-mix(in srgb, var(--sky-now-mid) 62%, var(--sky-now-cloud-shade)); opacity: .6; }
+.hc-cloud--back { fill: var(--sky-now-cloud); opacity: .8; }
+.hc-cloud--near { fill: var(--sky-now-cloud); opacity: .95; }
 .hc-svg .hc-wait__n { font: 700 11px var(--font-display); fill: var(--accent-on); }
 .hc-svg .hc-av__i { font: 600 13px var(--font-display); }
 .hc-svg [data-tip] { cursor: default; }
@@ -18,7 +40,7 @@
 .hc-svg .hc-tower:hover .hc-face { filter: brightness(1.3); }
 /* the core and the museum stay quiet on the builder's Home so the new buildings lead;
    each comes back to full colour under the pointer or the keyboard */
-.hc-svg .hc-quiet { opacity: .3; filter: saturate(0) brightness(.85); transition: opacity .3s, filter .3s; }
+.hc-svg .hc-quiet { opacity: .62; filter: saturate(.3); transition: opacity .3s, filter .3s; }
 .hc-svg .hc-quiet:hover, .hc-svg .hc-quiet:focus-visible { opacity: .95; filter: none; }
 .hc-svg .hc-core:hover .hc-face, .hc-svg .hc-museum:hover .hc-face { filter: brightness(1.15); }
 .hc-svg .hc-sky:hover circle, .hc-svg .hc-sky:focus-visible circle { opacity: 1; }

package/modules/hall-ui/public/idea.html

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm3">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm4d">
   <!-- The record archetype, shared with task.html (task 1003305). idea.css below
        carries only what an idea record has and a task record does not. -->
   <link rel="stylesheet" href="/builders/record.css">

package/modules/hall-ui/public/ideas.html

@@ -12,7 +12,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm3">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm4d">
   <link rel="stylesheet" href="/builders/ideas.css">
 </head>
 <body data-page="ideas" data-page-title="Ideas">

package/modules/hall-ui/public/index.html

@@ -18,12 +18,12 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm3">
-  <link rel="stylesheet" href="/builders/visor.css?v=2026-11-11-helm3">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm4d">
+  <link rel="stylesheet" href="/builders/visor.css?v=2026-11-11-helm4c">
   <link rel="stylesheet" href="/builders/welcome-boot.css?v=2026-11-07-brand-mark">
   <link rel="stylesheet" href="/builders/shell-game.css?v=2026-11-11-view2">
   <link rel="stylesheet" href="/builders/hall-ask.css">
-  <link rel="stylesheet" href="/builders/home-city.css?v=2026-11-11-helm3">
+  <link rel="stylesheet" href="/builders/home-city.css?v=2026-11-11-helm4c">
   <link rel="stylesheet" href="/builders/home-gallery.css">
   <link rel="stylesheet" href="/builders/home-idea-box.css">
 </head>
@@ -136,7 +136,9 @@
 <!-- task 1005054: the project city — the drawing (pure) and the widget — in the
      home-stats zone; the Goals card (goals.js) left Home with it. -->
 <script src="/builders/city-draw.js" defer></script>
-<script src="/builders/home-city-draw.js" defer></script>
+<!-- task 1005196: the hour of the city's sky (sets the --sky-now-* tokens the city spends) -->
+<script src="/builders/sky-time.js?v=2026-11-11-helm4" defer></script>
+<script src="/builders/home-city-draw.js?v=2026-11-11-helm4d" defer></script>
 <script src="/builders/home-gallery.js" defer></script>
 <script src="/builders/home-idea-box.js" defer></script>
 <script src="/builders/home-city.js?v=2026-11-10-visor" defer></script>

package/modules/hall-ui/public/market-watch-item.html

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm3">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm4d">
   <link rel="stylesheet" href="/builders/market-watch.css">
 </head>
 <body data-page="market-watch-item" data-page-title="Market Watch">

package/modules/hall-ui/public/market-watch-rules.html

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm3">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm4d">
   <link rel="stylesheet" href="/builders/hall-ask.css">
   <link rel="stylesheet" href="/builders/market-watch-rules.css">
 </head>

package/modules/hall-ui/public/market-watch.html

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm3">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm4d">
   <link rel="stylesheet" href="/builders/market-watch.css">
   <link rel="stylesheet" href="/builders/market-watch-settings.css">
 </head>

package/modules/hall-ui/public/modules.html

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm3">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm4d">
   <!-- task 1004366: a store version's how-to reads as a document, so it borrows the
        reading room's article card (room.css is scoped to its own primer- classes). -->
   <link rel="stylesheet" href="/builders/room.css">

package/modules/hall-ui/public/money.html

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm3">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm4d">
   <link rel="stylesheet" href="/builders/oversight.css">
   <link rel="stylesheet" href="/builders/project-settings.css?v=2026-11-02-outflow">
 </head>

package/modules/hall-ui/public/my-agents.html

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm3">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm4d">
   <!-- The oversight family's archetype: a titled row with facts and actions, the
        group head and the foot line (records/oversight-family.md). This page's
        repeated thing is that row at the desk's one-line density. -->

package/modules/hall-ui/public/primer.html

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm3">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm4d">
   <link rel="stylesheet" href="/builders/room.css">
   <link rel="stylesheet" href="/builders/primer.css?v=2026-07-02-shell1">
   <link rel="stylesheet" href="/builders/diagram-viewer.css?v=2026-11-04-reading-room">

package/modules/hall-ui/public/profile.html

@@ -14,7 +14,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm3">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm4d">
   <!-- The PANEL archetype (task 1003308) before the page's own sheet. -->
   <link rel="stylesheet" href="/builders/panel.css">
   <link rel="stylesheet" href="/builders/hall-ask.css">

package/modules/hall-ui/public/project-settings.html

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm3">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm4d">
   <link rel="stylesheet" href="/builders/oversight.css">
   <link rel="stylesheet" href="/builders/project-settings.css?v=2026-11-02-outflow">
 </head>

package/modules/hall-ui/public/roster.html

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm3">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm4d">
   <!-- task 1003441: the identity cell (avatar, name, login). It was shared with
        the cross-project /people page until task 1003444 deleted it. -->
   <link rel="stylesheet" href="/builders/roster.css">

package/modules/hall-ui/public/settings.html

@@ -11,7 +11,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm3">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm4d">
   <!-- The PANEL archetype (task 1003308): the row, the switch, the field, the
        chip control and the family's voices, shared with profile and pair.
        settings.css then holds only what this page