@bongos/core 1.24.86 → 1.24.87

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

@@ -17,11 +17,13 @@
 // so tests/hall_city.mjs can pin the model without a browser, and city.js only
 // turns the lists into SVG nodes and spans.
 //
-// THE PALETTE. isoTheme() is the prototype's theme().iso sub-palette for both
-// modes, verbatim. It is drawing data (the faces of a white architectural model
-// on paper in light, dark blocks in the black in dark), the way the sky's
-// canvas carries its own ink channels; the page chrome around the drawing takes
-// the hall's tokens (city.css).
+// THE PALETTE (task 1005196: the city in the clouds). isoTheme() names every
+// face and line as one of the hour's sky tokens (--sky-now-*, style.css; set by
+// sky-time.js) or a mix of two, so this file types in no colour and the same
+// path list is right at every hour. There is no ground: a face that stands in
+// the cloud fades to the cloud's colour at its foot (skyDefs: the gradients a
+// page puts in its <defs>), cloud lies between the rows (cloudsFor) and the
+// light comes from below. The geometry is still the prototype's, path for path.
 //
 // REAL DATA, AND WHERE IT HAD TO BEND (each said once, here and in the ship
 // notes):
@@ -51,39 +53,49 @@
   // the living model's one count rule (gov-living.js), so the city never counts for itself
   const Living = root.GovLiving || (typeof require === 'function' ? require('./gov-living.js') : null);
 
