@lovek4d/kickflip 0.5.0 → 0.6.0

package/board/public/style.css

@@ -82,8 +82,10 @@ button.chip { border: 0; }
 .status.review { border-color: var(--color-info); background: conic-gradient(var(--color-info) 0 75%, transparent 75% 100%); }
 .sub.agent { color: var(--color-notice); }
 .sub.next { color: var(--color-notice); }
-.card-hold, .card-blocked, .card-action { color: var(--color-notice); }
+.card-hold { color: var(--color-quiet); }
+.card-blocked, .card-action { color: var(--color-notice); }
 .card-ready { color: var(--color-success); }
+.card-staging { color: var(--color-notice); }
 .sub.next.idle { color: var(--muted); }
 .sub.refused { color: var(--color-danger); }
 .toast-stack { position: fixed; left: 50%; bottom: calc(var(--app-bottom, 0px) + 12px + env(safe-area-inset-bottom));
@@ -163,6 +165,14 @@ button.link { background: none; border: 0; color: var(--accent); padding: 8px 12
 .wb-done { padding: 8px 12px; font-size: 12.5px; color: var(--muted); }
 .wb-done a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
 .wb-loosehead { cursor: default; }
+.wb-counts { position: relative; border: 0; background: none; padding: 4px 0; font: inherit; cursor: help; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.wb-tip { display: none; position: absolute; right: 0; top: 100%; z-index: 6; margin-top: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 6px 18px rgba(0,0,0,.18); color: var(--text); font-weight: 400; text-align: left; }
+.wb-counts:hover .wb-tip, .wb-counts.open .wb-tip { display: block; }
+.wb-counts .wv-cur { font-weight: 700; }
+.wb-counts .wv-review { color: var(--color-info); }
+.wb-counts .wv-progress { color: var(--color-notice); }
+.wb-counts .wv-todo, .wb-counts .wv-done { color: var(--color-quiet); }
+.wb-lane + .wb-lane, .wb-lane + .wb-loose { border-top: 1px solid var(--line); }
 .wb-loosehead:hover { background: var(--band); }
 /* A wave card's step number, inside its id chip, and its ⋯ menu. */
 .wn { color: var(--muted); font-variant-numeric: tabular-nums; padding-right: 5px; margin-right: 4px; border-right: 1px solid var(--line); }
@@ -181,8 +191,9 @@ button.link { background: none; border: 0; color: var(--accent); padding: 8px 12
 .refresh #refresh { padding: 4px; margin-left: -4px; flex: none; }
 .refresh #status { font-size: 12px; min-width: 0; }
 .refresh .late { color: var(--color-notice); font-weight: 600; }
-.refresh .down { color: var(--color-danger); font-weight: 600; }
-.refresh .asleep { color: var(--muted); font-weight: 600; }
+/* The header's time keeps its text; a stopped or offline board turns it and the refresh arrow red, paused usage orange. */
+.refresh .down, .refresh:has(.down) #refresh { color: var(--color-danger); }
+.refresh .hold, .refresh:has(.hold) #refresh { color: var(--color-notice); }
 .lane-github { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--muted); text-align: right; }
 .lane-github .late { color: var(--color-notice); }
 .msg.other { background: transparent; border: 1px solid var(--line); }
@@ -202,10 +213,12 @@ code { overflow-wrap: anywhere; }
 /* The ⌘↵ / Ctrl+↵ hint left of Send: only where there is a keyboard to press it on. */
 .send-hint { display: none; color: var(--muted); font-size: 12px; white-space: nowrap; }
 @media (hover: hover) and (pointer: fine) { .send-hint { display: inline; } }
-/* A composer's text box (BoardUI.dropZone): while files are dragged over the composer, attach.js marks it .dragging and
-   the box gets a dashed accent outline with Drop to attach over it. */
+/* A composer's text box (BoardUI.dropZone), its attach button inside at the bottom right with the text kept clear of it:
+   while files are dragged over the composer, attach.js marks it .dragging and the box gets a dashed accent outline
+   with Drop to attach over it. */
 .dz { position: relative; clear: both; border-radius: 8px; }
-.dz > textarea { display: block; }
+.dz > textarea { display: block; padding-bottom: 40px; }
+.dz > .attach { position: absolute; right: 6px; bottom: 6px; width: 32px; height: 32px; z-index: 1; }
 .dz-hint { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; border-radius: 8px; pointer-events: none;
   background: color-mix(in srgb, var(--panel) 80%, transparent); color: var(--accent); font-weight: 600; font-size: 15px; }
 [data-composer].dragging .dz { outline: 2px dashed var(--accent); outline-offset: 3px; }
@@ -232,7 +245,6 @@ code { overflow-wrap: anywhere; }
 .msg .body:empty { display: none; }
 .note-tools { display: flex; align-items: flex-start; gap: 6px; }
 .note-tools .pending-files { flex: 1; margin-top: 4px; }
-.note-tools .attach { margin-top: 2px; }
 
 /* Compose button and sheet */
 main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
@@ -322,9 +334,24 @@ main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
 }
 .working-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-notice); margin-right: 5px; vertical-align: 1px; }
 @media (prefers-reduced-motion: no-preference) { .working-dot { animation: pulse 1.4s ease-in-out infinite; } }
