@bongos/core 1.21.113 → 1.21.115

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

@@ -31,6 +31,28 @@ body[data-page="street"] {
   --street-wash: color-mix(in srgb, var(--ink) 4.5%, transparent);
   --street-crate: color-mix(in srgb, var(--ink) 55%, transparent);
   --street-crate-fill: color-mix(in srgb, var(--ink) 4%, transparent);
+  /* the living street (task 1004685): the skyline's faces before the haze,
+     the skylanes, the pods, a sitting's shaft (an ink wash: paper cannot
+     glow) and the edge that keeps a salmon window legible on paper */
+  --street-depth-face: var(--bg-card);
+  --street-depth-side: color-mix(in srgb, var(--ink) 10%, var(--bg-card));
+  --street-depth-edge: color-mix(in srgb, var(--ink) 22%, transparent);
+  --street-depth-lane: color-mix(in srgb, var(--ink) 22%, transparent);
+  --street-depth-pod: var(--ink);
+  --street-depth-shaft: color-mix(in srgb, var(--ink) 9%, transparent);
+  --street-depth-needs-edge: var(--accent-deep);
+  /* the planes (integration pass): distance is atmosphere. On paper the far row
+     fades into the paper through a cool sea haze, the near row a step nearer,
+     a fog band dissolves their feet into the ground line, and a lit road is an
+     ink wash (paper cannot glow). Task 1004718 deepened the paper haze: the
+     rows read as distance (cooler, bluer) rather than as pale paper */
+  --street-depth-haze-near: color-mix(in srgb, var(--sea) 12%, color-mix(in srgb, var(--ink) 10%, var(--bg)));
+  --street-depth-haze-near-side: color-mix(in srgb, var(--sea) 13%, color-mix(in srgb, var(--ink) 16%, var(--bg)));
+  --street-depth-haze-edge: color-mix(in srgb, var(--sea) 14%, color-mix(in srgb, var(--ink) 10%, transparent));
+  --street-depth-haze-far: color-mix(in srgb, var(--sea) 17%, color-mix(in srgb, var(--ink) 5%, var(--bg)));
+  --street-depth-fog: color-mix(in srgb, var(--sea) 11%, color-mix(in srgb, var(--ink) 3%, var(--bg)));
+  --street-depth-pool: color-mix(in srgb, var(--ink) 13%, transparent);
+  --street-depth-lane-w: 1.3px;
 }
 html[data-theme="dark"] body[data-page="street"] {
   --street-rule: color-mix(in srgb, var(--ink) 12%, transparent);
@@ -38,6 +60,18 @@ html[data-theme="dark"] body[data-page="street"] {
   --street-accent-text: color-mix(in srgb, var(--accent) 70%, #ffffff);
   --street-glow: 0 0 20px color-mix(in srgb, var(--accent) 50%, transparent);
   --street-crate: color-mix(in srgb, var(--ink) 60%, transparent);
+  --street-depth-face: color-mix(in srgb, var(--ink) 14%, var(--bg));
+  --street-depth-side: color-mix(in srgb, var(--ink) 8%, var(--bg));
+  --street-depth-edge: color-mix(in srgb, var(--ink) 13%, transparent);
+  --street-depth-shaft: color-mix(in srgb, var(--ink) 14%, transparent);
+  --street-depth-needs-edge: transparent;
+  --street-depth-haze-near: color-mix(in srgb, var(--sea) 7%, color-mix(in srgb, var(--ink) 9%, var(--bg)));
+  --street-depth-haze-near-side: color-mix(in srgb, var(--sea) 6%, color-mix(in srgb, var(--ink) 5%, var(--bg)));
+  --street-depth-haze-edge: color-mix(in srgb, var(--ink) 8%, transparent);
+  --street-depth-haze-far: color-mix(in srgb, var(--sea) 12%, color-mix(in srgb, var(--ink) 4%, var(--bg)));
+  --street-depth-fog: color-mix(in srgb, var(--sea) 10%, color-mix(in srgb, var(--ink) 5%, var(--bg)));
+  --street-depth-pool: color-mix(in srgb, var(--ink) 30%, transparent);
+  --street-depth-lane: color-mix(in srgb, var(--ink) 24%, transparent);
 }
 @media (prefers-color-scheme: dark) {
   html:not([data-theme]) body[data-page="street"] {
@@ -46,6 +80,18 @@ html[data-theme="dark"] body[data-page="street"] {
     --street-accent-text: color-mix(in srgb, var(--accent) 70%, #ffffff);
     --street-glow: 0 0 20px color-mix(in srgb, var(--accent) 50%, transparent);
     --street-crate: color-mix(in srgb, var(--ink) 60%, transparent);
+    --street-depth-face: color-mix(in srgb, var(--ink) 14%, var(--bg));
+    --street-depth-side: color-mix(in srgb, var(--ink) 8%, var(--bg));
+    --street-depth-edge: color-mix(in srgb, var(--ink) 13%, transparent);
+    --street-depth-shaft: color-mix(in srgb, var(--ink) 14%, transparent);
+    --street-depth-needs-edge: transparent;
+    --street-depth-haze-near: color-mix(in srgb, var(--sea) 7%, color-mix(in srgb, var(--ink) 9%, var(--bg)));
+    --street-depth-haze-near-side: color-mix(in srgb, var(--sea) 6%, color-mix(in srgb, var(--ink) 5%, var(--bg)));
+    --street-depth-haze-edge: color-mix(in srgb, var(--ink) 8%, transparent);
+    --street-depth-haze-far: color-mix(in srgb, var(--sea) 12%, color-mix(in srgb, var(--ink) 4%, var(--bg)));
+    --street-depth-fog: color-mix(in srgb, var(--sea) 10%, color-mix(in srgb, var(--ink) 5%, var(--bg)));
+    --street-depth-pool: color-mix(in srgb, var(--ink) 30%, transparent);
+    --street-depth-lane: color-mix(in srgb, var(--ink) 24%, transparent);
   }
 }
 
@@ -86,14 +132,23 @@ html[data-fullscreen="on"] .street-top { padding-right: 184px; }
 .street-mode svg { display: block; stroke-width: 1.4; }
 
 /* the street band: the prototype's 1440-wide artboard, scaled by street.js */
-.street-window { flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; margin: 0; padding: 0; box-sizing: border-box; display: flex; overflow-x: auto; overflow-y: hidden; position: relative; }
-.street-sizer { position: relative; margin: auto; flex: none; overflow: hidden; }
-.street-board { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; transform: scale(var(--street-scale, 1)) translateY(-64px); }
+/* The living street's parallax (task 1004685) is Keith Clark's, sideways and
+   CSS only: the window is the perspective, the sizer and the board keep the
+   3D (an overflow other than visible would flatten it, so the sizer clips
+   nothing; the window still does), and each skyline row sits deeper and is
+   scaled back to its own size, so it slides at a half and a third of the
+   scroll. Its transform-origin is the band's middle (y 446 = 196 + 500 / 2,
+   the band less its empty sky and bare foot, task 1004718),
+   which is the window's middle, so a row only ever moves sideways; with no
+   sideways scroll it does not move at all. */
+.street-window { flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; margin: 0; padding: 0; box-sizing: border-box; display: flex; overflow-x: auto; overflow-y: hidden; position: relative; perspective: 1px; perspective-origin: 50% 50%; }
+.street-sizer { position: relative; margin: auto; flex: none; overflow: visible; transform-style: preserve-3d; }
+.street-board { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; transform: scale(var(--street-scale, 1)) translateY(-196px); transform-style: preserve-3d; }
 .street-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
 .street-layer { position: absolute; left: 0; top: 0; width: 100%; height: 900px; pointer-events: none; }
 .street-layer > * { pointer-events: auto; }
 
-.street-evening { position: absolute; left: 0; right: 0; top: 104px; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; z-index: 2; }
+.street-evening { position: absolute; left: 0; right: 0; top: 216px; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; z-index: 2; }
 .street-evening[hidden] { display: none; }
 .street-evening__h { margin: 0; font-size: 46px; font-weight: 300; letter-spacing: -0.042em; line-height: 1; }
 .street-evening__line { margin: 0; font-size: 16px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
@@ -163,6 +218,83 @@ html[data-fullscreen="on"] .street-top { padding-right: 184px; }
 .street-sign__figure { font-size: 26px; font-weight: 300; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
 .street-sign__line { font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); }
 
+/* ── THE LIVING STREET (task 1004685, the living-city prototype) ──
+   Three planes, front-on, in the street's own drawing (street-draw.js
+   depthOf). Every colour here is a token; the civic row's own faces are
+   drawing data, as before. Motion only says "this is live": the pods, the
+   jib, the hook, the scaffold's platform and a sitting's ring, all at 20 s
+   or slower and all dead under the kill switch below. */
+.street-depth-layer { position: absolute; left: 0; top: 0; width: 100%; height: 900px; pointer-events: none; }
+/* a skyline row is a 1 px box (its svg paints the row as overflow, street.js
+   depthSvg), so its depth never widens the sideways scroll; its origin is the
+   band's middle, set from the street's width */
+.street-depth-back { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; transform-origin: var(--street-depth-ox, 720px) 446px; }
+.street-depth-back--near { transform: translateZ(-1px) scale(2); }
+.street-depth-back--far { transform: translateZ(-2px) scale(3); }
+.street-depth-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
+/* BACK: the goals' skyline, hazed toward the void. Atmosphere is the depth cue:
+   the near row is a toned silhouette with a hairline, the far row a flat cool
+   haze with no edge at all, and the fog band below dissolves both into the
+   ground line, so the civic row (no haze, full detail) is the crisp subject */
+.street-depth-sil__face, .street-depth-sil__side { stroke-width: 1; stroke-linejoin: round; }
+.street-depth-back--near .street-depth-sil__face { fill: var(--street-depth-haze-near); stroke: var(--street-depth-haze-edge); }
+.street-depth-back--near .street-depth-sil__side { fill: var(--street-depth-haze-near-side); stroke: var(--street-depth-haze-edge); }
+.street-depth-back--far .street-depth-sil__face, .street-depth-back--far .street-depth-sil__side { fill: var(--street-depth-haze-far); stroke: none; }
+/* the fog band: the skyline's feet fade into the ground line behind the civic row */
+.street-depth-fog { position: absolute; left: 0; top: 404px; width: calc(var(--street-depth-ox, 720px) * 2); height: 156px; pointer-events: none; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--street-depth-fog) 70%, transparent) 62%, var(--street-depth-fog) 96%); }
+/* a lit road: a pool under a building or district with agents at work, as strong as it is busy */
+.street-depth-pool { position: absolute; height: 40px; margin-top: -4px; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, var(--street-depth-pool), transparent); opacity: calc(0.35 + 0.65 * var(--street-depth-pool-a, 0.5)); }
+/* SKY: the skylanes and their pods, one per active claim, a fixed gap apart */
+.street-depth-lane { fill: none; stroke: var(--street-depth-lane); stroke-width: var(--street-depth-lane-w, 1.3px); stroke-linecap: round; }
+.street-depth-pod { position: absolute; left: 0; top: 0; width: 11px; height: 6px; box-sizing: border-box; border-radius: 999px; background: var(--street-depth-pod); box-shadow: inset 0 -1.5px 0 color-mix(in srgb, var(--bg) 35%, transparent); offset-rotate: auto; animation: street-depth-travel 28s linear infinite; }
+.street-depth-train { position: absolute; left: 0; top: 0; height: 6px; margin-top: -3px; offset-rotate: 0deg; offset-distance: 50%; animation: street-depth-shuttle 24s ease-in-out -12s infinite alternate; }
+.street-depth-pod--road { top: 0; offset-path: none; animation: none; }
+/* an open sitting: a shaft of light from the roof (ink, so paper washes rather than glows) */
+.street-depth-shaft { position: absolute; background: linear-gradient(to top, var(--street-depth-shaft), transparent 85%); }
+.street-depth-shaft__track { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: linear-gradient(to top, transparent, #000 18%, #000 55%, transparent); mask-image: linear-gradient(to top, transparent, #000 18%, #000 55%, transparent); }
+.street-depth-shaft__ring { position: absolute; left: 1px; right: 1px; bottom: 30%; height: 6px; box-sizing: border-box; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); animation: street-depth-rise 24s linear infinite; }
+/* FRONT: what needs you lights its floor's windows in salmon, the only salmon
+   the street spends besides its pins; the ring beside them fills with age */
+.street-depth-needs { fill: var(--accent); stroke: var(--street-depth-needs-edge); stroke-width: 0.6; }
+.street-depth-age { fill: none; stroke: var(--street-rule-strong); stroke-width: 1.2; }
+.street-depth-age__arc { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; }
+/* construction: a live site's crane (the jib swings, the hook reels, the
+   scaffold's platform climbs), and a proposal's parked crane and tally arc */
+.street-depth-crane { fill: none; stroke: color-mix(in srgb, var(--ink) 66%, transparent); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
+.street-depth-slab { fill: color-mix(in srgb, var(--ink) 40%, transparent); }
+.street-depth-weight { fill: color-mix(in srgb, var(--ink) 55%, transparent); }
+.street-depth-platform { fill: color-mix(in srgb, var(--ink) 55%, transparent); transform-box: view-box; animation: street-depth-climb 22s ease-in-out infinite alternate; }
+.street-depth-jib { transform-box: view-box; animation: street-depth-swing 26s ease-in-out infinite; }
+.street-depth-line { transform-box: view-box; animation: street-depth-reel 26s ease-in-out infinite; }
+.street-depth-slab { transform-box: view-box; animation: street-depth-hoist 26s ease-in-out infinite; }
+.street-depth-tally { fill: none; stroke: var(--street-rule-strong); stroke-width: 1; stroke-dasharray: 2 3; }
+.street-depth-seat { stroke-width: 1.2; }
+.street-depth-seat--open { fill: var(--bg); stroke: color-mix(in srgb, var(--ink) 55%, transparent); }
+.street-depth-seat--for { fill: var(--ink); stroke: none; }
+.street-depth-seat--against { fill: color-mix(in srgb, var(--ink) 30%, var(--bg)); stroke: none; }
+/* the Lead's name plate at street level; "owner" where nobody holds the building */
+.street-depth-plate { position: absolute; display: flex; justify-content: center; pointer-events: none; }
+.street-depth-plate__t { box-sizing: border-box; max-width: 100%; height: 16px; padding: 0 5px; border: 1px solid var(--street-rule-strong); border-radius: 3px; background: var(--bg); color: var(--ink-soft); font-size: 11px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.street-depth-plate--owner .street-depth-plate__t { border-style: dashed; color: var(--ink-faint); }
+.street-depth-plate--you .street-depth-plate__t { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 60%, transparent); }
+/* the readings as tiles: one number and two words, hidden at zero */
+.street-sign[hidden] { display: none; }
+.street-depth-tile__fig { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
+.street-depth-tile__n { flex: none; }
+.street-depth-tile__words { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* "N need you" is the door to the decision deck */
+.street-depth-deck { color: inherit; text-decoration: none; border-radius: 999px; padding: 4px 10px; margin: -4px -10px; min-height: 24px; }
+.street-depth-deck::after { content: '→'; font-size: 14px; color: var(--street-accent-text); }
+.street-depth-deck:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
+.street-depth-deck:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+@keyframes street-depth-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
+@keyframes street-depth-shuttle { from { offset-distance: 0%; } to { offset-distance: 100%; } }
+@keyframes street-depth-swing { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
+@keyframes street-depth-reel { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.5); } }
+@keyframes street-depth-hoist { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--street-depth-lift, 0px)); } }
+@keyframes street-depth-climb { from { transform: translateY(var(--street-depth-rise, 0px)); } to { transform: translateY(0); } }
+@keyframes street-depth-rise { from { transform: translateY(calc(var(--street-depth-climb, 200px) * 0.3)) scaleX(0.6); } to { transform: translateY(calc(var(--street-depth-climb, 200px) * -0.7)) scaleX(1.5); } }
+
 /* the matter card, over the street (short form until task 1004528) */
 .street-card { position: absolute; left: var(--street-card-x, 32px); bottom: 16px; width: 390px; max-height: 300px; overflow-y: auto; box-sizing: border-box; background: var(--bg-card); border: 1px solid var(--street-rule-strong); border-radius: 16px; z-index: 8; padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 11px; }
 .street-card[hidden] { display: none; }
@@ -196,6 +328,13 @@ html[data-fullscreen="on"] .street-top { padding-right: 184px; }
   .street-hud .street-label { font-size: 11px; }
   .street-hud__n { font-size: 16px; }
   .street-signs { margin: 0 16px; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 180px; overflow-x: auto; overflow-y: hidden; }
+  /* the strip opens on what needs you, so a phone sees it before it scrolls */
+  .street-hud .street-depth-deck { order: -1; }
+}
+@media (max-width: 420px) {
+  /* the top bar already names the street; the strip keeps the wordmark and the switch.
+     The kicker is the page's one h1, so it leaves the eye, not the outline (task 1004718) */
+  .street-kicker { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
 }
 @media (max-width: 560px) {
   .street-card { left: 16px; right: 16px; width: auto; }
@@ -226,12 +365,13 @@ html[data-fullscreen="on"] .street-top { padding-right: 184px; }
 .inside-layer { position: absolute; left: 0; top: 0; width: 100%; height: 708px; pointer-events: none; }
 .inside-layer > * { pointer-events: auto; }
 .inside-floor { position: absolute; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 0; }
-.inside-floor:hover { outline: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: -3px; }
+.inside-floor:hover { outline: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); outline-offset: -3px; }
 
 /* the lift: it slides to the chosen floor */
-.inside-lift { position: absolute; width: 18px; border-radius: 3px; background: var(--accent); display: flex; align-items: center; justify-content: center; pointer-events: none; transition: transform 650ms cubic-bezier(.2,.7,.3,1); }
+/* the lift and the chosen floor are ink: salmon inside a building is only what needs you (task 1004718) */
+.inside-lift { position: absolute; width: 18px; border-radius: 3px; background: var(--ink); display: flex; align-items: center; justify-content: center; pointer-events: none; transition: transform 650ms cubic-bezier(.2,.7,.3,1); }
 .inside-lift[hidden] { display: none; }
-.inside-lift__bar { width: 8px; height: 2px; border-radius: 1px; background: var(--accent-on); }
+.inside-lift__bar { width: 8px; height: 2px; border-radius: 1px; background: var(--bg); }
 .inside-annex { position: absolute; box-sizing: border-box; border: 1px dashed var(--street-rule-strong); display: flex; align-items: flex-end; justify-content: center; padding: 12px; text-align: center; font-size: 12.5px; line-height: 1.4; color: var(--ink-faint); }
 
 /* a district: its name, its work labelled on the road, the two-line legend */
@@ -287,12 +427,16 @@ html[data-fullscreen="on"] .street-top { padding-right: 184px; }
 /* the chosen floor, its sign large; the block re-enters on every pick */
 .inside-open { display: flex; flex-direction: column; gap: 10px; }
 .inside-open__head { display: flex; align-items: center; gap: 16px; }
-.inside-plate { width: 64px; height: 64px; flex-shrink: 0; box-sizing: border-box; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); display: flex; align-items: center; justify-content: center; }
+.inside-plate { width: 64px; height: 64px; flex-shrink: 0; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--street-rule-strong); display: flex; align-items: center; justify-content: center; }
 .inside-plate svg { display: block; }