-  // ---------- the iso sub-palette (Street.dc.html theme(mode).iso) ----------
-  function isoTheme(mode) {
-    if (mode === 'light') {
-      return {
-        civic: { t: 'var(--bg-card)', l: '#ecebee', r: '#d9d8dd', s: 'color-mix(in srgb, var(--ink) 34%, transparent)' },
-        work: { t: '#f4f3f6', l: '#e6e5e9', r: '#d4d3d8', s: 'color-mix(in srgb, var(--ink) 24%, transparent)' },
-        plinth: { t: '#efeef1', l: '#e2e1e5', r: '#cfced3', s: 'color-mix(in srgb, var(--ink) 28%, transparent)' },
-        roof: { t: '#e9e8ec', l: '#dddce1', r: '#cbcad0', s: 'color-mix(in srgb, var(--ink) 34%, transparent)' },
-        glass: { t: 'color-mix(in srgb, var(--sea) 10%, transparent)', l: 'color-mix(in srgb, var(--sea) 14%, transparent)', r: 'color-mix(in srgb, var(--sea) 22%, transparent)', s: 'rgba(60,80,180,0.50)' },
-        scaffold: { t: 'color-mix(in srgb, var(--ink) 3%, transparent)', l: 'color-mix(in srgb, var(--ink) 2%, transparent)', r: 'color-mix(in srgb, var(--ink) 2%, transparent)', s: 'color-mix(in srgb, var(--ink) 45%, transparent)', dash: '3 3' },
-        crate: { t: 'color-mix(in srgb, var(--ink) 6%, transparent)', l: 'color-mix(in srgb, var(--ink) 4%, transparent)', r: 'color-mix(in srgb, var(--ink) 7%, transparent)', s: 'color-mix(in srgb, var(--ink) 55%, transparent)', dash: '3 2' },
-        sign: { t: '#e2e1e5', l: '#e2e1e5', r: '#cfced3', s: 'color-mix(in srgb, var(--ink) 45%, transparent)' },
-        ground: 'color-mix(in srgb, var(--ink) 2.5%, transparent)', groundLine: 'color-mix(in srgb, var(--ink) 10%, transparent)', road: 'color-mix(in srgb, var(--ink) 5%, transparent)', lane: 'color-mix(in srgb, var(--ink) 22%, transparent)',
-        plaza: 'color-mix(in srgb, var(--ink) 5%, transparent)', plazaLine: 'color-mix(in srgb, var(--ink) 16%, transparent)', plot: 'color-mix(in srgb, var(--ink) 3.5%, transparent)', plotLine: 'color-mix(in srgb, var(--ink) 14%, transparent)', grid: 'color-mix(in srgb, var(--ink) 6%, transparent)',
-        detail: 'color-mix(in srgb, var(--ink) 18%, transparent)', wc: 'color-mix(in srgb, var(--ink) 16%, transparent)', wcLit: 'rgba(214,140,80,0.60)', door: '#cfced3', beacon: 'var(--accent)',
-        vacantFill: 'color-mix(in srgb, var(--ink) 2%, transparent)', vacantLine: 'color-mix(in srgb, var(--ink) 45%, transparent)', tree: 'color-mix(in srgb, var(--sea) 22%, transparent)', treeLine: 'rgba(60,80,180,0.45)',
-      };
-    }
+  // ---------- the iso sub-palette: the hour's sky tokens, never a literal ----------
+  // 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).
+  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 page's gradient for that side (skyDefs), then
+  // the plain face colour for a drawing that carries no <defs> (an SVG paint's fallback).
+  const SIDES = Object.freeze({ l: 'lit', r: 'shade' });
+  const hazeId = (t) => (t > 0 ? '-h' + Math.round(t * 100) : '');
+  const faceFill = (side, t) => 'url(#sky-face-' + side + hazeId(t) + ') ' + (t > 0 ? mix(now(SIDES[side]), Math.round((1 - t) * 100), now('haze')) : now(SIDES[side]));
+  // One palette: the hall is dark only (ADR 0402) and the hour, not a mode, changes it.
+  function isoTheme() {
+    const roof = now('roof'), lit = now('lit'), shade = now('shade'), line = now('line');
+    const edge = mix(roof, 46);
     return {
-      civic: { t: '#3b3b41', l: '#25252a', r: '#18181c', s: 'rgba(255,255,255,0.14)' },
-      work: { t: '#2d2d32', l: '#19191c', r: '#0f0f12', s: 'rgba(255,255,255,0.12)' },
-      plinth: { t: '#27272c', l: '#141417', r: '#0b0b0d', s: 'rgba(255,255,255,0.10)' },
-      roof: { t: '#38383e', l: '#2b2b31', r: '#1d1d22', s: 'rgba(255,255,255,0.14)' },
-      glass: { t: 'rgba(150,170,255,0.22)', l: 'rgba(120,140,230,0.17)', r: 'rgba(100,120,210,0.12)', s: 'rgba(170,190,255,0.42)' },
-      scaffold: { t: 'rgba(255,255,255,0.03)', l: 'rgba(255,255,255,0.02)', r: 'rgba(255,255,255,0.015)', s: 'rgba(255,255,255,0.45)', dash: '3 3' },
-      crate: { t: 'rgba(255,255,255,0.07)', l: 'rgba(255,255,255,0.04)', r: 'rgba(255,255,255,0.03)', s: 'rgba(255,255,255,0.55)', dash: '3 2' },
-      sign: { t: '#202024', l: '#202024', r: '#141417', s: 'rgba(255,255,255,0.4)' },
-      ground: 'rgba(255,255,255,0.012)', groundLine: 'rgba(255,255,255,0.05)', road: 'rgba(255,255,255,0.025)', lane: 'rgba(255,255,255,0.12)',
-      plaza: 'rgba(255,255,255,0.045)', plazaLine: 'rgba(255,255,255,0.16)', plot: 'rgba(255,255,255,0.03)', plotLine: 'rgba(255,255,255,0.13)', grid: 'rgba(255,255,255,0.045)',
-      detail: 'rgba(255,255,255,0.10)', wc: 'rgba(255,255,255,0.10)', wcLit: 'rgba(255,214,170,0.80)', door: '#050506', beacon: '#fff4e6',
-      vacantFill: 'rgba(255,255,255,0.02)', vacantLine: 'rgba(255,255,255,0.4)', tree: 'color-mix(in srgb, var(--sea) 32%, transparent)', treeLine: 'rgba(140,155,230,0.45)',
+      civic: { t: roof, l: lit, r: shade, lg: faceFill('l', 0), rg: faceFill('r', 0), s: edge },
+      work: { t: mix(roof, 86, now('haze')), l: lit, r: shade, lg: faceFill('l', 0), rg: faceFill('r', 0), s: mix(roof, 36) },
+      plinth: { t: mix(roof, 60, now('base')), l: lit, r: shade, lg: faceFill('l', 0), rg: faceFill('r', 0), s: mix(roof, 30) },
+      roof: { t: roof, l: mix(lit, 62, roof), r: mix(shade, 78, lit), s: edge },
+      glass: { t: mix(line, 16), l: mix(line, 24), r: mix(line, 32), s: mix(line, 62) },
+      scaffold: { t: mix(line, 5), l: mix(line, 3), r: mix(line, 3), s: mix(line, 72), dash: '3 3' },
+      crate: { t: mix(line, 14), l: mix(line, 9), r: mix(line, 11), s: mix(line, 82), dash: '3 2' },
+      sign: { t: lit, l: lit, r: shade, s: mix(line, 62) },
+      lane: mix(line, 30), plaza: mix(now('cloud'), 34), plazaLine: mix(line, 34), plot: mix(now('cloud'), 12), plotLine: mix(line, 30), grid: mix(line, 12),
+      detail: mix(roof, 34), wc: mix(now('glow'), 58), wcLit: now('glow'), door: shade, beacon: now('lamp'),
+      vacantFill: mix(line, 5), vacantLine: mix(line, 72), tree: mix(now('cloud-shade'), 72), treeLine: mix(line, 52),
     };
   }
+  // The gradients a page puts in its <defs> for the faces that stand in the cloud: the
+  // face colour at the top, the cloud's at the foot. One pair per haze share in use
+  // (0 is the clear city). Each is { id, stops: [[offset, colour], …] }, top to bottom.
+  function skyDefs(hazes) {
+    const seen = {}, out = [];
+    [0].concat(Array.isArray(hazes) ? hazes : []).forEach((h) => {
+      const t = Math.max(0, Math.min(1, Number(h) || 0)), id = hazeId(t);
+      if (seen[id]) return;
+      seen[id] = true;
+      const far = (c) => (t > 0 ? mix(c, Math.round((1 - t) * 100), now('haze')) : c);
+      out.push({ id: 'sky-face-l' + id, stops: [[0, far(now('lit'))], [0.5, far(mix(now('lit'), 84, now('base')))], [1, far(now('base'))]] });
+      out.push({ id: 'sky-face-r' + id, stops: [[0, far(now('shade'))], [0.5, far(mix(now('shade'), 86, now('base')))], [1, far(mix(now('base'), 78, now('shade')))]] });
+    });
+    return out;
+  }
 
   // ---------- the prototype's primitives ----------
   function push(out, d, f, s, dash, w) { out.push({ d: d, f: f, s: s, dash: dash || 'none', w: w || 1 }); }
@@ -104,8 +116,10 @@
   function isoBox(out, k, x0, y0, x1, y1, z0, h, tone, o) {
     o = o || {};
     const P = k.P, z1 = z0 + h, dash = tone.dash || 'none';
-    push(out, k.poly([P(x0, y1, z1), P(x1, y1, z1), P(x1, y1, z0), P(x0, y1, z0)]), tone.l, tone.s, dash);
-    push(out, k.poly([P(x1, y1, z1), P(x1, y0, z1), P(x1, y0, z0), P(x1, y1, z0)]), tone.r, tone.s, dash);
+    // a box on the ground stands in the cloud: its two seen faces fade into it
+    const inCloud = !(z0 > 0);
+    push(out, k.poly([P(x0, y1, z1), P(x1, y1, z1), P(x1, y1, z0), P(x0, y1, z0)]), (inCloud && tone.lg) || tone.l, tone.s, dash);
+    push(out, k.poly([P(x1, y1, z1), P(x1, y0, z1), P(x1, y0, z0), P(x1, y1, z0)]), (inCloud && tone.rg) || tone.r, tone.s, dash);
     push(out, k.poly([P(x0, y0, z1), P(x1, y0, z1), P(x1, y1, z1), P(x0, y1, z1)]), tone.t, tone.s, dash);
     let det = '';
     const ix = Math.min(0.08, (x1 - x0) / 6), iy = Math.min(0.08, (y1 - y0) / 6);
@@ -420,40 +434,34 @@
   const HAZE = Object.freeze([0.62, 0.48, 0.34]);
   const ACTIVE_HAZE = 0.4; // a district with an agent at work keeps this share of its band's haze
   const QUIET_HAZE = 0.3; // a civic building with no agent and no ask sits darker
-  // the haze the far bands mix toward: the void in dark, and on paper a cool sea-tinted
-  // paper, so distance reads as atmosphere (fainter, cooler, lower contrast) in both modes
-  const VOID = Object.freeze({ dark: '#000000', light: '#cbd3e4' }); // light: a cooler, deeper sea so the haze reads on paper (task 1004718)
+  // The far bands mix toward the haze between sky and cloud (--sky-now-haze), so distance
+  // reads as atmosphere at every hour.
 
   const clamp01 = (n) => Math.max(0, Math.min(1, Number(n) || 0));
   const r1 = (n) => Math.round(n * 10) / 10;
 
-  // ---------- haze: a tone mixed toward the void (drawing data, like isoTheme) ----------
-  function parseColor(c) {
-    let m = /^#([0-9a-f]{6})$/i.exec(String(c));
-    if (m) { const n = parseInt(m[1], 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255, 1]; }
-    m = /^rgba?\(([^)]+)\)$/i.exec(String(c));
-    if (m) { const p = m[1].split(',').map((x) => Number(x.trim())); return [p[0], p[1], p[2], p.length > 3 ? p[3] : 1]; }
-    return null;
+  // ---------- haze: a tone mixed toward the haze (drawing data, like isoTheme) ----------
+  // One tone, a share t of the way into the haze: a face that fades into the cloud takes
+  // the hazed gradient of its side, a glaze or a line (anything mixed with nothing) thins
+  // out, and a solid face mixes toward the haze.
+  function hazed(c, t) {
+    const s = String(c);
+    if (s === 'none') return s;
+    const face = /^url\(#sky-face-([lr])\)/.exec(s);
+    if (face) return faceFill(face[1], t);
+    const keep = Math.round((1 - t) * 100);
+    return s.indexOf('transparent') >= 0 ? mix(s, keep) : mix(s, keep, now('haze'));
   }
-  const hex2 = (n) => ('0' + Math.max(0, Math.min(255, Math.round(n))).toString(16)).slice(-2);
-  // A solid face mixes toward the ground; a line or a glaze (alpha) thins out.
-  function mixToward(c, target, t) {
-    const a = parseColor(c), b = parseColor(target);
-    if (!a || !b || !(t > 0)) return c;
-    if (a[3] < 1) return 'rgba(' + a[0] + ',' + a[1] + ',' + a[2] + ',' + Math.round(a[3] * (1 - t) * 1000) / 1000 + ')';
-    return '#' + hex2(a[0] + (b[0] - a[0]) * t) + hex2(a[1] + (b[1] - a[1]) * t) + hex2(a[2] + (b[2] - a[2]) * t);
-  }
-  function hazeTheme(I, t, mode) {
+  function hazeTheme(I, t) {
     if (!(t > 0)) return I;
-    const to = VOID[mode] || VOID.dark;
     const out = {};
     Object.keys(I).forEach((key) => {
       const v = I[key];
       if (v && typeof v === 'object') {
         const o = {};
-        Object.keys(v).forEach((f) => { o[f] = f === 'dash' ? v[f] : mixToward(v[f], to, t); });
+        Object.keys(v).forEach((f) => { o[f] = f === 'dash' ? v[f] : hazed(v[f], t); });
         out[key] = o;
-      } else out[key] = typeof v === 'string' ? mixToward(v, to, t) : v;
+      } else out[key] = typeof v === 'string' ? hazed(v, t) : v;
     });
     return out;
   }
@@ -883,11 +891,60 @@
     return parts.join(' · ');
   }
 
+  // ---------- the cloud the city stands in (task 1005196) ----------
+  // One cloud: six soft ellipses, as one path, centred on (x, y) at scale s.
+  const CLOUD = Object.freeze([[70, 34, 80, 26], [160, 16, 90, 40], [280, 4, 110, 52], [400, 18, 100, 40], [510, 32, 90, 28], [290, 44, 300, 28]]);
+  function cloudAt(x, y, s) {
+    return CLOUD.map((e) => ellipse(r1(x + (e[0] - 290) * s), r1(y + (e[1] - 20) * s), r1(e[2] * s), r1(e[3] * s))).join('');
+  }
+  // One puff at a building's foot: a flat ellipse centred on (x, y), r wide. Home's city
+  // draws its banks and puffs with cloudAt and this, so the cloud's shape lives here alone.
+  function puffAt(x, y, r) { return ellipse(r1(x), r1(y), r, r1(r * 0.36)); }
+  // Where the banks lie on the 1440 x 900 plate: far (the sky's own shade, behind the city),
+  // back (lit, behind the far corner), then in front of the near corner: lit, shaded, dark.
+  const BANKS = Object.freeze({
+    far: [[200, 190, 1.1], [1240, 190, 1.1], [720, 70, 1.2]],
+    back: [[360, 300, 0.9], [1080, 300, 0.9], [720, 196, 0.8]],
+    near: [[300, 600, 0.8], [520, 706, 0.8], [720, 758, 0.9], [920, 706, 0.8], [1140, 600, 0.8]],
+    shade: [[170, 700, 1.1], [460, 816, 1.1], [980, 816, 1.1], [1270, 700, 1.1]],
+    dark: [[50, 856, 1.5], [720, 916, 1.6], [1390, 856, 1.5]],
+  });
+  // the two softening filters a page defines for the cloud: { id, blur } (an SVG blur, in px of the plate)
+  const SOFT = Object.freeze([Object.freeze({ id: 'sky-soft', blur: 8 }), Object.freeze({ id: 'sky-softer', blur: 14 })]);
+  // The cloud as data: the five banks (each one path, its class the layer it is), and the
+  // puffs that lie between the rows: one at the foot of every standing building, gathered
+  // by depth so the page lays each row's over that row and under the next. The page's sheet
+  // gives every layer its colour (a sky token); `soft` names the filter that softens it.
+  function cloudsFor(k, feet) {
+    // near and row cloud is soft; the far, back, shaded and dark banks softer (SOFT: the page's two filters)
+    const bank = (key) => ({ d: BANKS[key].map((c) => cloudAt(c[0], c[1], c[2])).join(''), f: 'none', s: 'none', dash: 'none', w: 1, cls: 'city-cloud city-cloud--' + key, soft: key === 'near' ? SOFT[0] : SOFT[1] });
+    const rows = {};
+    (feet || []).forEach((f) => {
+      const at = k.P(f.x + 0.25, f.y + 0.25, 0), row = Math.floor(f.depth / 2) * 2 + 1;
+      rows[row] = (rows[row] || '') + puffAt(at[0], at[1] + 5, f.r);
+    });
+    return {
+      back: [bank('far'), bank('back')],
+      rows: Object.keys(rows).map(Number).sort((a, b) => a - b).map((depth) => ({ depth: depth, d: rows[depth], f: 'none', s: 'none', dash: 'none', w: 1, cls: 'city-cloud city-cloud--row', soft: SOFT[0] })),
+      front: [bank('near'), bank('shade'), bank('dark')],
+    };
+  }
+  // The stars: a fixed scatter over the top of the plate, one path. The sheet shows them at
+  // the hour's star strength, so they are out at night and gone by day.
+  function starField() {
+    let d = '';
+    for (let i = 0; i < 46; i++) {
+      const x = 30 + rnd(i * 3 + 11) * 1380, y = 16 + rnd(i * 5 + 29) * 330, r = 0.7 + rnd(i * 7 + 2) * 0.8;
+      d += ellipse(r1(x), r1(y), r1(r), r1(r));
+    }
+    return { d: d, f: 'none', s: 'none', dash: 'none', w: 1, cls: 'city-stars' };
+  }
+
   // The whole home view as data.
   //   docket   the GET /government/docket body, or null when it failed
   //   goals    GET /goals goals[] (any status; only 'open' ones are drawn)
   //   rollups  GET /goals/rollups rollups[] (goal_id → task counts)
-  //   mode     'dark' | 'light'
+  //   mode     ignored: the hall is dark only, and the hour (sky-time.js) paints the city
   //   now      ms since the epoch (a deadline inside a day is urgent)
   // and, for the living city (task 1004685):
   //   living        GovLiving.livingModel() over the same reads (gov-living.js)
@@ -896,8 +953,8 @@
   function cityModel(input) {
     const opts = input || {};
     const docket = opts.docket && typeof opts.docket === 'object' ? opts.docket : null;
-    const mode = opts.mode === 'light' ? 'light' : 'dark';
-    const I = isoTheme(mode);
+    const mode = 'dark';
+    const I = isoTheme();
     const counts = docket && docket.counts ? docket.counts : { needs: 0, moving: 0, settled: 0 };
     const living = opts.living && Array.isArray(opts.living.buildings) ? Object.assign({}, opts.living, { byKey: {} }) : null;
     if (living) living.buildings.forEach((b) => { if (b && b.key) living.byKey[b.key] = b; });
@@ -914,12 +971,11 @@
     const k = isoKit(60, 30, 720, 176, 30 / 28, I, evening);
     const P = k.P;
     const kits = {};
-    const kitFor = (t) => (t > 0 ? (kits[t] = kits[t] || isoKit(60, 30, 720, 176, 30 / 28, hazeTheme(I, t, mode), evening)) : k);
+    const kitFor = (t) => (t > 0 ? (kits[t] = kits[t] || isoKit(60, 30, 720, 176, 30 / 28, hazeTheme(I, t), evening)) : k);
 
-    // ground, the ring road and its lanes, the plaza
+    // No ground and no road fill: the city stands in cloud. The ring road keeps its lane
+    // marks (the parcels and the spend conduit run along them), then the plaza, lit from below.
     const flat = [];
-    push(flat, k.poly([P(0, 0), P(16, 0), P(16, 16), P(0, 16)]), I.ground, I.groundLine);
-    [[4, 0, 5, 16], [11, 0, 12, 16], [0, 4, 16, 5], [0, 11, 16, 12]].forEach((q) => push(flat, k.poly([P(q[0], q[1]), P(q[2], q[1]), P(q[2], q[3]), P(q[0], q[3])]), I.road, 'none'));
     push(flat, k.seg(P(4.5, 0), P(4.5, 16)) + k.seg(P(11.5, 0), P(11.5, 16)) + k.seg(P(0, 4.5), P(16, 4.5)) + k.seg(P(0, 11.5), P(16, 11.5)), 'none', I.lane, '2 7');
     push(flat, k.poly([P(5, 5), P(11, 5), P(11, 11), P(5, 11)]), I.plaza, I.plazaLine);
 
@@ -973,6 +1029,8 @@
       });
     });
     blds.sort((a, b) => a.depth - b.depth);
