@bongos/core 1.21.112 → 1.21.114

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

@@ -0,0 +1,299 @@
+/* modules/hall-ui/public/street-deck.css — THE DECISION DECK, the ask card
+   in the glass language, and the government inside each building (task
+   1004685, the living-city prototype; the glass, task 1004702).
+   Laid over street.css and street-card.css, on the hall's tokens; the city
+   loads it too, for its card's ask. The glass is the studio's recipe (a blur,
+   a hairline edge, a top highlight): in dark a smoked pane, in light frosted
+   paper with an ink shadow and no glow, so the tokens below are written for
+   light and twice for dark. The accent is spent only on what needs you: the
+   dot before its building's name, the "you" words of its last line, the halo
+   on its pin, a dry pot, an appointment the office is missing. Motion is
+   transform only: the panel rises once, the halo breathes on a 24 s loop, a
+   card leaving, a scaffold climbing, a crane's 24 s swing; all of it dies
+   under reduced motion at the foot. No :root. */
+
+body[data-page="street"], body[data-page="city"] {
+  --deck-ghost: color-mix(in srgb, var(--bg-card) 62%, var(--bg));
+  --gov-glass: color-mix(in srgb, var(--bg-card) 54%, transparent);
+  --gov-glass-edge: color-mix(in srgb, var(--ink) 10%, transparent);
+  --gov-glass-hi: color-mix(in srgb, var(--bg-card) 90%, transparent);
+  --gov-glass-drop: 0 28px 70px color-mix(in srgb, var(--ink) 15%, transparent), 0 2px 8px color-mix(in srgb, var(--ink) 6%, transparent);
+  --gov-ghost: color-mix(in srgb, var(--bg-card) 45%, transparent);
+  --gov-chip: color-mix(in srgb, var(--ink) 4%, transparent);
+  --gov-chip-pick: color-mix(in srgb, var(--bg-card) 80%, transparent);
+  --gov-chip-edge: color-mix(in srgb, var(--ink) 9%, transparent);
+  --gov-chip-edge-pick: color-mix(in srgb, var(--ink) 34%, transparent);
+  --gov-scrim: color-mix(in srgb, var(--bg) 52%, transparent);
+  --gov-leader: color-mix(in srgb, var(--ink) 45%, transparent);
+  --you-ink: var(--accent-deep);
+  --you-halo: color-mix(in srgb, var(--accent) 60%, transparent);
+  --you-halo-out: color-mix(in srgb, var(--accent) 28%, transparent);
+}
+html[data-theme="dark"] body[data-page="street"], html[data-theme="dark"] body[data-page="city"] {
+  --gov-glass: color-mix(in srgb, color-mix(in srgb, var(--ink) 9%, var(--bg-card)) 48%, transparent);
+  --gov-glass-edge: color-mix(in srgb, var(--ink) 17%, transparent);
+  --gov-glass-hi: color-mix(in srgb, var(--ink) 20%, transparent);
+  --gov-glass-drop: 0 40px 90px color-mix(in srgb, var(--bg) 60%, transparent);
+  --gov-ghost: color-mix(in srgb, var(--ink) 6%, transparent);
+  --gov-chip: color-mix(in srgb, var(--ink) 5%, transparent);
+  --gov-chip-pick: color-mix(in srgb, var(--ink) 11%, transparent);
+  --gov-chip-edge: color-mix(in srgb, var(--ink) 11%, transparent);
+  --gov-chip-edge-pick: color-mix(in srgb, var(--ink) 42%, transparent);
+  --gov-scrim: color-mix(in srgb, var(--bg) 46%, transparent);
+  --gov-leader: color-mix(in srgb, var(--ink) 50%, transparent);
+  --you-ink: color-mix(in srgb, var(--accent) 70%, var(--ink));
+  --you-halo: color-mix(in srgb, var(--accent) 70%, transparent);
+}
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme]) body[data-page="street"], html:not([data-theme]) body[data-page="city"] {
+    --gov-glass: color-mix(in srgb, color-mix(in srgb, var(--ink) 9%, var(--bg-card)) 48%, transparent);
+    --gov-glass-edge: color-mix(in srgb, var(--ink) 17%, transparent);
+    --gov-glass-hi: color-mix(in srgb, var(--ink) 20%, transparent);
+    --gov-glass-drop: 0 40px 90px color-mix(in srgb, var(--bg) 60%, transparent);
+    --gov-ghost: color-mix(in srgb, var(--ink) 6%, transparent);
+    --gov-chip: color-mix(in srgb, var(--ink) 5%, transparent);
+    --gov-chip-pick: color-mix(in srgb, var(--ink) 11%, transparent);
+    --gov-chip-edge: color-mix(in srgb, var(--ink) 11%, transparent);
+    --gov-chip-edge-pick: color-mix(in srgb, var(--ink) 42%, transparent);
+    --gov-scrim: color-mix(in srgb, var(--bg) 46%, transparent);
+    --gov-leader: color-mix(in srgb, var(--ink) 50%, transparent);
+    --you-ink: color-mix(in srgb, var(--accent) 70%, var(--ink));
+    --you-halo: color-mix(in srgb, var(--accent) 70%, transparent);
+  }
+}
+
+/* ---------- the glass, and the scene around it ---------- */
+.gov-glass { background: var(--gov-glass); border: 1px solid var(--gov-glass-edge); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: inset 0 1px 0 var(--gov-glass-hi), var(--gov-glass-drop); }
+/* a light hush over the scene, open around the building that asks */
+.gov-spot, .deck-scene { position: absolute; inset: 0; pointer-events: none; }
+.gov-spot { z-index: 7; }
+.gov-spot[hidden] { display: none; }
+.gov-hush { --fx: 50%; --fy: 50%; --fr: 90px; position: absolute; inset: 0; background: var(--gov-scrim); -webkit-mask-image: radial-gradient(circle at var(--fx) var(--fy), transparent 0 var(--fr), black calc(var(--fr) + 150px)); mask-image: radial-gradient(circle at var(--fx) var(--fy), transparent 0 var(--fr), black calc(var(--fr) + 150px)); }
+.gov-halo { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--gov-leader); animation: gov-halo 24s ease-in-out infinite; }
+.gov-halo::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1px solid var(--gov-chip-edge); }
+.gov-halo--you { border-color: var(--you-halo); }
+.gov-halo--you::after { border-color: var(--you-halo-out); }
+@keyframes gov-halo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
+.gov-leader { position: absolute; left: 0; top: 0; overflow: visible; color: var(--gov-leader); }
+.deck kbd, .street-card kbd, .city-card kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box; border-radius: 7px; border: 1px solid var(--gov-chip-edge); background: var(--gov-chip); font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); }
+
+/* ---------- the deck: the street stays in view ---------- */
+.street-window[data-view="deck"] .inside { visibility: hidden; }
+.deck { position: absolute; inset: 0; z-index: 12; pointer-events: none; color: var(--ink); }
+.deck[hidden] { display: none; }
+body[data-page="street"] .street-toast { z-index: 13; }
+.deck-at { position: absolute; left: calc(50% - 238px); top: 72px; width: 476px; pointer-events: auto; }
+.deck-panel { position: relative; border-radius: 28px; padding: 22px 24px 18px; }
+.deck-ghost { position: absolute; border-radius: 28px; background: var(--gov-ghost); border: 1px solid var(--gov-glass-edge); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
+.deck-ghost--1 { left: 13px; right: 13px; top: 15px; bottom: -15px; }
+.deck-ghost--2 { left: 26px; right: 26px; top: 30px; bottom: -30px; }
+.deck-clear { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; box-sizing: border-box; }
+.deck-clear__tick { fill: none; stroke: var(--street-accent-text); stroke-width: 1.4; stroke-linecap: round; }
+.deck-clear__line { margin: 0; font-size: 24px; font-weight: 300; letter-spacing: -0.02em; }
+.deck-clear__line:focus, .deck-clear__line:focus-visible { outline: none; box-shadow: none; }
+.deck-clear__sub { margin: 0; font-size: 13.5px; color: var(--ink-faint); }
+
+/* the dock: where you are in the run, today, the keys, the way back */
+.deck-dock { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; height: 54px; padding: 0 8px 0 22px; border-radius: 999px; box-sizing: border-box; white-space: nowrap; font-size: 13.5px; color: var(--ink-soft); pointer-events: auto; }
+.deck-dock__n { font-size: 20px; font-weight: 300; color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 2px; }
+.deck-dock__n--you { color: var(--you-ink); }
+.deck-dock__sep { width: 1px; height: 22px; background: var(--gov-chip-edge); }
+.deck-dock__today { display: inline-flex; align-items: center; }
+.deck-dock .deck-pips { display: inline-flex; gap: 4px; margin-right: 4px; }
+.deck-dock .street-today__pip { width: 8px; height: 8px; border-color: var(--gov-chip-edge-pick); }
+.deck-dock .street-today__pip--on { background: var(--ink); border-color: var(--ink); }
+.deck-dock__keys { display: inline-flex; align-items: center; gap: 12px; }
+.deck-dock__k { display: inline-flex; align-items: center; gap: 5px; }
+.deck-dock__btn { background: none; border: 0; padding: 0; min-height: 24px; font-family: var(--font-body); font-size: 13.5px; color: var(--ink-soft); cursor: pointer; }
+.deck-dock__btn:hover { color: var(--ink); }
+.deck-dock__back { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; box-sizing: border-box; border-radius: 999px; border: 1px solid var(--gov-chip-edge-pick); color: var(--ink); font-size: 13.5px; text-decoration: none; }
+.deck-dock__back:hover { background: var(--gov-chip); }
+
+/* ---------- the ask card (the deck's, and the same card in place) ---------- */
+.ask { position: relative; display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; color: var(--ink); }
+.ask__where { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: 13.5px; color: var(--ink-soft); }
+.ask__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); }
+.ask__dot--you { background: var(--accent); }
+.ask__bld { font-weight: 500; color: var(--ink); }
+.ask__waits--narrow { display: none; }
+.ask__gap { flex: 1; }
+.ask__esc { flex: none; display: inline-flex; background: none; border: 0; padding: 0; min-width: 24px; min-height: 24px; cursor: pointer; }
+.ask__q { margin: 0; font-size: 29px; font-weight: 300; letter-spacing: -0.025em; line-height: 1.16; text-wrap: balance; overflow-wrap: anywhere; }
+/* focus lands on the question when a card rises (a screen reader reads it out);
+   it is not a control, so it draws no ring */
+.ask__q:focus, .ask__q:focus-visible { outline: none; box-shadow: none; }
+.ask__said { margin: -4px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }
+.ask__likes { margin: -2px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
+.ask__likes li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.4; color: var(--ink); }
+.ask__likes li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 8px; border-radius: 50%; background: var(--ink-faint); }
+.ask__opts { display: flex; flex-direction: column; gap: 8px; }
+.ask__opt { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; align-items: center; min-height: 60px; padding: 10px 16px 10px 12px; box-sizing: border-box; border-radius: 18px; border: 1px solid var(--gov-chip-edge); background: var(--gov-chip); color: var(--ink); font-family: var(--font-body); text-align: left; cursor: pointer; }
+.ask__opt:hover { background: var(--gov-chip-pick); }
+/* the pick is marked in ink */
+.ask__opt--rec { background: var(--gov-chip-pick); border-color: var(--gov-chip-edge-pick); }
+.ask__opt--off { border-style: dashed; cursor: not-allowed; color: var(--ink-faint); }
+.ask__opt--off:hover { background: var(--gov-chip); }
+.ask__opt[disabled] { cursor: progress; }
+.ask__n { grid-row: 1 / span 2; }
+.ask__label { font-size: 16px; font-weight: 500; min-width: 0; }
+.ask__result { grid-column: 2; font-size: 13.5px; line-height: 1.35; color: var(--ink-soft); min-width: 0; }
+.ask__opt--off .ask__label, .ask__opt--off .ask__result { color: var(--ink-faint); }
+.ask__pick { grid-column: 3; grid-row: 1 / span 2; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
+.ask__foot { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-faint); }
+.ask__you { color: var(--you-ink); }
+.ask__tally { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; vertical-align: middle; }
+.ask__more { display: flex; gap: 18px; }
+.deck-panel .ask__more { display: none; }
+.ask__text { background: none; border: 0; padding: 4px 0; min-height: 24px; min-width: 24px; font-family: var(--font-body); font-size: 13.5px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gov-chip-edge-pick); cursor: pointer; }
+.ask__text:hover { color: var(--ink-soft); }
+/* a matter with no stored ask: its own desk, where its real acts are */
+.ask__desk { display: inline-block; min-height: 24px; padding: 2px 0; box-sizing: border-box; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gov-chip-edge-pick); }
+.ask__desk:hover { color: var(--ink-soft); }
+.ask__seat, .govx-preset, .govx-capsule, .govx-propose .desk-chip { text-transform: none; }
+.ask__seats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 2px; }
+.ask__seats-ask, .ask__record-ask { font-size: 12.5px; color: var(--ink-faint); margin-right: 4px; }
+.ask__record { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.ask__opt:focus-visible, .ask__text:focus-visible, .ask__desk:focus-visible, .ask__esc:focus-visible, .ask__seat:focus-visible, .deck-dock__btn:focus-visible, .deck-dock__back:focus-visible, .bcard__link:focus-visible, .bcard__skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+
+/* in place: the inner card inside a building's card */
+.ask--here { gap: 14px; padding: 18px 18px 16px; border-radius: 22px; background: var(--gov-chip); border: 1px solid var(--gov-chip-edge); }
+.ask--here .ask__q { font-size: 23px; }
+.ask--here .ask__said { font-size: 14.5px; }
+.ask--here .ask__opt { min-height: 54px; border-radius: 15px; }
+
+/* a building's card on the street: glass beside its pin */
+body[data-page="street"] .street-card { background: var(--gov-glass); border: 1px solid var(--gov-glass-edge); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: inset 0 1px 0 var(--gov-glass-hi), var(--gov-glass-drop); border-radius: 28px; }
+.street-card[data-glass="ask"] { width: 444px; max-height: calc(100% - 88px); padding: 22px 24px 18px; gap: 16px; }
+.street-card[data-glass="ask"] .street-card__head { position: absolute; top: 22px; right: 24px; }
+.street-card[data-glass="ask"] #streetCardWhere, .street-card[data-glass="ask"] #streetCardWhen, .street-card[data-glass="ask"] .street-card__fill, .street-card[data-glass="ask"] .street-card__title { display: none; }
+.street-card[data-glass="ask"] .street-card__close { width: auto; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 7px; border: 1px solid var(--gov-chip-edge); background: var(--gov-chip); color: var(--ink-soft); font-family: var(--font-mono); font-size: 11.5px; }
+.street-card[data-glass="ask"] .street-card__close svg { display: none; }
+.street-card[data-glass="ask"] .street-card__close::after { content: "esc"; }
+.street-card[data-glass="ask"] .street-card__body { display: flex; flex-direction: column; gap: 16px; }
+@media (min-width: 641px) { body[data-page="street"] .street-card { bottom: auto; } }
+.bcard__head { display: flex; flex-direction: column; gap: 4px; padding-right: 48px; }
+.bcard__name { font-size: 24px; font-weight: 400; letter-spacing: -0.02em; }
+.bcard__f { margin: 0; font-size: 14px; color: var(--ink-soft); }
+.bcard__n--you { color: var(--you-ink); }
+.bcard__acts { display: flex; align-items: center; gap: 18px; font-size: 13.5px; color: var(--ink-soft); }
+.bcard__link { background: none; border: 0; padding: 4px 0; min-height: 24px; font-family: var(--font-body); font-size: 13.5px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gov-chip-edge-pick); cursor: pointer; }
+.bcard__skip { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 0; min-height: 24px; font-family: var(--font-body); font-size: 13.5px; color: var(--ink-soft); cursor: pointer; }
+
+/* the panel rises once; the card leaves and the next one rises (transform only, class-triggered) */
+.ask--gone { transition: transform 320ms cubic-bezier(.4,0,.2,1); transform: translateX(-112%) rotate(-2.5deg); }
+.ask--skip { transition: transform 320ms cubic-bezier(.4,0,.2,1); transform: translateY(24px) scale(.93); }
+.ask--rise { animation: deck-rise 560ms cubic-bezier(.16,1,.3,1) both; }
+@keyframes deck-rise { from { transform: translateY(10px) scale(.985); } to { transform: none; } }
+
+
+/* ---------- the government layer inside a building ---------- */
+.govx { display: flex; flex-direction: column; gap: 14px; }
+.govx[hidden] { display: none; }
+.govx-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
+.govx-head__n { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
+.govx-lead { display: flex; align-items: center; gap: 12px; min-height: 44px; }
+.govx-lead__words { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
+.govx-lead__t { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.govx-lead__f { font-size: 13px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.govx-stack { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: var(--street-wash); }
+.govx-stack__words { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; flex: 1 1 auto; min-width: 0; }
+.govx-stack__n { font-size: 26px; font-weight: 300; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
+.govx-stack__t { font-size: 14.5px; }
+.govx-stack__f { font-size: 13px; color: var(--ink-faint); flex-basis: 100%; }
+.govx-stack--you .govx-stack__f { color: var(--street-accent-text); }
+.govx-stack__go { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
+.govx-book { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--street-rule); }
+.govx-static { cursor: default; }
+
+/* the law book */
+.govx-laws__rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
+.govx-law { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-top: 1px solid var(--street-rule); }
+.govx-law__top { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
+.govx-law__t { font-size: 15px; font-weight: 500; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.govx-law__by { font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.govx-law__ai { font-size: 13.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.govx-law__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-right: 8px; }
+.govx-law__lock { font-size: 12px; color: var(--ink-faint); font-family: var(--font-mono); }
+.govx-law--fresh .govx-law__by { color: var(--ink); }
+.govx-propose, .govx-build { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.govx-inject { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--street-rule); }
+.govx-inject__body { display: flex; flex-direction: column; gap: 12px; max-height: 260px; overflow-y: auto; padding: 12px 14px; border-radius: 10px; background: var(--street-wash); font-family: var(--font-mono); font-size: 12px; line-height: 1.55; }
+.govx-inject__body:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+.govx-inject__part { display: flex; flex-direction: column; gap: 2px; }
+.govx-inject__h { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; }
+.govx-inject__line { color: var(--ink-soft); overflow-wrap: anywhere; }
+
+/* the treasury */
+.govx-tiles { border-top: 0; }
+.govx-switch { flex: none; width: 40px; height: 24px; box-sizing: border-box; border-radius: 999px; border: 1px solid var(--street-rule-strong); padding: 3px; display: inline-flex; margin-left: auto; }
+.govx-switch__knob { width: 16px; height: 16px; border-radius: 999px; background: var(--ink-faint); }
+.govx-pots { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
+.govx-pot { display: flex; flex-direction: column; gap: 6px; }
+.govx-pot__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
+.govx-pot__t { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.govx-pot__f { font-size: 13px; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.govx-pot__bar { display: block; height: 5px; border-radius: 999px; background: var(--street-wash); overflow: hidden; }
+.govx-pot__fill { display: block; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 34%, var(--bg)); }
+.govx-pot--dry .govx-pot__f { color: var(--street-accent-text); }
+.govx-pot--dry .govx-pot__fill { background: var(--accent); }
+.govx-pot--empty .govx-pot__f { color: var(--ink); }
+.govx-pot--empty .govx-pot__fill { background: var(--ink); }
+
+/* how strict */
+.govx-presets { display: flex; flex-wrap: wrap; gap: 6px; }
+.govx-preset--on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
+.govx-strict__line { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
+
+/* the office desk and its build-out capsules */
+.office .desk-name__f { white-space: nowrap; }
+.govx-capsule { height: auto; min-height: 44px; padding: 6px 14px; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; }
+.govx-capsule__how { font-size: 11px; font-weight: 400; color: var(--ink-faint); letter-spacing: 0.04em; }
+.govx-pic { margin: 0; display: flex; flex-direction: column; gap: 4px; padding: 6px 0 2px; border-top: 1px solid var(--street-rule); border-bottom: 1px solid var(--street-rule); }
+.govx-pic svg { display: block; max-width: 100%; }
+.govx-pic__cap { font-size: 12px; color: var(--ink-faint); }
+
+/* a live site over the drawing: the crane's jib swings on a long period */
+/* the tower crane: a lattice mast beside the building, its jib reaching back
+   over the site with a hook hanging to it */
+.office-crane { position: absolute; pointer-events: none; }
+.office-crane__mast { position: absolute; right: 24px; top: 0; bottom: 0; width: 8px; box-sizing: border-box; border-left: 1.5px solid color-mix(in srgb, var(--ink) 52%, transparent); border-right: 1.5px solid color-mix(in srgb, var(--ink) 52%, transparent); background: repeating-linear-gradient(45deg, transparent 0 7px, color-mix(in srgb, var(--ink) 30%, transparent) 7px 8px); }
+.office-crane__jib { position: absolute; left: 0; right: 0; top: 0; height: 3px; border-top: 1.5px solid color-mix(in srgb, var(--ink) 52%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); transform-origin: calc(100% - 28px) 1px; animation: office-swing 24s ease-in-out infinite alternate; }
+.office-crane__hook { position: absolute; left: 106px; top: 3px; width: 1px; height: var(--office-hook, 40px); background: color-mix(in srgb, var(--ink) 45%, var(--bg)); }
+.office-crane__hook::after { content: ""; position: absolute; left: -4px; bottom: -6px; width: 9px; height: 6px; box-sizing: border-box; border: 1.5px solid color-mix(in srgb, var(--ink) 55%, transparent); border-top: 0; border-radius: 0 0 5px 5px; }
+@keyframes office-swing { from { transform: rotate(-2.5deg); } to { transform: rotate(2deg); } }
+
+/* ---------- narrower ---------- */
+/* a phone: the panel is a sheet from the foot, still over the street, which
+   scrolls so the building and its pin stay in view above it (street-deck.js) */
+@media (max-width: 899px) {
+  .deck-at { left: 10px; right: 10px; top: auto; bottom: 10px; width: auto; }
+  .deck-ghost, .deck-dock { display: none; }
+  .deck-panel { max-height: 58%; overflow-y: auto; border-radius: 26px; padding: 18px 18px 16px; gap: 13px; }
+  .deck-at .deck-panel { max-height: calc(100vh - 360px); min-height: 0; }
+  .deck-panel::before { content: ""; align-self: center; flex: none; width: 40px; height: 4px; border-radius: 4px; background: var(--gov-chip-edge-pick); margin: -6px 0 -2px; }
+  .deck-panel .ask__waits--wide, .deck-panel .ask__esc { display: none; }
+  .deck-panel .ask__waits--narrow { display: inline; }
+  .deck-panel .ask__more { display: flex; }
+  .ask__q { font-size: 24px; }
+  .ask__said { font-size: 14.5px; }
+  .ask__opt { min-height: 54px; grid-template-columns: 24px minmax(0, 1fr); }
+  .ask__pick { grid-column: 2; grid-row: auto; }
+  .govx-law__top { flex-wrap: wrap; }
+  /* the readings make way while the deck is open */
+  .street-stage:has(#streetDeck:not([hidden])) .street-signs { visibility: hidden; }
+}
+@media (max-width: 640px) {
+  .street-card[data-glass="ask"] { width: auto; padding: 18px 16px 14px; gap: 13px; }
+  .street-card[data-glass="ask"] .street-card__head { top: 18px; right: 16px; }
+}
+@media (max-width: 420px) {
+  .ask__q { font-size: 21px; }
+  .ask--here { padding: 14px 12px 12px; }
+}
+
+/* The Kill Switch, restated for this sheet: nothing here moves under reduced
+   motion; the rest frame (the panel in place, the halo at rest, the scaffold
+   at its height, the crane still) is the whole picture. */
+@media (prefers-reduced-motion: reduce) {
+  .ask, .ask--gone, .ask--skip, .ask--rise, .gov-halo, .office-crane__jib, .deck-clear__tick { animation: none !important; transition: none !important; }
+}