-.inside-plate path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
-.inside-plate path + path { fill: var(--accent); stroke: none; }
+.inside-plate path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
+.inside-plate path + path { fill: var(--ink); stroke: none; }
+.inside-plate--hot { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
+.inside-plate--hot path { stroke: var(--accent); }
+.inside-plate--hot path + path { fill: var(--accent); }
 .inside-open__words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
-.inside-open__kicker { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--street-accent-text); }
+.inside-open__kicker { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
+.inside-open__kicker--hot { color: var(--street-accent-text); }
 .inside-open__title { margin: 0; font-size: 21px; font-weight: 300; letter-spacing: -0.02em; }
 .inside-line { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--street-rule); font-size: 14.5px; line-height: 1.4; }
 .inside-line__meta { color: var(--ink-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
@@ -428,4 +572,10 @@ html[data-fullscreen="on"] .street-top { padding-right: 184px; }
    standing at the chosen floor without travelling there. */
 @media (prefers-reduced-motion: reduce) {
   body[data-page="street"] *, body[data-page="street"] *::before, body[data-page="street"] *::after { animation: none !important; transition: none !important; }
+  /* the living street (task 1004685) holds still too: no parallax on scroll.
+     Its rest frame is whole: the skyline in place, every pod parked on its
+     lane a fixed gap apart (the count is the agents), the crane parked, the
+     scaffold at its % complete, the ring in its shaft, the salmon windows lit. */
+  .street-window { perspective: none; }
+  .street-depth-back { transform: none; }
 }

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

@@ -11,8 +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). -->
   <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
-  <link rel="stylesheet" href="/builders/street.css?v=2026-10-04-pins1">
+  <link rel="stylesheet" href="/builders/street.css?v=2026-10-09-living3">
   <link rel="stylesheet" href="/builders/street-card.css?v=2026-10-04-record1">
+  <link rel="stylesheet" href="/builders/street-deck.css?v=2026-10-13-glass1">
 </head>
 <!-- THE STREET (task 1004525, goal 1000125, R03). The street view of
      docs/design/mocks/governor-city/Street.dc.html (renderVals' street branch,
@@ -72,12 +73,16 @@
       <span class="street-today__pips" id="streetTodayPips" aria-hidden="true"></span>
       <span class="street-today__n" id="streetTodayN">0 decided</span>
     </div>
-    <div class="street-hud__item">
+    <!-- "needs you N" opens the decision deck (task 1004685): every ask, yours first.
+         Both numbers are gov-living.js countsOf, the ones the city, the deck and
+         the shell's tally print: needs you (asks on your seats) and moving (tasks
+         being built or waiting to land). -->
+    <a class="street-hud__item street-depth-deck" id="hudDeck" href="/builders/street#deck">
       <span class="street-hud__dot" id="hudDot" aria-hidden="true"></span>
-      <span class="street-label">needs you</span>
+      <span class="street-label">to do</span>
       <span class="street-hud__n" id="hudNeeds">—</span>
-    </div>
-    <div class="street-hud__item">
+    </a>
+    <div class="street-hud__item" title="tasks being built or waiting to land">
       <span class="street-hud__dot street-hud__dot--moving" aria-hidden="true"></span>
       <span class="street-label">moving</span>
       <span class="street-hud__n" id="hudMoving">—</span>
@@ -100,10 +105,20 @@
       <p class="street-evening__h">nothing waits on you.</p>
       <p class="street-evening__line" id="streetEveningLine"></p>
     </div>
+    <!-- THE LIVING STREET (task 1004685): behind the civic row, the goals'
+         skyline in two hazed rows (each its own depth, so it slides slower
+         when the street scrolls sideways) and the sky with its skylanes and
+         sittings; in front of it, what needs you, construction, the Leads'
+         plates and the road. street.js fills them from street-draw.js. -->
+    <div class="street-depth-back street-depth-back--far" id="streetDepthFar" aria-hidden="true"></div>
+    <div class="street-depth-back street-depth-back--near" id="streetDepthNear" aria-hidden="true"></div>
+    <div class="street-depth-fog" id="streetDepthFog" aria-hidden="true"></div>
+    <div class="street-depth-layer" id="streetDepthSky" aria-hidden="true"></div>
     <svg class="street-svg" id="streetSvg" width="1440" height="900" viewBox="0 0 1440 900" aria-hidden="true" focusable="false">
       <g id="streetFlat"></g>
       <g id="streetBlds" class="street-blds"></g>
     </svg>
+    <div class="street-depth-layer" id="streetDepthFront" aria-hidden="true"></div>
     <div class="street-layer" id="streetCrates" aria-hidden="true"></div>
     <div class="street-layer" id="streetCols"></div>
     <div class="street-layer" id="streetGroups" aria-hidden="true"></div>
@@ -166,6 +181,10 @@
           <span class="inside-meter__line" id="insideGrowth"></span>
         </div>
       </div>
+      <!-- the government layer (task 1004685): who leads it, its stack of
+           asks, and the Rules law book, the Treasury, the Charter's preset;
+           street-office.js fills it -->
+      <div class="govx" id="insideGovt" hidden></div>
       <div class="inside-open" id="insideOpenA"></div>
       <div class="inside-open" id="insideOpenB" hidden></div>
       <div class="inside-record">
@@ -197,6 +216,12 @@
   <div class="street-card__body" id="streetCardBody"></div>
 </div>
 
+<!-- THE DECISION DECK (task 1004685): #deck and #deck=<building>, one
+     ask at a time in the ask format. The street stays in view (task 1004702):
+     a glass panel beside the building that asks, a slim bar at the foot.
+     street-deck.js draws it. -->
+<section class="deck" id="streetDeck" aria-labelledby="deckTitle" hidden></section>
+
 <div class="street-toast" id="streetToast" role="status" aria-live="polite" hidden></div>
 
 </main>
@@ -204,15 +229,20 @@
 </div>
 
 <script src="/builders/shell-trail.js?v=2026-10-08-city-tab"></script>
-<script src="/builders/craft-mode.js?v=2026-10-08-city-tab"></script>
-<script src="/builders/shell.js?v=2026-10-08-glyph-fix"></script>
+<script src="/builders/craft-mode.js?v=2026-10-09-living3"></script>
+<script src="/builders/shell.js?v=2026-10-10-hall-keys1"></script>
 <script src="/builders/palette.js" defer></script>
-<script src="/builders/city-draw.js?v=2026-10-04-pins1"></script>
-<script src="/builders/street-draw.js?v=2026-10-04-pins1"></script>
+<script src="/builders/gov-living.js?v=2026-10-09-positions1"></script>
+<script src="/builders/gov-feeds.js?v=2026-10-09-living3"></script>
+<script src="/builders/city-draw.js?v=2026-10-09-living3"></script>
+<script src="/builders/street-draw.js?v=2026-10-09-living3"></script>
 <script src="/builders/street-card.js?v=2026-10-04-record1"></script>
-<script src="/builders/street-inside.js?v=2026-10-03-desk1"></script>
+<script src="/builders/street-inside.js?v=2026-10-09-living3"></script>
+<script src="/builders/street-depth.js?v=2026-10-09-living3"></script>
 <script src="/builders/street-desk.js?v=2026-10-04-record1"></script>
 <script src="/builders/street-amend.js?v=2026-10-02-amend1"></script>
-<script src="/builders/street.js?v=2026-10-04-record1"></script>
+<script src="/builders/street-deck.js?v=2026-10-13-glass1"></script>
+<script src="/builders/street-office.js?v=2026-10-09-living3"></script>
+<script src="/builders/street.js?v=2026-10-13-glass1"></script>
 </body>
 </html>

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

@@ -80,8 +80,11 @@
   var NARROW = 900;
   var I = window.GovInside;
   // The artboard's street band: the prototype's 900-high board less its 64 px
-  // header and 128 px footer, which this page lays out as real rows.
-  var BAND_TOP = 64, BAND_H = 708;
+  // header and 128 px footer, which this page lays out as real rows, and less
+  // the empty sky over the skylanes and the bare ground under the brackets
+  // (task 1004718): 132 px off the top, 76 off the foot. street.css translateY
+  // matches BAND_TOP; street-depth.js skyTop sits 40 under it.
+  var BAND_TOP = 196, BAND_H = 500;
   var CARD_W = 390;
 
   var $ = function (id) { return document.getElementById(id); };
@@ -159,9 +162,16 @@
   // 1440 x 708 at scale 1 is the prototype exactly. A wider or taller stage
   // grows it, a smaller one shrinks it; a phone keeps it near full size and the
   // street scrolls sideways inside its window, so a pin stays a pin.
+  // A stage taller than the street needs (a wide window scales the street to its
+  // width) gives the spare height to the foot of the page, under the readings, so
+  // the street sits on them with no empty sky above it (task 1004718). The window
+  // gives the height back whenever a building's inside is open.
   function fit() {
+    var win = $('streetWindow'), inside = $('streetInside');
+    var insideOn = !!(inside && !inside.hidden);
+    if (win && win.style) win.style.flex = '';
     fitInside();
-    var win = $('streetWindow'), sizer = $('streetSizer'), board = $('streetBoard');
+    var sizer = $('streetSizer'), board = $('streetBoard');
     if (!win || !sizer || !board) return;
     var W = view.model ? view.model.width : S.ARTBOARD_W;
     var cw = win.clientWidth || window.innerWidth || 1440, ch = win.clientHeight || 708;
@@ -171,6 +181,7 @@
     view.scale = s;
     sizer.style.width = Math.round(W * s) + 'px';
     sizer.style.height = Math.round(BAND_H * s) + 'px';
+    if (!insideOn && win.style && Math.round(BAND_H * s) < ch - 1) win.style.flex = '0 0 ' + Math.round(BAND_H * s) + 'px';
     board.style.width = W + 'px';
     board.style.setProperty('--street-scale', String(s));
     var svg = $('streetSvg');
@@ -210,13 +221,26 @@
       .then(function (r) { return r && r.ok ? r.json() : null; })
       .catch(function () { return null; });
   }
+  // The street's three reads go through gov-feeds.js when it is on the page (one
+  // read per feed per page view, shared with the living model and the shell's
+  // tally). Every load after the first follows an act, so it reads afresh what an
+  // act can change, once: the living model and every count re-read with it.
+  function readStreet() {
+    var F = window.GovFeeds;
+    if (F) {
+      if (data.loaded) F.refresh();
+      return F.read(['docket', 'goals', 'rollups']).then(function (r) { return [r.docket, r.goals, r.rollups]; });
+    }
+    return Promise.all([getJson(FEEDS.docket), getJson(FEEDS.goals), getJson(FEEDS.rollups)]);
+  }
   function load() {
-    return Promise.all([getJson(FEEDS.docket), getJson(FEEDS.goals), getJson(FEEDS.rollups)]).then(function (res) {
+    return readStreet().then(function (res) {
       data.docket = res[0] && Array.isArray(res[0].matters) ? res[0] : null;
       data.goals = res[1] && Array.isArray(res[1].goals) ? res[1].goals : [];
       data.rollups = res[2] && Array.isArray(res[2].rollups) ? res[2].rollups : [];
       data.loaded = true;
       draw();
+      if (window.GovDeck) window.GovDeck.page.draw();
       var viewer = data.docket && data.docket.viewer && data.docket.viewer.id;
       if (viewer == null) return null;
       return getJson(FEEDS.earnings(viewer)).then(function (e) {
@@ -263,61 +287,18 @@
     return el;
   }
 
-  // One pin per building (task 1004569): its tier is its class, a label shows
-  // only when the collision pass placed it (street-pin--shown; the rest show
-  // on hover or focus), and a count badge says how many matters are open there.
-  function drawPin(p) {
-    var keys = p.matters && p.matters.length ? p.matters : [p.key];
-    var el = node('button', 'street-pin street-pin--' + p.state + (p.shown ? ' street-pin--shown' : ''));
-    el.setAttribute('type', 'button');
-    el.setAttribute('aria-label', p.aria);
-    el.setAttribute('aria-expanded', keys.indexOf(view.open) >= 0 ? 'true' : 'false');
-    el.setAttribute('aria-controls', 'streetCard');
-    el.setAttribute('data-matter', p.key);
-    el.setAttribute('data-matters', keys.join(' '));
-    el.setAttribute('data-building', p.building);
-    at(el, p.x, p.y, S.PIN_W, p.h);
-    var label = node('span', 'street-pin__label', p.label);
-    if (p.label) label.setAttribute('title', p.label);
-    el.appendChild(label);
-    var head = node('span', 'street-pin__head');
-    if (p.state === 'urgent') head.appendChild(node('span', 'street-pin__ring'));
-    if (p.isCount) head.appendChild(node('span', 'street-pin__count', p.count));
-    else if (p.state !== 'settled') {
-      var svg = document.createElementNS(SVG_NS, 'svg');
-      svg.setAttribute('width', '18');
-      svg.setAttribute('height', '18');
-      svg.setAttribute('viewBox', '0 0 18 18');
-      svg.setAttribute('aria-hidden', 'true');
-      var fill = document.createElementNS(SVG_NS, 'path');
-      fill.setAttribute('d', p.gf || '');
-      var line = document.createElementNS(SVG_NS, 'path');
-      line.setAttribute('d', p.gl || '');
-      svg.appendChild(fill);
-      svg.appendChild(line);
-      head.appendChild(svg);
-    }
-    if (!p.isCount && Number(p.count) > 1) head.appendChild(node('span', 'street-pin__badge', p.count));
-    el.appendChild(head);
-    el.appendChild(node('span', 'street-pin__stem'));
-    el.addEventListener('click', function () { openCard(keys[0], el, keys); });
-    return el;
-  }
-
-  function drawSign(sg) {
-    var a = node('a', 'street-sign' + (sg.hot ? ' street-sign--hot' : '') + (sg.here ? ' street-sign--here' : ''));
-    a.setAttribute('href', sg.href);
-    a.setAttribute('aria-label', sg.aria);
-    a.setAttribute('data-reading', sg.key);
-    if (sg.here) a.setAttribute('aria-current', 'location');
-    var top = node('span', 'street-sign__top');
-    top.appendChild(node('span', 'street-sign__dot'));
-    top.appendChild(node('span', 'street-label', sg.label));
-    a.appendChild(top);
-    a.appendChild(node('span', 'street-sign__figure', sg.figure));
-    a.appendChild(node('span', 'street-sign__line', sg.line));
-    return a;
-  }
+  // ---------- the exterior's painters live in street-depth.js (task 1004685) ----------
+  // A pin, a reading, the depth layers and the living street's reads are
+  // GovStreetDepth.page's (street-depth.js); this file hands it the street's
+  // data, its card opener and a redraw, and keeps the street's own wiring.
+  var X = window.GovStreetDepth.page;
+  function drawPin(p) { return X.pin(p, { open: view.open, openCard: openCard }); }
+  function drawSign(sg, tile) { return X.sign(sg, tile); }
+  function drawDepth(dm, W) { return X.depth(dm, W); }
+  // the living model arrives after the street's own reads: the street and the deck draw it
+  function loadLiving() { return X.loadLiving(data, function () { draw(); if (window.GovDeck) window.GovDeck.page.draw(); }); }
+  function livingModel() { return X.livingModel(data); }
+  var living = X.living;
 
   function draw() {
     var mode = currentMode();
@@ -328,8 +309,16 @@
     var sizerEl = $('streetSizer');
     var showInside = !!(h && inside && I);
     if (sizerEl) sizerEl.hidden = showInside;
-    var m = S.streetModel({ docket: data.docket, goals: data.goals, rollups: data.rollups, earnings: data.earnings, mode: mode, now: Date.now(), here: here() });
+    // the living street (task 1004685): three planes over the living model
+    var lm = livingModel();
+    data.living = lm;
+    // the header prints the counts every surface prints (gov-living.js countsOf, less
+    // what the deck answered here); "—" while the living model is still reading
+    var counts = lm && window.GovFeeds ? window.GovFeeds.countsFrom(lm) : (window.GovFeeds && window.GovLiving ? null : undefined);
+    data.counts = counts || null;
+    var m = S.streetModel({ docket: data.docket, goals: data.goals, rollups: data.rollups, earnings: data.earnings, mode: mode, now: Date.now(), here: here(), depth: true, living: lm, counts: counts, roster: living.feeds ? living.feeds.roster : null });
     view.model = m;
+    drawDepth(m.depth, m.width);
     var flat = $('streetFlat'), blds = $('streetBlds');
     clear(flat); clear(blds);
     m.flat.forEach(function (p) { flat.appendChild(pathEl(p)); });
@@ -375,7 +364,8 @@
     m.pins.forEach(function (p) { pins.appendChild(drawPin(p)); });
 
     var signs = $('streetSigns'); clear(signs);
-    m.signs.forEach(function (sg) { signs.appendChild(drawSign(sg)); });
+    var tiles = m.depth && data.loaded ? m.depth.tiles : null;
+    m.signs.forEach(function (sg) { signs.appendChild(drawSign(sg, tiles ? tiles[sg.key] : undefined)); });
 
     var eve = $('streetEvening');
     if (eve) eve.hidden = !(m.evening && !view.open) || showInside;
@@ -383,6 +373,9 @@
     if (eveLine) eveLine.textContent = m.eveningLine;
 
     drawToday();
+    // "N need you" is the way into the decision deck (V3 builds #deck)
+    var deck = $('hudDeck');
+    if (deck && m.hud.deck) { deck.setAttribute('href', m.hud.deck.href); deck.setAttribute('aria-label', m.hud.deck.aria); }
     $('hudNeeds').textContent = m.hud.needs;
     $('hudMoving').textContent = m.hud.moving;
     $('hudShare').textContent = m.hud.share;
@@ -404,6 +397,7 @@
     markAnswer();
     fit();
     if (view.open) fillCard();
+    loadLiving();
     return m;
   }
 
@@ -438,7 +432,9 @@
     var startFloor = st.floor == null && D && data.docket ? D.firstNeeds(st.key, data.docket) : null;
     var cleared = [];
     Object.keys(desk.cleared).forEach(function (k) { var p = k.split(':'); if (p[0] === st.key) cleared.push(Number(p[1])); });
-    var bv = I.buildingModel({ key: st.key, docket: data.docket, goals: data.goals, mode: mode, now: Date.now(), floor: st.floor == null ? startFloor : st.floor, drawer: st.drawer, picks: st.picks, cleared: cleared });
+    // the Lead's office on top, its build-outs and the floors they put up (street-office.js, task 1004711)
+    var OP = window.GovOffice && window.GovOffice.page, bi = OP ? OP.input(st.key) : {};
+    var bv = I.buildingModel({ key: st.key, docket: data.docket, goals: data.goals, mode: mode, now: Date.now(), floor: st.floor == null ? startFloor : st.floor, drawer: st.drawer, picks: st.picks, cleared: cleared.concat(bi.cleared || []), office: bi.office, works: bi.works, extraFloors: bi.floors });
     // a sitting's ballot is read once, so its row can vote in place
     var C = window.GovMatterCard;
     if (!desk.roomAsked && !data.room && C && data.docket && data.docket.matters.some(function (x) { return x && x.building === st.key && C.needsRoom(x); })) {
@@ -520,7 +516,7 @@
     // the chosen floor: two blocks that take turns, so the block re-enters on every pick
     var on = $(bv.flipA ? 'insideOpenA' : 'insideOpenB'), off = $(bv.flipA ? 'insideOpenB' : 'insideOpenA');
     if (off) { off.hidden = true; clear(off); }
-    if (on) { on.hidden = false; fillDesk(on, bv); }
+    if (on) { on.hidden = false; if (!(OP && OP.inside(bv, on, $('insideGovt')))) fillDesk(on, bv); }
     setText('insideOnFile', bv.onFile);
     var drawers = $('insideDrawers'); clear(drawers);
     bv.drawers.forEach(function (dw) {
@@ -571,11 +567,12 @@
     el.setAttribute('data-desk', dm.key);
     // the header: the floor's sign, its name, its status
     var head = node('div', 'inside-open__head');
-    var plate = node('span', 'inside-plate');
+    // the sign and the kicker are salmon only while the floor needs you (task 1004718)
+    var plate = node('span', 'inside-plate' + (dm.hot ? ' inside-plate--hot' : ''));
     plate.appendChild(icon(bv.sym.d, bv.sym.f, 34));
     head.appendChild(plate);
     var words = node('div', 'inside-open__words');
-    words.appendChild(node('span', 'inside-open__kicker', 'floor ' + (bv.selFloor + 1)));
+    words.appendChild(node('span', 'inside-open__kicker' + (dm.hot ? ' inside-open__kicker--hot' : ''), 'floor ' + (bv.selFloor + 1)));
     words.appendChild(node('h3', 'inside-open__title', dm.name));
     words.appendChild(node('span', 'desk-status' + (dm.hot ? ' desk-status--hot' : ''), dm.status));
     head.appendChild(words);
@@ -1248,6 +1245,11 @@
     var ctx = { room: data.room, constitution: data.constitution, now: Date.now(), goals: (data.goals || []).filter(function (g) { return g && g.status === 'open'; }), pick: card.pick };
     var cv = D && D.cardFor ? D.cardFor(view.open, data.docket, ctx) : C ? C.model({ docket: data.docket, key: view.open, room: data.room, constitution: data.constitution, now: Date.now() }) : null;
     if (!cv) { closeCard(false); return null; }
+    // a stored ask opens as its building's glass card, answered in place (task 1004702)
+    var G = window.GovDeck && window.GovDeck.page, frame = $('streetCard');
+    var glass = !!(G && G.streetCard && G.streetCard($('streetCardBody'), view.open, card.page, { close: function () { closeCard(true); }, turn: function (k) { turnPage(k, 'next'); }, redraw: fillCard, done: function () { if (view.open) fillCard(); } }));
+    if (frame) frame.setAttribute('data-glass', glass ? 'ask' : 'matter');
+    if (glass) { card.cv = cv; placeCard(); return cv; }
     var recordable = !!(cv.row && cv.row.choices && cv.row.choices.record && cv.row.choices.record.file);
     if (recordable) { var cid = criterionOf(cv.row.card); C.withChecks(cv, rec.checks[cid] || null, rec.checks[cid] === false); }
     card.cv = cv;
@@ -1256,7 +1258,7 @@
     $('streetCardTitle').textContent = cv.title;
     var pager = C.pager ? C.pager(card.page, view.open) : null;
     C.render(document, $('streetCardBody'), cv, { act: actOn, openForm: openForm, ask: askFor, more: toggleMore, pick: pickQueued, page: turnPage, record: recordable ? cardRecord(cv) : null }, { form: card.form, ask: card.ask, more: card.more, error: card.error, busy: card.busy, fresh: card.fresh, pager: pager });
-    var frame = $('streetCard'); if (frame) frame.setAttribute('data-more', card.more ? 'open' : 'closed');
+    if (frame) frame.setAttribute('data-more', card.more ? 'open' : 'closed');
     placeCard();
     return cv;
   }
@@ -1312,6 +1314,7 @@
     var cx = pin ? originX + (pin.x + 55) * view.scale : stageW / 2;
     var x = Math.max(16, Math.min(stageW - CARD_W - 16, Math.round(cx - CARD_W / 2)));
     card.style.setProperty('--street-card-x', x + 'px');
+    if (window.GovDeck) window.GovDeck.page.placeStreetCard(card, view.open);
   }
   function openCard(key, opener, keys) {
     view.open = key;
@@ -1322,6 +1325,7 @@
     if (!fillCard()) return;
     el.hidden = false;
     draw();
+    placeCard();
     var close = $('streetCardClose');
     if (close && close.focus) close.focus();
     if (card.cv && card.cv.loading) return loadRoom();
@@ -1333,6 +1337,7 @@
     card.cv = null; card.form = null; card.ask = null; card.more = false; card.pick = null; card.error = ''; card.busy = false; card.fresh = null; card.page = null;
     var el = $('streetCard');
     if (el) el.hidden = true;
+    if (window.GovDeck) window.GovDeck.page.unspot();
     draw();
     // The pins were redrawn, so focus goes back to the new button for the same matter.
     if (restore !== false && was && was.getAttribute) {
@@ -1461,6 +1466,13 @@
     if (media && media.addEventListener) media.addEventListener('change', function () { if (!storedTheme()) { applyTheme(); draw(); } });
     painted = applyTheme();
     today = readToday();
+    // the decision deck (#deck) and the government inside each building, over the
+    // street's own senders (street-deck.js, street-office.js; task 1004685)
+    var env = { data: function () { return data; }, getJson: getJson, send: send, say: say, draw: draw, load: load, mode: currentMode, today: function () { return today.n; }, decided: function () { bumpToday(); drawToday(); }, done: function (id) { desk.done[id] = true; }, pickFloor: pickFloor, inside: function () { return view.inside; } };
+    if (window.GovDeck) window.GovDeck.page.mount(env);
+    if (window.GovOffice) window.GovOffice.page.mount(env);
+    // an answer in the deck moves the header's counts as it moves the deck's
+    if (window.GovFeeds) window.GovFeeds.onChange(function () { if (data.loaded) draw(); });
     draw();
     watchShellTheme();
     return load();