-form[data-reply] .row .quick { margin-left: auto; margin-right: 6px; }
-form[data-reply] .row [data-confirm="finish"] { margin-right: 6px; }
-.q .proto { display: inline-block; margin: 0 0 8px; }
+/* A thread box's row: What's left? at the left, the eye, fire and attach at the right, then Send, or a pair below
+   (docs/adr/2026-11-05-1918-done-shows-only-in-in-review-beside-reply.md). */
+form[data-reply] .row .quick { margin: 0; }
+form[data-reply] .icons { display: inline-flex; flex: none; margin-left: auto; }
+.dz.bare > textarea { padding-bottom: 12px; }
+/* A composer's send buttons (ui.js sendButton), each with its key as a small gray hint where there is a keyboard and
+   room. A pair takes a row of two halves; a Todo card's reply box wraps its pair under the row. */
+.send-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
+.send-actions button, [data-sends] button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
+.send-actions button { min-height: 44px; }
+form[data-reply] .row { flex-wrap: wrap; gap: 6px; }
+form[data-reply] .row > .send-actions { flex: 0 0 100%; margin-top: 4px; }
+.key-hint { display: none; font-size: 11px; font-weight: 400; color: var(--muted); white-space: nowrap; }
+button.primary .key-hint { color: color-mix(in srgb, var(--on-accent) 62%, transparent); }
+@media (hover: hover) and (pointer: fine) and (min-width: 600px) { .key-hint { display: inline; } }
+#askStatus { margin: 6px 2px 0; }
+#askStatus:empty { display: none; }
+.q .proto-view { display: inline-block; margin: 0 0 10px; color: var(--accent); }
 .msg .ask-actions { margin: -4px -6px 0 8px; }
 button.attach { border: 0; background: transparent; padding: 0; }
 button.attach:disabled { opacity: .35; }
@@ -337,21 +364,31 @@ button.attach:disabled { opacity: .35; }
    pixel off its siblings (docs/adr/2026-11-03-1519-a-building-cards-phase-bars-end-its-time-row.md). */
 .card-time .phase-bars { display: inline-flex; gap: 2px; vertical-align: middle; position: relative; top: -1px; }
 .phase-bars i { width: 9px; height: 4px; border-radius: 2px; background: var(--line); }
-/* A strip dims, and its running bar stops blinking, while the card waits on something other than a builder
-   (docs/adr/2026-11-03-2024-every-in-progress-card-shows-its-phase-bars.md). app-cards.js sweeps bars in --bar-fill. */
+/* A strip dims while the card waits on something other than a builder; ui-progress-bar.js then writes its running bar
+   as done, so it stops blinking (docs/adr/2026-11-03-2024-every-in-progress-card-shows-its-phase-bars.md). app-cards.js
+   sweeps bars in --bar-fill. */
 .phase-bars { --bar-fill: var(--color-notice); }
 .phase-bars.dim { --bar-fill: color-mix(in srgb, var(--muted) 55%, transparent); }
 .phase-bars i.done, .phase-bars i.now { background: var(--bar-fill); }
 /* A bar part way, to --p: a starting board's clone (ui-sidebar.js). */
 .phase-bars i.fill { background: linear-gradient(to right, var(--bar-fill) var(--p), var(--line) var(--p)); }
-@keyframes pulse-fill { 50% { background-color: color-mix(in srgb, var(--color-notice) 35%, transparent); } }
-@media (prefers-reduced-motion: no-preference) { .phase-bars:not(.dim) i.now { animation: pulse-fill 1.4s ease-in-out infinite; } }
+/* The pulse dims the bar's own fill, so it pulses in its lane's colour. */
+@keyframes pulse-fill { 50% { background-color: color-mix(in srgb, var(--bar-fill) 35%, transparent); } }
+/* Every pulse beats on one clock (ui-progress-bar.js onePulse), so a card's running bar and its status dot blink together. */
+@media (prefers-reduced-motion: no-preference) { .phase-bars i.now { animation: pulse-fill 1.4s ease-in-out infinite; } }
 /* A stale build's status line, dot included, is the needs-you red, and a tap on it nudges Claude (ui-cards.js builderStatus). */
 /* A status line that is a button is drawn as the div it replaces: this one reset, then only a colour per state. The font
-   shorthand stays out so .sub's 12px wins. */
-button.sub { display: block; width: 100%; margin-inline: 0; margin-bottom: 0; padding: 0; min-height: 0; border: 0; border-radius: 0; background: none;
+   shorthand stays out so .sub's 12px wins. It sets no width: a button is its own block formatting context, so a full-width one
+   drops below the bump icons' float instead of sitting beside it as the div's line box does (board/layout.test.mjs). */
+button.sub { display: block; margin-inline: 0; margin-bottom: 0; padding: 0; min-height: 0; border: 0; border-radius: 0; background: none;
   font-family: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; text-align: left; appearance: none; -webkit-appearance: none; }
 button.sub.agent.stalled { color: var(--color-danger); }
+/* A tap on it calms the line to the in-progress orange, its dot sending a ripple, until the card's next status line (app-cards.js nudge). */
+button.sub.agent.stalled.nudging { color: var(--color-notice); cursor: default; }
+.nudging .working-dot { position: relative; }
+.nudging .working-dot::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; }
+@keyframes nudge-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
+@media (prefers-reduced-motion: no-preference) { .nudging .working-dot::after { animation: nudge-ping 1.1s ease-out infinite; } }
 .stalled .working-dot { background: currentColor; }
 .brand { display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; }
 .brand .hub { grid-row: 1 / span 2; align-self: center; }