+    const clouds = cloudsFor(k, CIVIC_SLOTS.map((s) => ({ x: s[1] + 1, y: s[2] + 1, r: 58, depth: s[1] + s[2] + 2 }))
+      .concat(districts.reduce((all, D) => all.concat(D.work.filter((w) => w.kind !== 'trees' && w.kind !== 'slab').map((w) => ({ x: w.gx + 0.5, y: w.gy + 0.5, r: 31, depth: w.gx + w.gy + 1 }))), [])));
 
     // one pin over each building with a matter, in its most important matter's tier
     const slotOf = {};
@@ -1022,7 +1080,7 @@
       + (districts.length === 1 ? 'one district' : districts.length + ' districts') + ', one for each open goal'
       + (pins.length ? '. Pins: ' + pinCount.needs + ' need you, ' + pinCount.moving + ' moving, ' + pinCount.settled + ' settled.' : '.');
 
-    const out = { mode: mode, evening: evening, crate: { fill: I.crate.t, edge: I.crate.s }, flat: flat, blds: blds, pins: pins, parcels: parcels, districts: districts, unplaced: unplaced, line: line, label: label };
+    const out = { mode: mode, evening: evening, crate: { fill: I.crate.t, edge: I.crate.s }, defs: skyDefs(Object.keys(kits).map(Number)), clouds: clouds, stars: starField(), flat: flat, blds: blds, pins: pins, parcels: parcels, districts: districts, unplaced: unplaced, line: line, label: label };
     if (!living) return out;
 
     // ---- the living city's three levels (task 1004685) ----
@@ -1074,14 +1132,14 @@
   const STREET_HREF = '/builders/street';
 
   const api = {
-    isoTheme: isoTheme, isoKit: isoKit, isoBox: isoBox, isoGable: isoGable, isoHip: isoHip, isoSaw: isoSaw,
+    isoTheme: isoTheme, skyDefs: skyDefs, SOFT: SOFT, cloudsFor: cloudsFor, cloudAt: cloudAt, puffAt: puffAt, starField: starField, isoKit: isoKit, isoBox: isoBox, isoGable: isoGable, isoHip: isoHip, isoSaw: isoSaw,
     isoTree: isoTree, isoLight: isoLight, isoInstitution: isoInstitution, isoWork: isoWork, glyph: glyph, rnd: rnd,
     lotsFor: lotsFor, districtWork: districtWork, cityModel: cityModel, rulesAtWork: rulesAtWork,
     matterTier: matterTier, buildingPin: buildingPin, pinAria: pinAria, TIERS: TIERS, URGENT_MS: URGENT_MS,
     CIVIC_SLOTS: CIVIC_SLOTS, ROOF: ROOF, BASE_LOTS: BASE_LOTS, MAX_DISTRICTS: MAX_DISTRICTS,
     FALLBACK_LINE: FALLBACK_LINE, STREET_HREF: STREET_HREF,
     // the living city (task 1004685)
-    hazeTheme: hazeTheme, mixToward: mixToward, hazeBand: hazeBand, structureFloors: structureFloors, asksAt: asksAt,
+    hazeTheme: hazeTheme, hazeBand: hazeBand, structureFloors: structureFloors, asksAt: asksAt,
     spendRate: spendRate, trunkWidth: trunkWidth, plaqueFor: plaqueFor, ctaFor: ctaFor, livingLine: livingLine,
     FLOOR_H: FLOOR_H, BUILD_FLOORS: BUILD_FLOORS, CORE: CORE, BODY: BODY, LANE_PERIOD: LANE_PERIOD, POD_GAP: POD_GAP,
     MAX_LANE_PODS: MAX_LANE_PODS, MAX_PODS: MAX_PODS, ACTIVE_HAZE: ACTIVE_HAZE,

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

@@ -6,8 +6,9 @@
    prototype wrote its theme() values inline; here every colour is one of the
    hall's tokens (style.css + the branding pack), whose values ARE the
    prototype's (bg #000 / #edecee, ink, ink-soft, the rule, the accent
-   #fb9569 and its dark ink #2a1305). The drawing's own faces are drawing data
-   in city-draw.js (the prototype's iso sub-palette).
+   #fb9569 and its dark ink #2a1305). The drawing's faces and the sky behind
+   it are the hour's sky tokens (--sky-now-*, task 1005196: the foot of this
+   sheet); city-draw.js types in no colour.
    No :root here (tests/hall_reading_world.mjs): page tokens live on the body.
    The two dark blocks below are byte-identical twins (the hall's switch is
    html[data-theme], set by city.js from the same 'hall-theme' preference
@@ -169,7 +170,7 @@ html[data-fullscreen="on"] .city-top { right: 184px; }
 .city-beacon--stem { fill: none; stroke: var(--sea); }
 .city-beacon--ring { fill: none; stroke: color-mix(in srgb, var(--sea) 60%, transparent); }
 .city-sky, .city-hits { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; pointer-events: none; }
-.city-pod { position: absolute; left: 0; top: 0; width: 11px; height: 5px; margin: -2.5px 0 0 -5.5px; box-sizing: border-box; border-radius: 999px; background: linear-gradient(180deg, var(--city-pod-hi), var(--city-pod-lo)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg) 55%, transparent); offset-rotate: auto; offset-distance: var(--pod-at, 30%); }
+.city-pod { position: absolute; left: 0; top: 0; width: 11px; height: 5px; margin: -2.5px 0 0 -5.5px; box-sizing: border-box; border-radius: 999px; background: linear-gradient(180deg, var(--city-pod-hi), var(--city-pod-lo)); box-shadow: 0 0 0 1.5px var(--bg); offset-rotate: auto; offset-distance: var(--pod-at, 30%); }
 
 .city-lane__more { position: absolute; transform: translate(-50%, -150%); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
 
@@ -458,3 +459,36 @@ html[data-fullscreen="on"] .city-top { right: 184px; }
 .ask-full summary { display: inline-flex; align-items: center; min-height: 24px; cursor: pointer; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gov-chip-edge-pick); }
 .ask-full__text { margin: 6px 0 0; max-height: 240px; overflow-y: auto; white-space: pre-wrap; line-height: 1.5; overflow-wrap: anywhere; }
 .ask-full summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+
+/* ======================================================================
+   THE CITY IN THE CLOUDS, AND THE HOUR (task 1005196; ADR 0402)
+   The same city, with no ground: it stands in cloud, lit from below, and the
+   sky behind it is the hour's (sky-time.js sets --sky-now-*; they rest at
+   night). These are art tokens: they paint the scene and nothing you read or
+   press. The sky and its cloud run to all four edges of the view at every
+   hour: nothing darkens the frame. The wordmark, the plaque, the line and
+   the archive note stay Helm night by each standing on a small plate of the
+   night (--night-plate), sized to its words.
+   ====================================================================== */
+.city-frame { background: radial-gradient(ellipse 82% 82% at 50% 56%, var(--sky-now-cloud), var(--sky-now-base) 24%, var(--sky-now-haze) 46%, var(--sky-now-mid) 80%, color-mix(in srgb, var(--sky-now-mid) 60%, var(--sky-now-top))); }
+/* what is drawn over the scene takes the hour's line colour, so it reads on the bright cloud of midday and on the night */
+.city-stage { --city-lane: color-mix(in srgb, var(--sky-now-line) 62%, transparent); --city-crane: color-mix(in srgb, var(--sky-now-line) 86%, transparent); --city-win-lit: var(--sky-now-glow); }
+.city-cloud { stroke: none; }
+/* each bank is softened by one of the stage's two SVG filters (city.html), named on the path; nothing that moves is */
+.city-cloud--row { fill: var(--sky-now-cloud); opacity: .5; }
+.city-cloud--far { fill: color-mix(in srgb, var(--sky-now-mid) 62%, var(--sky-now-cloud-shade)); opacity: .6; }
+.city-cloud--back { fill: var(--sky-now-cloud); opacity: .8; }
+.city-cloud--near { fill: var(--sky-now-cloud); opacity: .95; }
+.city-cloud--shade { fill: var(--sky-now-cloud-shade); }
+.city-cloud--dark { fill: color-mix(in srgb, var(--sky-now-cloud-shade) 62%, var(--sky-now-mid)); }
+.city-stars { fill: var(--sky-now-lamp); stroke: none; opacity: var(--sky-now-stars); }
+.city-stage .city-tally--yes { fill: var(--sky-now-line); }
+.city-stage .city-tally--no { fill: color-mix(in srgb, var(--sky-now-line) 40%, transparent); }
+.city-stage .city-tally--open { stroke: var(--sky-now-line); }
+/* a marker keeps its meaning's colour and gains a night edge, so it reads on any sky */
+.city-pin--moving .city-pin__head, .city-pin--settled .city-pin__head { outline: 2px solid var(--bg); }
+.city-line, .city-mark, .city-plaque, .city-archived { background: var(--night-plate); clip-path: var(--cut-path-sm); }
+.city-line { width: fit-content; margin-inline: auto; padding: 4px 14px; }
+.city-mark { padding: 4px 12px; }
+.city-plaque { padding: 6px 14px; margin-left: -14px; }
+.city-archived { left: 50%; right: auto; width: max-content; max-width: calc(100% - 32px); transform: translateX(-50%); padding: 0 12px; opacity: 1; }

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

@@ -11,9 +11,9 @@
        links, injected into this head by the server like every hall page's
        (tests/hall_tokens.mjs: no hall page hardcodes a web-font stylesheet).
        The prototype carried its own Google Fonts link for the same two faces. -->
-  <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/city.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/city.css?v=2026-11-11-helm4c">
   <!-- the ask card in the glass language, shared with the street's deck (task 1004702) -->
   <link rel="stylesheet" href="/builders/street-deck.css?v=2026-10-17-tidy">
 </head>
@@ -78,8 +78,17 @@
       <div class="city-zoom">
         <div class="city-drift">
           <svg class="city-svg" id="citySvg" width="1440" height="900" viewBox="0 0 1440 900" aria-hidden="true" focusable="false">
+            <!-- the city in the clouds (task 1005196): the face gradients, the stars and the far
+                 banks behind the city, and the near banks in front of it -->
+            <defs>
+              <filter id="sky-soft" x="-0.2" y="-0.8" width="1.4" height="2.6"><feGaussianBlur stdDeviation="8"></feGaussianBlur></filter>
+              <filter id="sky-softer" x="-0.2" y="-0.8" width="1.4" height="2.6"><feGaussianBlur stdDeviation="14"></feGaussianBlur></filter>
+            </defs>
+            <defs id="cityDefs"></defs>
+            <g id="citySkyBack"></g>
             <g id="cityFlat"></g>
             <g id="cityBlds" class="city-blds"></g>
+            <g id="cityCloudFront"></g>
             <g id="citySkyLanes" class="city-sky-lanes"></g>
           </svg>
           <div class="city-parcels" id="cityParcels" aria-hidden="true"></div>
@@ -114,7 +123,9 @@
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/gov-living.js?v=2026-10-09-positions1" defer></script>
 <script src="/builders/gov-feeds.js?v=2026-10-09-living3" defer></script>
-<script src="/builders/city-draw.js?v=2026-10-17-tidy" defer></script>
+<!-- task 1005196: the hour of the city's sky (sets the --sky-now-* tokens the drawing spends) -->
+<script src="/builders/sky-time.js?v=2026-11-11-helm4" defer></script>
+<script src="/builders/city-draw.js?v=2026-11-11-helm4b" defer></script>
 <!-- a building's card answers its first ask in place through the deck's own
      route (task 1004702): the desk rows (street-desk.js over the street's kit)
      and the deck's card and sender (street-deck.js) -->
@@ -126,6 +137,6 @@
 <script src="/builders/street-deck.js?v=2026-10-13-glass1" defer></script>
 <script src="/builders/city-decide.js?v=2026-10-23-decide12" defer></script>
 <script src="/builders/city-switchboard.js?v=2026-10-23-board5" defer></script>
-<script src="/builders/city.js?v=2026-11-11-helm" defer></script>
+<script src="/builders/city.js?v=2026-11-11-helm4" defer></script>
 </body>
 </html>

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

@@ -158,6 +158,8 @@
     if (p.dash && p.dash !== 'none') el.setAttribute('stroke-dasharray', p.dash);
     el.setAttribute('stroke-width', String(p.w || 1));
     if (p.cls) el.setAttribute('class', p.cls);
+    // a bank of cloud is softened by one of the stage's two filters (city.html)
+    if (p.soft) el.setAttribute('filter', 'url(#' + p.soft.id + ')');
     return el;
   }
   // A part of a building that moves (or stands at its still frame) is its own group.
@@ -168,6 +170,19 @@
     part.polys.forEach(function (p) { g.appendChild(pathEl(p)); });
     return g;
   }