@@ -365,23 +402,33 @@ button.sub.agent.stalled { color: var(--color-danger); }
 .msg.agent { padding: 0 10px; margin: 4px 0; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
 .msg.agent.started { color: var(--color-notice); } .msg.agent.finished { color: var(--color-success); }
 .msg.agent .muted { font-weight: 400; }
-/* A planner's line, dot included, is the owner's blue, on the card and in the thread; its finish stays green
-   (docs/adr/2026-11-03-1551-planners-and-implementers-are-two-kinds-of-agent.md). */
-.sub.agent.planner, .msg.builder-status.planner, .msg.agent.started.planner { color: var(--accent); }
+/* A planner's line in the thread, dot included, is the owner's blue; its finish stays green
+   (docs/adr/2026-11-03-1551-planners-and-implementers-are-two-kinds-of-agent.md). On the card it takes the lane's colour below. */
+.msg.builder-status.planner, .msg.agent.started.planner { color: var(--accent); }
 .planner .working-dot { background: currentColor; }
-/* Every status line on an In Progress card is the phase-bar orange, a planner's too, and every build or plan line on a
-   Todo card the owner's blue, dot included; a Todo card's planner dashes are that blue, the running one pulsing
-   (docs/adr/2026-11-04-2300-each-lane-is-a-queue-for-the-orchestrator.md). */
+/* A run's status line, dot included, takes its card's lane colour, a planner's too: grey in Todo, the phase-bar orange in
+   In Progress, blue in In Review; a Todo card's planner dashes are its grey, the running one pulsing
+   (docs/adr/2026-11-06-0145-every-run-takes-its-lanes-colour.md). */
+.sub.agent.in-todo { color: var(--muted); }
 .sub.agent.in-progress { color: var(--color-notice); }
-.sub.agent.in-todo { color: var(--accent); }
-.sub.agent.in-progress .working-dot, .sub.agent.in-todo .working-dot { background: currentColor; }
-.phase-bars.plan { --bar-fill: var(--accent); }
-@keyframes pulse-fill-plan { 50% { background-color: color-mix(in srgb, var(--accent) 35%, transparent); } }
-@media (prefers-reduced-motion: no-preference) { .phase-bars.plan:not(.dim) i.now { animation-name: pulse-fill-plan; } }
+.sub.agent.in-review { color: var(--color-info); }
+.sub.agent.in-todo .working-dot, .sub.agent.in-progress .working-dot, .sub.agent.in-review .working-dot { background: currentColor; }
+/* docs/adr/2026-11-05-0410-a-card-status-word-comes-from-a-signal-the-board-checks.md: a quiet builder and a request no planner
+   has picked up are grey, after the lane colours so they win. */
+.sub.agent.quiet, .sub.asked { color: var(--muted); }
+.sub.agent.waiting-gray { color: var(--muted); }
+/* The one class every paused status takes, gray: the card and thread line, the header, the hub banner. */
+.paused { color: var(--muted); font-weight: 600; }
+.phase-bars.in-todo { --bar-fill: var(--muted); }
 .msg.calls { padding: 0 10px; margin: 4px 0; font-size: 12px; overflow-wrap: anywhere; }
 .msg.calls summary { cursor: pointer; color: var(--muted); list-style: none; }
 .msg.calls summary::-webkit-details-marker { display: none; }
 .msg.calls[open] summary .mark-icon { transform: rotate(90deg); }
+.msg.calls.status-fold summary { color: var(--color-notice); overflow-wrap: anywhere; }
+.msg.calls.status-fold.planner summary { color: var(--accent); }
+/* Only a run's finished line is green: the fold's summary mirrors its last line, green once the run has finished, else the
+   started and status lines' orange or a planner's blue (docs/adr/2026-11-07-1600-only-a-runs-finished-line-is-green.md). */
+.msg.calls.status-fold summary.finished { color: var(--color-success); }
 .msg.calls ol { margin: 4px 0; padding-left: 23px; }
 .agent-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; }
 /* Every thread status line's leading mark, icon or dot, sits centred in one 18px box, so the text after it always starts
@@ -398,10 +445,7 @@ button.sub.agent.stalled { color: var(--color-danger); }
 .msg .reply { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 2px; }
 .msg-foot .foot-status { display: inline-flex; align-items: center; }
 /* The thread's eye and fire are toggles: pressed reads as chosen, and the hint under the box says what Send posts. */
-form[data-reply] .tools { display: inline-flex; flex: none; }
 button.attach[aria-pressed="true"] { color: var(--accent); background: var(--chip); }
-.flag-hint { margin: 4px 2px 0; min-height: 1.2em; color: var(--muted); font-size: 12px; }
-.flag-hint.on { color: var(--accent); }
 /* INT-30: card line order */
 .line6 { margin-top: 4px; }
 .card-time time { font-variant-numeric: tabular-nums; }