+  // A gradient for the faces that stand in the cloud (city-draw.js skyDefs): top to bottom.
+  function gradEl(def) {
+    var g = document.createElementNS(SVG_NS, 'linearGradient');
+    g.setAttribute('id', def.id);
+    g.setAttribute('x1', '0'); g.setAttribute('y1', '0'); g.setAttribute('x2', '0'); g.setAttribute('y2', '1');
+    def.stops.forEach(function (st) {
+      var s = document.createElementNS(SVG_NS, 'stop');
+      s.setAttribute('offset', String(st[0]));
+      s.style.setProperty('stop-color', st[1]);
+      g.appendChild(s);
+    });
+    return g;
+  }
   function span(cls) { var el = document.createElement('span'); el.className = cls; return el; }
   function node(tag, cls, text) { var el = document.createElement(tag); if (cls) el.className = cls; if (text != null) el.textContent = String(text); return el; }
 
@@ -333,11 +348,20 @@
       living: data.living || null, constitution: data.raw.constitution || null, counts: countsNow(),
     });
     var flat = $('cityFlat'), blds = $('cityBlds'), sky = $('citySkyLanes'), parcels = $('cityParcels'), pods = $('citySky'), pins = $('cityPins'), hits = $('cityHits');
-    clear(flat); clear(blds); clear(sky); clear(parcels); clear(pods); clear(pins); clear(hits);
+    var defs = $('cityDefs'), back = $('citySkyBack'), front = $('cityCloudFront');
+    clear(flat); clear(blds); clear(sky); clear(parcels); clear(pods); clear(pins); clear(hits); clear(defs); clear(back); clear(front);
+    // the cloud city (task 1005196): the stars and the far banks behind, a row of cloud
+    // after each row of buildings, the near banks in front
+    if (defs) (model.defs || []).forEach(function (d) { defs.appendChild(gradEl(d)); });
+    var clouds = model.clouds || { back: [], rows: [], front: [] };
+    if (back) { if (model.stars) back.appendChild(pathEl(model.stars)); clouds.back.forEach(function (p) { back.appendChild(pathEl(p)); }); }
+    if (front) clouds.front.forEach(function (p) { front.appendChild(pathEl(p)); });
+    var rows = clouds.rows.slice();
     model.flat.forEach(function (p) { flat.appendChild(pathEl(p)); });
     var civicKeys = {};
     (model.civic || []).forEach(function (c) { civicKeys[c.key] = true; });
     model.blds.forEach(function (b) {
+      while (rows.length && rows[0].depth < b.depth) blds.appendChild(pathEl(rows.shift()));
       var g = document.createElementNS(SVG_NS, 'g');
       g.setAttribute('data-key', b.key);
       if (b.quiet) g.setAttribute('data-quiet', '');
@@ -347,6 +371,7 @@
       (b.parts || []).forEach(function (part) { g.appendChild(partEl(part)); });
       blds.appendChild(g);
     });