@@ -418,10 +462,25 @@ button.attach[aria-pressed="true"] { color: var(--accent); background: var(--chi
 .lane[open] > .list { border-radius: 0 0 10px 10px; }
 .lane > summary .count { color: var(--muted); font-weight: 400; }
 /* Each lane's sort icon and its menu, grey (docs/adr/2026-11-01-1817-colour-says-whos-waiting.md) */
-/* INT-35: offline header */
-.view-board.offline #compose { display: none; }
-.view-board.offline main > * { opacity: .72; }
-.view-board.offline main, .view-board.offline > .top > :not(.nav), .view-board.offline > .top .nav > :not(.refresh) { pointer-events: none; }
+/* A board shared with someone else (docs/adr/2026-11-05-2215-a-board-is-shared-view-only-with-a-tailscale-login.md):
+   shell.js marks the page .shared-view, which hides Board settings and the architecture review, and, unless the person
+   has Full on this board (.shared-full; docs/adr/2026-11-05-1912-a-shared-person-is-view-or-full.md), the +, every
+   composer and a card's buttons, keeping its links (Visit, Notes, Open questions). Merge shows disabled under Full. */
+.shared-view :is(#settingsLink, #archBulb) { display: none !important; }
+.shared-view:not(.shared-full) :is(#compose, [data-composer], .actions button, button[data-confirm]) { display: none !important; }
+.shared-full button[data-confirm="merge"] { opacity: .45; pointer-events: none; }
+.view-only-strip { margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 13px; }
+.view-only-strip b { color: var(--accent); }
+/* A board out of reach (docs/adr/2026-11-06-0135-a-board-out-of-reach-keeps-its-copy-or-shows-a-landing.md): it reads as before,
+   undimmed, and only the buttons that send, ui.js SENDS, are held, the labelled ones saying why; app-header.js stops their taps. */
+.offline :is(form button[type="submit"], .actions button, button[data-confirm], button[data-deck-pick], button[data-review-answer], button[data-prompt-send], button[data-prompt-choice], button[data-quick], button[data-card-bump], button[data-bump], button[data-withdraw], button[data-band-move], button[data-grill], button[data-proto], button[data-visual], button[data-plan], button[data-main-pull], button[data-arch-run], button[data-try], button[data-reopen]) { opacity: .55; cursor: not-allowed; }
+/* With no copy to show, the landing takes the board's place: the kickflip mark and two lines, as hub/front-door.mjs's page has them. */
+.down-landing { min-height: 60vh; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 32px 24px; text-align: center; }
+.down-landing-mark { display: block; margin-bottom: 8px; width: 70px; height: 60px; object-fit: contain; }
+.down-landing-line { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
+.down-landing-hint { margin: 0; font-size: 14px; color: var(--muted); }
+.view-board.down main > :not(#downLanding), .view-board.down :is(#needsPane, #compose) { display: none; }
+.view-settings.down .settings-body > :not(.down-landing) { display: none; }
 /* INT-28: answer banner */
 .answer-banner { display: flex; align-items: center; gap: 4px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
   border-radius: 10px; padding: 2px 4px 2px 0; margin-bottom: 12px; }
@@ -467,11 +526,21 @@ button.attach[aria-pressed="true"] { color: var(--accent); background: var(--chi
 .top .nav #refresh, .top .nav a.icon { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 4px; border: 0; line-height: 1; }
 .top .nav #status { line-height: 1.1; white-space: nowrap; }
 .top .nav #refresh:disabled, .top .nav a.icon[aria-disabled="true"] { opacity: .35; pointer-events: none; }
-/* [the bulb runs an architecture review of the board's repo](docs/adr/2026-11-02-1813-the-bulb-runs-an-architecture-review-of-the-boards-repo.md): the bulb sits between refresh and the gear, and glows orange while an architecture review runs */
-.top .nav .arch-bulb { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 4px; border: 0; line-height: 1; color: var(--muted); }
-.top .nav .arch-bulb:hover { color: var(--text); }
-.top .nav .arch-bulb[hidden] { display: none; }
-.top .nav .arch-bulb.running { color: var(--color-notice); }
+/* The foot of the board (docs/adr/2026-11-07-1300-board-and-open-questions-are-two-pages.md): the bulb and the gear, centred under the lanes.
+   [the bulb runs an architecture review of the board's repo](docs/adr/2026-11-02-1813-the-bulb-runs-an-architecture-review-of-the-boards-repo.md): it glows orange while an architecture review runs */
+.board-foot { display: flex; justify-content: center; gap: 8px; margin: 20px 0 0; }
+.board-foot .arch-bulb, .board-foot a.icon { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0; padding: 4px; border: 0; line-height: 1; color: var(--muted); }
+.board-foot :is(.arch-bulb, a.icon):hover { color: var(--text); }
+.board-foot .arch-bulb[hidden] { display: none; }
+.board-foot .arch-bulb.running { color: var(--color-notice); }
+.board-foot a.icon[aria-disabled="true"] { opacity: .35; pointer-events: none; }
+/* The pages switch below 900px: the board header's ? with the open-question count on its corner, and Waiting on you's check back to the board. */
+.top .pages-switch { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: auto; height: auto; margin: 0; padding: 4px; border: 0; border-radius: 0; line-height: 1; color: var(--muted); }
+.top .pages-switch:hover { color: var(--text); }
+.top .pages-switch:active { background: none; }
+.pages-switch .q-badge { position: absolute; top: 0; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--color-notice); color: #1c1407;
+  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 1.5px var(--bg); }
+.pages-switch .q-badge[hidden] { display: none; }
 .arch-bulb.running svg { filter: drop-shadow(0 0 4px currentColor); }
 @media (prefers-reduced-motion: no-preference) { .arch-bulb.running svg { animation: arch-glow 1.4s ease-in-out infinite; } }
 @keyframes arch-glow { 50% { filter: drop-shadow(0 0 1px currentColor); opacity: .55; } }
@@ -481,8 +550,6 @@ button.attach[aria-pressed="true"] { color: var(--accent); background: var(--chi
 .arch-last .muted { font-size: 12.5px; }
 .arch-body .arch-waits { color: var(--color-notice); }
 .arch-body .arch-run { width: 100%; min-height: 44px; font-size: 15px; }
-/* INT-64: offline, the header's time and refresh turn red */
-.view-board.offline .refresh #refresh, .refresh .link-state.offline { color: var(--color-danger); }
 .back { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; color: var(--accent); text-decoration: none; }
 /* The lead slot, logo or back, is one 44px tap box on the page's left edge, so every page's header lines up the same
    (docs/adr/2026-10-29-1639-a-questions-takes-show-inline.md). The brand keeps that height when the rail hides the logo, so the
@@ -493,15 +560,10 @@ button.attach[aria-pressed="true"] { color: var(--accent); background: var(--chi
 .top .hub + .back { margin-left: 0; }
 .top .back:active { background: var(--accent-soft); }
 .top .brand :is(h1, h2) { font-size: 17px; font-weight: 600; line-height: 22px; }
-/* The last visit paints dimmed until the fresh board lands; the controls ui-snapshot.js liveControls blocks rest meanwhile.
-   A changed line, and a card that changed lanes, gets a blue border that fades once; an updated card, open body included, takes
-   a blue tint that fades (app-snapshot.js, whose SIGNS holds each animation's length). */
+/* Every change, a line, a moved card or an updated card, open body included, takes the one blue tint that fades
+   (app-snapshot.js highlight, whose TINT_MS is its length). */
 main > * { transition: opacity .25s ease; }
-.view-board[data-board="snapshot"]:not(.offline) main > * { opacity: .62; }
-.view-board[data-board="snapshot"] :is(.actions button, button[data-plan], button[data-bump], button[data-confirm="bump"], button[data-edit], button[data-withdraw], button[data-check-github], form[data-reply] button[type=submit], form[data-reply] button[data-quick], form[data-reply] button[data-proto], form[data-reply] button[data-confirm], .prompt button) { opacity: .45; pointer-events: none; }
-.flash { animation: snapshot-flash 1.6s ease-out var(--sign-delay, 0s) 1; border-radius: 6px; }
-@keyframes snapshot-flash { from { box-shadow: inset 0 0 0 2px var(--color-info); } to { box-shadow: inset 0 0 0 2px transparent; } }
-.item.tint { animation: card-tint 2.4s ease-out var(--sign-delay, 0s) 1; border-radius: 6px; }
+.tint { animation: card-tint 2.4s ease-out var(--sign-delay, 0s) 1; border-radius: 6px; }
 @keyframes card-tint { 0%, 25% { background: var(--accent-soft); } 100% { background: transparent; } }
 .msg .quote { margin: 4px 0 6px; padding: 2px 0 2px 8px; border-left: 2px solid var(--line); color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
 /* [one board registry for every hub feature](docs/adr/2026-10-29-1639-one-board-registry-for-every-hub-feature.md): the GitHub mark opens the Hub links sheet, with a red dot while a link is broken; a new board's setup checklist */
@@ -530,11 +592,26 @@ main > * { transition: opacity .25s ease; }
 .view-settings .who.new { border-color: var(--accent); }
 .view-settings .add { display: flex; gap: 6px; margin-top: 8px; }
 .view-settings .add input { flex: 1; min-width: 0; }
+.view-settings .add.pick { flex-wrap: wrap; }
+.view-settings .share-now { color: var(--ok); font-weight: 600; }
+.view-settings .share-level { display: flex; gap: 4px; margin-top: 6px; }
+.view-settings .share-level button { min-height: 32px; padding: 4px 12px; font-size: 13px; }
+.view-settings .share-level button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
+.view-settings .share-now::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
+.view-settings .share-reach { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }
+.view-settings .share-reach p { flex: 1 1 220px; margin: 0; }
+.view-settings .share-reach button { flex: none; }
+.view-settings .pick-col { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
+.view-settings .pick-list { max-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
+.view-settings .pick-list button { text-align: left; }
+.view-settings .pick-list button[aria-pressed="true"] { border-color: var(--accent); }
+.view-settings .who .sub { display: block; margin-top: 2px; }
 .view-settings .replies .reply { margin-top: 8px; }
 .view-settings label.who { gap: 12px; cursor: pointer; }
 .view-settings label.who .sub { display: block; margin-top: 2px; }
 .view-settings input.toggle { flex: none; width: 1.4rem; height: 1.4rem; margin: 0; accent-color: var(--accent); }
 .view-settings input.count { flex: none; width: 4.5em; text-align: center; }
+.view-settings label.who select { flex: none; max-width: 45%; min-height: 36px; }
 /* A settings switch waiting on the server (ui.js waitOn) keeps its face, disabled, with a spinner beside it
    (docs/adr/2026-11-03-1921-board-settings-grant-a-boards-session-permissions.md) */
 .view-settings .toggle-slot { flex: none; display: inline-flex; align-items: center; gap: 8px; }
@@ -555,6 +632,14 @@ main > * { transition: opacity .25s ease; }
 .view-settings .close-board-warning:has(li) { border: 1px solid var(--color-danger); padding: 0 12px; border-radius: 10px; margin-bottom: 14px; }
 .view-questions .q { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 12px 0; }
 .view-questions .q.urgent { border-color: var(--color-notice); }
+/* docs/adr/2026-11-05-2331-a-sent-answer-is-resolved-in-place-until-the-page-reloads.md
+   A requested question takes an accent tint and a sent or resolved one a green tint, each with its border drawn inside
+   the card as well, so the card keeps its size. */
+.view-questions .q.pr-busy { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); box-shadow: inset 0 0 0 1px var(--accent); }
+.view-questions .q.pr-busy .opt { opacity: .55; cursor: default; }
+.view-questions .q.pr-busy .opt:has(input:checked) { opacity: 1; }
+.view-questions .q.resolved { border-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 9%, var(--panel)); box-shadow: inset 0 0 0 1px var(--color-success); }
+.view-questions .q.resolved .sent-line { margin: 6px 0; font-size: 13px; color: var(--color-success); }
 .view-questions .q h3 { font-size: 15px; margin: 6px 0 4px; line-height: 1.3; }
 .view-questions .ctx { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
 .view-questions .opt { display: grid; grid-template-columns: 22px 1fr; gap: 6px; padding: 8px; border: 1px solid var(--line);
@@ -576,18 +661,17 @@ main > * { transition: opacity .25s ease; }
 .view-questions .topics button { min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 13px;
   background: var(--panel); color: var(--text); white-space: normal; text-align: left; overflow-wrap: anywhere; }
 .view-questions .topics button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
+.view-questions .topics button.progress { border-color: var(--line); background: color-mix(in srgb, var(--color-notice) 12%, var(--panel)); }
+.view-questions .topics button.progress[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--color-notice) 12%, var(--accent-soft)); }
+@keyframes pill-arrive { from { opacity: 0; transform: translateX(-12px); box-shadow: 0 0 0 3px var(--accent); } to { opacity: 1; transform: none; box-shadow: 0 0 0 0 transparent; } }
+@media (prefers-reduced-motion: no-preference) { .view-questions .topics button.arrived { animation: pill-arrive .6s ease-out; } }
 .view-questions .topics .n { color: var(--muted); margin-left: 4px; }
 .view-questions .topichead { margin: 2px 0 6px; }
 .view-questions details.done > summary { cursor: pointer; color: var(--muted); font-size: 13px; margin: 16px 0 4px; }
-.view-questions details.done .trow { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
-.view-questions details.done button.ghost { font-size: 14px; text-align: left; padding: 6px 2px; }
-.view-questions details.done .trow button { min-width: 0; }
-.view-questions details.done .trow span { flex: none; }
 .view-questions details.resolved-group > summary { list-style: none; min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 12px 0; }
 .view-questions details.resolved-group > summary::-webkit-details-marker { display: none; }
 .view-questions details.resolved-group > summary .caret { transition: transform .15s; }
 .view-questions details.resolved-group[open] > summary .caret { transform: rotate(90deg); }
-.view-questions details.resolved-group > summary .names { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
 .view-questions .q.resolved button.chip { cursor: pointer; font: inherit; font-size: 12px; min-height: 28px; }
 .view-questions .q.resolved button.chip:disabled { cursor: default; }
 .view-questions .q.resolved .resolved-line { margin: 8px 0; }
@@ -600,39 +684,26 @@ main > * { transition: opacity .25s ease; }
   display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--line); }
 .view-questions .bar .send-hint { margin-left: auto; }
 /* The + rides above the sticky Send bar rather than over its Send. */
-.view-questions:has(.bar) .fab { bottom: calc(var(--app-bottom, 0px) + var(--fab-edge) + 72px); }
 .view-questions .bar #qstatus { min-width: 0; }
 .view-questions .bar #qstatus.sent { color: var(--color-success); font-weight: 600; }
+/* With no open question, the moon and its line sit at the centre of what the page shows between its top and the nav,
+   or of what the desktop pane has left under its Needs you lines. */
+.view-questions .q-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); text-align: center;
+  min-height: calc(var(--vh, 100dvh) - var(--app-bottom, 0px) - max(16px, env(safe-area-inset-top))); }
+.view-questions .q-empty p { margin: 0; font-size: 15px; }
 .view-questions .solo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0; }
 /* docs/adr/2026-11-02-1332-a-prototype-round-ends-with-a-one-take-confirm.md */
 .view-questions .topichead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
 .view-questions .topichead .try-spin { width: 9px; height: 9px; margin-right: 5px; vertical-align: -1px; }
-.view-questions .q .pr-open { display: inline-block; margin: 0 0 8px; }
 .view-questions .pr-rule { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12.5px; color: var(--muted); }
 .view-questions .pr-rule svg { flex: none; }
 
-/* A question's takes sit in as many columns as keep each at least 380px wide, one on a phone; each its option above its
-   preview, and each row's takes top-aligned, since each frame takes its own page's height. */
+/* A question's drawn takes sit in as many columns as keep each at least 380px wide, one on a phone; each its option above
+   its diagram, and each row's takes top-aligned. */
 .view-questions .takes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 10px; align-items: start; margin: 6px 0; }
 .view-questions .take { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: 10px; }
 .view-questions .take:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
 .view-questions .take .opt, .view-questions .take .opt:has(input:checked) { border: 0; padding: 0; margin: 0; background: none; }
-/* view-questions.js sets a frame's height to its page's once measured; until then it shows nothing, so a take that turns
-   its question into the full-width layout never flashes cut off. */
-.view-questions .take-shot { position: relative; display: block; margin-top: 8px; height: 360px; border: 1px solid var(--line); border-radius: 10px;
-  overflow: hidden; transition: height .15s ease; }
-.view-questions .take-shot iframe { width: 100%; height: 100%; border: 0; background: var(--bg); }
-.view-questions .take-shot.measuring { transition: none; }
-.view-questions .take-shot.measuring iframe { visibility: hidden; }
-.view-questions .take-shot.measuring::before { content: 'Loading take…'; position: absolute; inset: 0; display: grid; place-items: center;
-  color: var(--muted); font-size: 12.5px; }
-.view-questions:has(.takes-full) main { max-width: none; }
-.view-questions .takes-full { grid-template-columns: minmax(0, 1fr); }
-.view-questions .take-choices { display: flex; flex-wrap: wrap; gap: 8px; }
-.view-questions .take-choices .opt { flex: 1 1 160px; margin: 0; }
-.view-questions .take-choices .opt[aria-current="true"] { border-color: var(--accent); }
-.view-questions .takes-full .take { padding: 0; border: 0; }
-.view-questions .takes-full .take-shot { margin-top: 0; transition: none; }
 
 /* A take with nothing to see: boxes and arrows, then what it means in practice. */
 .view-questions .flow { margin: 10px 0 4px; }
@@ -683,15 +754,15 @@ main > * { transition: opacity .25s ease; }
 .view-frame .alone { white-space: nowrap; font-size: 13px; }
 
 @media (max-width: 899px) {
-  :root:has(body > .top, body.has-sidebar > :not(.sidebar) > .top):not(.ps-embed) {
+  :root:has(body > .top, body.has-sidebar > :not(.sidebar) > .top) {
     --app-bottom: calc(49px + max(4px, env(safe-area-inset-bottom)));
   }
   body > .top, body.has-sidebar > :not(.sidebar) > .top {
     position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 7;
     border-bottom: 0; border-top: 1px solid var(--line); padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom));
   }
-  .top .nav #refresh, .top .nav a.icon, .top .nav .arch-bulb { min-width: 44px; min-height: 44px; }
-  body > main, body.has-sidebar > :not(.sidebar) > main { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: calc(96px + var(--app-bottom, 0px) + env(safe-area-inset-bottom)); }
+  .top .nav #refresh, .top .nav a.icon, .top .pages-switch { min-width: 44px; min-height: 44px; }
+  body > main, body.has-sidebar > :not(.sidebar) > main, body.has-sidebar > :not(.sidebar) > .split > main { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: calc(96px + var(--app-bottom, 0px) + env(safe-area-inset-bottom)); }
   .view-frame:not(.own-header) { padding-bottom: var(--app-bottom, 0px); }
   .sheet { bottom: max(0px, calc(var(--app-bottom, 0px) - var(--kb, 0px)));
     max-height: calc(var(--vh, 100dvh) + var(--kb, 0px) - max(var(--app-bottom, 0px), var(--kb, 0px)) - env(safe-area-inset-top) - 12px); }
@@ -699,6 +770,9 @@ main > * { transition: opacity .25s ease; }
   .sheet.keyboard-sheet { --sheet-limit: max(80px, calc(var(--vh, 100dvh) + var(--kb, 0px) - max(0px, calc(var(--app-bottom, 0px) - var(--kb, 0px))) - max(12px, env(safe-area-inset-top)))); }
 }
 
+/* Typing, a text field focused (shell.js sets :root.typing): the floating + is disabled and the page stays as it is. */
+:root.typing .fab { opacity: .35; pointer-events: none; }
+
 .settings-modal { position: fixed; inset: max(12px, env(safe-area-inset-top)) 0 calc(12px + max(var(--kb, 0px), var(--app-bottom, 0px))); margin: auto; width: min(680px, calc(100% - 24px));
   height: fit-content; max-width: none; max-height: max(120px, calc(var(--vh, 100dvh) - max(0px, calc(var(--app-bottom, 0px) - var(--kb, 0px))) - 24px - env(safe-area-inset-top)));
   padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--text);
@@ -716,21 +790,18 @@ main > * { transition: opacity .25s ease; }
 .lk-over, .lk-over > main { display: contents; }
 
 .tk-section { margin: 10px 0; }
-/* The Tickets source row's live state, and Hub's key field opened under it (dialogs.js ticketsControl keyState). */
+/* The Tickets source row's live state (dialogs.js ticketsControl keyState). */
 .tk-status { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
 .tk-status b { font-weight: 600; color: var(--text); }
 .tk-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
 .tk-status.on .dot { background: var(--accent); }
 .tk-status.on b { color: var(--accent); }
-.tk-inline { margin: 6px 0 10px; border: 1px solid var(--accent); border-radius: 10px; padding: 8px 10px; background: var(--accent-soft); }
-.tk-inline .tk-ask { margin: 2px 0 6px; font-size: 13px; }
-.tk-inline .hub-view main { padding: 0; }
 .tk-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 8px 0; border: 1px solid var(--line); border-radius: 9px; background: var(--chip); }
 .tk-seg button { min-width: 0; min-height: 44px; padding: 6px 4px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
 .tk-seg button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
-.ask-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 0 0; }
-.ask-choice-help { margin: 4px 2px 0; }
 .tk-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
+.landing-seg button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; text-align: center; }
+.landing-seg .sub { font-weight: 400; opacity: .8; line-height: 1.25; }
 .tk-grid { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
 @media (min-width: 560px) { .tk-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
 .tk-field { display: block; min-width: 0; }
@@ -844,3 +915,54 @@ button[aria-busy="true"]:is([data-card-bump], [data-bump]) svg { fill: currentCo
 .rv-links a { color: var(--accent); text-decoration: none; }
 .rv-acts { display: flex; flex-wrap: wrap; gap: 8px; }
 .view-questions .bar #qstatus .try-spin { color: var(--accent); margin-right: 6px; }
+
+/* Needs you (app-needs.js): a deck at the top of the board on a phone; from 900px a pane beside the lanes, its lines over
+   Waiting on you (docs/adr/2026-11-05-0408-needs-you-is-a-deck-on-a-phone-and-a-pane-on-a-desktop.md). */
+.needs-pane { display: none; }
+.needs-deck { margin: 0 0 12px; border: 1px solid color-mix(in srgb, var(--color-notice) 45%, var(--line)); border-radius: 14px;
+  background: color-mix(in srgb, var(--color-notice) 7%, var(--panel)); overflow: hidden; }
+.deck-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px 4px; }
+.deck-head h2 { margin: 0; flex: 1; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-notice); }
+.deck-n { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--color-notice); color: #1c1407; font-size: 12px; font-weight: 700; text-align: center; }
+.deck-card { padding: 2px 14px 12px; min-width: 0; overflow-wrap: anywhere; }
+.deck-what { margin: 0 0 2px; font-size: 12px; color: var(--muted); }
+.deck-card h3 { margin: 0 0 4px; font-size: 15px; line-height: 1.3; }
+.deck-card h3 a { color: inherit; text-decoration: none; }
+.deck-card .ctx { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
+.deck-proto { margin: 0 0 10px; color: var(--accent); }
+.deck-opts { display: flex; flex-direction: column; gap: 6px; }
+.deck-opts button { text-align: left; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
+.deck-opts button.rec { border-color: var(--accent); }
+.deck-opts .rec-word { color: var(--accent); font-weight: 500; font-size: 12px; margin-left: 4px; }
+.deck-opts small { display: block; color: var(--muted); font-size: 12.5px; }
+.deck-prompt { margin: 0; padding: 0; list-style: none; }
+.deck-prompt li.prompt { padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
+.deck-acts { display: flex; flex-wrap: wrap; gap: 8px; }
+.deck-bar { display: flex; align-items: center; gap: 10px; padding: 0 14px 10px; }
+.deck-dots { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; }
+.deck-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
+.deck-dots i.on { background: var(--color-notice); }
+.deck-bar button { border-radius: 999px; padding: 5px 12px; font-size: 13px; }
+.deck-more { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 10px 14px; border-top: 1px solid color-mix(in srgb, var(--color-notice) 28%, var(--line));
+  background: color-mix(in srgb, var(--color-notice) 14%, var(--panel)); color: var(--text); font-weight: 600; font-size: 14px; text-decoration: none; }
+.deck-more::after { content: '›'; color: var(--accent); font-size: 18px; }
+.deck-more:hover { text-decoration: none; }
+@media (min-width: 900px) {
+  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
+  .split > main { max-width: none; margin: 0; }
+  .needs-deck { display: none; }
+  /* Waiting on you is the board's pane here, so neither page shows the switch to the other. */
+  .top .pages-switch { display: none; }
+  /* The board's + sits at the bottom right of the left pane: the pane ends at the middle of the space right of the sidebar. */
+  .view-board .fab { right: calc(50% - var(--sidebar-w, 0px) / 2 + var(--fab-edge)); }
+  body.has-sidebar { --sidebar-w: 272px; }
+  html.sb-collapsed body.has-sidebar { --sidebar-w: 0px; }
+  .needs-pane { display: block; position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 0; border-left: 1px solid var(--line); }
+  .needs-pane .needs-questions main { padding: 0; max-width: none; }
+  .needs-pane:has(.q-empty), .needs-pane .needs-questions:has(.q-empty), .needs-pane .needs-questions:has(.q-empty) main, .needs-pane #page:has(.q-empty) { display: flex; flex-direction: column; }
+  .needs-pane .needs-questions:has(.q-empty), .needs-pane .needs-questions:has(.q-empty) main, .needs-pane #page:has(.q-empty), .needs-pane .q-empty { flex: 1; min-height: 0; }
+  .needs-pane .waiting { margin: 0 0 12px; }
+}
+/* The Send bar is the last thing on its page: only the phone nav under it is left clear, so its background runs to the edge. */
+body .view-questions main { padding-bottom: var(--app-bottom, 0px); }
+.msg.calls.status-fold summary .fold-log { margin-left: 6px; color: var(--accent); text-decoration: underline; }