+    rows.forEach(function (p) { blds.appendChild(pathEl(p)); });
     model.parcels.forEach(function (pc) { parcels.appendChild(drawParcel(pc)); });
     if (model.living) {
       // the capsules plug in once, on the first living drawing; a redraw does not replay it

package/modules/hall-ui/public/collab.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/collab.css">
 </head>

package/modules/hall-ui/public/commands.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/commands.css">
 </head>
 <body data-page="commands" data-page-title="Commands">

package/modules/hall-ui/public/copy-desk.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/copy-desk.css">
 </head>

package/modules/hall-ui/public/deploy.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/hall-ask.css">
   <link rel="stylesheet" href="/builders/project-settings.css">

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

@@ -11,8 +11,8 @@
   <!-- The faces (Manrope, JetBrains Mono) come from the branding pack's font
        links, injected into this head by the server like every hall page's
        (tests/hall_tokens.mjs: no hall page hardcodes a web-font stylesheet). -->
-  <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/thinking.css?v=2026-11-10-visor">
 </head>
 <!-- THE PROJECT SKY (task 1004232 / sky part 4 of 5, goal 1000095; ADR 0331,

package/modules/hall-ui/public/goals.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 1003470: the family sheet the list's figure band and group heads
        come from (.ov-figs, .ov-group__head), linked before the page's own. -->
   <link rel="stylesheet" href="/builders/oversight.css">

package/modules/hall-ui/public/government.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/government.css">
 </head>