@lovek4d/kickflip 0.3.1 → 0.4.0

package/board/public/style.css

@@ -14,7 +14,7 @@ button:disabled { opacity: .5; cursor: default; }
 button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
 a.button { display: inline-block; border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; background: var(--panel); color: var(--text); text-decoration: none; }
 /* resolves: the button that clears a card's Action needed (board/domain.mjs resolvedBy), in that badge's notice tone. */
-:is(a, button).resolves, button.build, button.unhold, button.closes { border-color: var(--color-notice); background: var(--color-notice); color: #1c1407; }
+:is(a, button).resolves, button.build.ready, button.unhold, button.closes { border-color: var(--color-notice); background: var(--color-notice); color: #1c1407; }
 button.ghost { border-color: transparent; background: transparent; font-size: 18px; padding: 2px 8px; }
 textarea, input { font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--line);
   border-radius: 8px; padding: 8px 10px; width: 100%; resize: vertical; }
@@ -72,7 +72,7 @@ main { max-width: 860px; margin: 0 auto; padding: 12px 16px 80px; }
   padding: 1px 7px; font-size: 12px; white-space: nowrap; color: var(--text); }
 button.chip { border: 0; }
 .chip.tone-quiet { color: var(--color-quiet); } .chip.tone-normal { color: var(--color-info); } .chip.tone-notice { color: var(--color-notice); }
-.chip.tone-danger { color: var(--color-danger); } .chip.tone-ready { color: var(--color-success); }
+.chip.tone-danger { color: var(--color-danger); } .chip.tone-ready { color: var(--color-success); } .chip.tone-merged { color: var(--color-merged); }
 /* Action needed keeps the notice orange; unread takes the accent so the two never read alike. */
 .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--color-quiet); }
 .dot.pass { background: var(--color-success); } .dot.pending { background: var(--color-notice); } .dot.fail { background: var(--color-danger); }
@@ -86,7 +86,7 @@ button.chip { border: 0; }
 .card-ready { color: var(--color-success); }
 .sub.next.idle { color: var(--muted); }
 .sub.refused { color: var(--color-danger); }
-.toast-stack { position: fixed; left: 50%; bottom: calc(var(--app-bottom, 0px) + 16px + env(safe-area-inset-bottom));
+.toast-stack { position: fixed; left: 50%; bottom: calc(var(--app-bottom, 0px) + 12px + env(safe-area-inset-bottom));
   width: min(520px, calc(100vw - 32px)); height: 0; transform: translateX(-50%); z-index: 25; pointer-events: none; }
 .toast-row { position: absolute; top: 0; left: 0; width: 100%; display: flex; justify-content: center;
   transition: transform 200ms ease; pointer-events: none; }
@@ -101,7 +101,7 @@ button.chip { border: 0; }
 .grid { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px; font-size: 13px; margin: 6px 0 10px; }
 .grid dt { color: var(--muted); }
 .grid dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
-/* A link row's labels open their cards, with room to tap (docs/adr/0156-a-follow-up-is-a-work-card-with-a-parent.md). */
+/* A link row's labels open their cards, with room to tap (docs/adr/2026-11-03-0526-a-follow-up-is-a-work-card-with-a-parent.md). */
 .grid dd a.card-link { display: inline-block; padding: 6px 4px; margin: -6px 0; text-decoration: underline; text-underline-offset: 2px; }
 .external-links-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 .grid .external-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 0; }
@@ -128,7 +128,7 @@ button.chip { border: 0; }
 .thread-more:active { background: var(--accent-soft); }
 .thread-more:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
 .thread-more .n { color: var(--muted); font-weight: 400; }
-/* ADR 0144: Done's and Asks' Show more, the thread's look as a row of the lane's list */
+/* [answered asks have their own section below Done, and Done and Asks show 10 cards at a time](docs/adr/2026-11-03-0259-answered-asks-have-their-own-section-below-done.md): Done's and Asks' Show more, the thread's look as a row of the lane's list */
 .list > .thread-more { width: 100%; margin: 0; border-top: 1px solid var(--line); border-radius: 0; }
 
 @media (max-width: 560px) {
@@ -140,23 +140,41 @@ button.chip { border: 0; }
 .calls ul { margin: 4px 0 8px; padding-left: 18px; font-size: 13px; }
 button.link { background: none; border: 0; color: var(--accent); padding: 8px 12px; font-size: 13px; cursor: pointer; }
 .wave-icon { display: inline-block; vertical-align: -2px; flex: none; }
-.wv-row { padding: 10px 12px; border-top: 1px solid var(--line); min-width: 0; cursor: pointer; }
-.wv-row:first-child { border-top: 0; }
-.wv-row.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
-.wv-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
-.wv-name { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; min-width: 0; padding: 0; border: 0; background: none;
-  font: inherit; font-weight: 600; color: var(--text); text-align: left; overflow-wrap: anywhere; cursor: pointer; }
-.wv-name .wave-icon { color: var(--color-quiet); }
-.wv-row.on .wv-name, .wv-row.on .wv-name .wave-icon { color: var(--accent); }
-.wv-id .muted { white-space: nowrap; }
-.wv-note { margin-top: 4px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
-.wv-note b { color: var(--text); font-weight: 600; }
-.wv-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 0; margin-top: 6px; font-size: 13px; }
 .wv-link { border: 0; background: none; padding: 0; min-height: 0; color: var(--accent); font: inherit; cursor: pointer; }
-.wv-end { margin-left: auto; padding-left: 8px; font-size: 13px; white-space: nowrap; }
+.wv-link:disabled { color: var(--muted); cursor: default; }
 .wv-busy { display: inline-flex; align-items: center; gap: 6px; color: var(--color-notice); }
-.wv-showing { margin-top: 14px; }
-.wv-all { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
+/* docs/adr/2026-11-03-1840-waves-are-bands-in-todo.md: each wave is a lane-style band inside Todo's list. */
+.wb + .wb, .wb-loose { border-top: 1px solid var(--line); }
+.wb-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 34px; padding: 5px 12px;
+  background: var(--band); font-size: 13px; font-weight: 500; cursor: pointer; user-select: none; }
+.wb-head:hover { background: color-mix(in srgb, var(--band), var(--text) 5%); }
+.wb-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.wb-head .wave-icon { color: var(--muted); }
+.wb-head .count { color: var(--muted); font-weight: 400; }
+.wb[data-open] > .wb-head { border-bottom: 1px solid var(--line); }
+.wb-label { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
+.wb-name { -webkit-touch-callout: none; }
+.wb-end { display: flex; align-items: baseline; gap: 10px; margin-left: auto; font-weight: 400; }
+.wb-links { display: inline-flex; align-items: baseline; white-space: nowrap; }
+.wb-next { color: var(--muted); white-space: nowrap; }
+.wb-head .wv-link { font-weight: 500; }
+.wb-pop { position: absolute; left: 34px; right: 12px; top: calc(100% - 2px); z-index: 6; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
+  background: var(--panel); box-shadow: 0 6px 18px rgba(0,0,0,.18); color: var(--text); font-weight: 400; line-height: 1.35; overflow-wrap: anywhere; cursor: default; }
+.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-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); }
+.wb .item, .wb .item > summary .title-wrap { position: relative; }
+.wb-dots[aria-expanded="true"] { color: var(--text); background: var(--chip); }
+.wb-dots svg { display: block; }
+.wb-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; display: grid; min-width: 160px; padding: 4px;
+  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
+.wb-menu button { border: 0; background: none; text-align: left; padding: 8px 10px; min-height: 0; border-radius: 6px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
+.wb-menu button:hover:not(:disabled) { background: var(--chip); }
+.wb-menu button:disabled { color: var(--muted); cursor: default; }
+.lane[data-lane="todo"] > .list:has(.wb) { overflow: visible; }
 .nav a.icon { display: inline-flex; align-items: center; padding: 4px; color: var(--muted); }
 .nav a.icon:hover { color: var(--text); }
 .refresh { display: inline-flex; align-items: center; gap: 2px; line-height: 1.3; min-width: 0; }
@@ -184,12 +202,20 @@ 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. */
+.dz { position: relative; clear: both; border-radius: 8px; }
+.dz > textarea { display: block; }
+.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; }
+[data-composer].dragging .dz-hint { display: flex; }
 .pending-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
 .pending-files:empty { display: none; }
 .pfile { position: relative; display: inline-flex; flex-direction: column; justify-content: center; width: 64px; height: 64px;
   border: 1px solid var(--line); border-radius: 8px; background: var(--chip); overflow: hidden; font-size: 11px; }
 .pfile img { width: 100%; height: 100%; object-fit: cover; }
-.pfile .pname { padding: 4px 6px; overflow-wrap: anywhere; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
+.pfile .pname { padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .pfile.uploading img, .pfile.uploading .pname { opacity: .55; }
 .pfile .pbar { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--panel) 70%, transparent); }
 .pfile .pbar span { display: block; height: 100%; border-radius: 2px; background: var(--color-info); transition: width .2s; }
@@ -202,7 +228,7 @@ code { overflow-wrap: anywhere; }
 .file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
 .file-link { display: inline-flex; align-items: center; max-width: 100%; padding: 3px 8px; border-radius: 6px; background: var(--chip);
   font-size: 13px; overflow-wrap: anywhere; }
-.file-link::before { content: "📎"; margin-right: 4px; }
+.file-link::before { content: "📎"; margin-right: 6px; }
 .msg .body:empty { display: none; }
 .note-tools { display: flex; align-items: flex-start; gap: 6px; }
 .note-tools .pending-files { flex: 1; margin-top: 4px; }
@@ -210,11 +236,13 @@ code { overflow-wrap: anywhere; }
 
 /* Compose button and sheet */
 main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
-.fab { position: fixed; z-index: 6; right: calc((16px + max(env(safe-area-inset-right), env(safe-area-inset-bottom))) * 2 / 3); bottom: calc(var(--app-bottom, 0px) + (16px + env(safe-area-inset-bottom)) * 2 / 3);
+/* The + sits two thirds of (16px + the safe area) from the corner, and at least 32px where there is no safe area. */
+:root { --fab-edge: max(32px, calc((16px + env(safe-area-inset-bottom)) * 2 / 3)); }
+.fab { position: fixed; z-index: 6; right: max(32px, calc((16px + max(env(safe-area-inset-right), env(safe-area-inset-bottom))) * 2 / 3)); bottom: calc(var(--app-bottom, 0px) + var(--fab-edge));
   width: 75px; height: 75px; padding: 0; border-radius: 50%; border: 0; background: var(--accent); color: var(--on-accent);
   display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
 .fab:active { transform: scale(.96); }
-.view-board .toast-stack { bottom: calc(var(--app-bottom, 0px) + 94px + env(safe-area-inset-bottom)); }
+.view-board .toast-stack { bottom: calc(var(--app-bottom, 0px) + 83px + var(--fab-edge)); }
 /* A phone sheet pads its content above the keyboard (--kb, dialogs.js fitSheet) and stays on the screen's bottom
    edge while the keyboard covers the bar: iOS reports its height late, so moving the sheet up leaves a strip below. */
 .sheet { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 560px;
@@ -282,19 +310,10 @@ main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
 .ask-actions .icon:disabled { opacity: .35; }
 .ask-actions .icon.bumped { color: var(--color-notice); opacity: 1; }
 .ask-actions .icon.bumped svg { fill: currentColor; }
-/* A tap's bump fades the icon's fill in, and an unbump fades it out, on a toast's timing, which app.js fadeBump sets as --bump-fade */
-.ask-actions .icon { --bump-fade: 0ms; }
-@keyframes bump-in { from { color: var(--muted); } }
-@keyframes bump-fill-in { from { fill: transparent; } }
-@keyframes bump-out { from { color: var(--color-notice); opacity: 1; } }
-@keyframes bump-fill-out { from { fill: var(--color-notice); } to { fill: transparent; } }
-.ask-actions .icon.bump-in { animation: bump-in var(--bump-fade) linear; }
-.ask-actions .icon.bump-in svg { animation: bump-fill-in var(--bump-fade) linear; }
-.ask-actions .icon.bump-out { animation: bump-out var(--bump-fade) linear; }
-.ask-actions .icon.bump-out svg { animation: bump-fill-out var(--bump-fade) linear; }
+.ask-actions .icon.owner-done { color: var(--color-notice); }
 /* A work card's empty bump icon always shows on touch screens; with a hover pointer it shows while the card is hovered or holds focus */
 @media (hover: hover) {
-  .item button[data-card-bump]:not(.bumped) { opacity: 0; }
+  .item button[data-card-bump]:not(.bumped, [aria-busy="true"]) { opacity: 0; }
   .item:hover button[data-card-bump]:not(.bumped), .item:focus-within button[data-card-bump]:not(.bumped) { opacity: 1; }
 }
 .working-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-notice); margin-right: 5px; vertical-align: 1px; }
@@ -311,23 +330,35 @@ button.attach:disabled { opacity: .35; }
 .line2.meta { justify-content: flex-start; margin-top: 4px; }
 .line3 { margin-top: 3px; }
 /* The active bar blinks its fill, not its opacity: an opacity animation gives it its own layer, which Safari can snap a
-   pixel off its siblings (docs/adr/0160-a-building-cards-phase-bars-end-its-time-row.md). */
+   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); }
-.phase-bars i.done, .phase-bars i.now { background: var(--color-notice); }
+/* 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. */
+.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 i.now { animation: pulse-fill 1.4s ease-in-out infinite; } }
+@media (prefers-reduced-motion: no-preference) { .phase-bars:not(.dim) 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). */
+button.sub.agent.stalled { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: none; text-align: left; color: var(--color-danger); }
+.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; }
-.sub .working { color: var(--color-notice); }
+/* The session's working line, "thinking", is the owner's blue with one font, size, weight and pulse on the card and in the thread. */
+.thinking { color: var(--accent); font-size: 12px; font-weight: 600; }
+.thinking .working-dot { background: currentColor; }
 .msg.link { padding: 0 10px; margin: 4px 0; font-size: 13px; }
 .msg.builder-status { padding: 0 10px; margin: 4px 0; font-size: 12px; color: var(--color-notice); overflow-wrap: anywhere; }
 .msg.builder-status .working-dot { animation: none; }
+.msg.request { padding: 0 10px; margin: 4px 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
 .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/0167-planners-and-implementers-are-two-kinds-of-agent.md). */
+   (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); }
 .planner .working-dot { background: currentColor; }
 .msg.calls { padding: 0 10px; margin: 4px 0; font-size: 12px; overflow-wrap: anywhere; }
@@ -335,7 +366,6 @@ button.attach:disabled { opacity: .35; }
 .msg.calls ol { margin: 4px 0; padding-left: 20px; }
 .agent-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; }
 /* INT-30: card line order */
-.line5.meta { justify-content: flex-start; margin-top: 4px; }
 .line6 { margin-top: 4px; }
 .card-time time { font-variant-numeric: tabular-nums; }
 .card-unread { color: var(--accent); font-weight: 600; }
@@ -350,7 +380,7 @@ button.attach:disabled { opacity: .35; }
 .lane[open] > summary { border-bottom: 0; border-radius: 10px 10px 0 0; }
 .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/0096-colour-says-whos-waiting.md) */
+/* 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; }
@@ -370,6 +400,15 @@ button.attach:disabled { opacity: .35; }
 .brand { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
 .brand :is(h1, h2) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .top .nav { flex: none; }
+/* The away moon right of the board title (docs/adr/2026-11-04-0226-the-hub-checks-every-minute-while-youre-here-and-every-5-when-away.md)
+   fades in and out with the toasts' timings (toasts.js). */
+.away-moon { flex: none; display: inline-flex; color: var(--muted); opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; }
+.away-moon.on { opacity: 1; visibility: visible; transition: opacity 150ms ease, visibility 0s; }
+.away-moon svg { display: block; }
+@media (prefers-reduced-motion: reduce) {
+  .away-moon { transition: opacity 100ms ease, visibility 0s linear 100ms; }
+  .away-moon.on { transition: opacity 80ms ease, visibility 0s; }
+}
 .lane-github { display: inline-flex; align-items: center; gap: 2px; }
 .lane-github .github { display: inline-flex; align-items: center; gap: 4px; }
 .lane-github .gh-mark { flex: none; }
@@ -391,7 +430,7 @@ button.attach:disabled { opacity: .35; }
 .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; }
-/* ADR 0125: the bulb sits between refresh and the gear, and glows orange while an architecture review runs */
+/* [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; }
@@ -409,11 +448,12 @@ button.attach:disabled { opacity: .35; }
 .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/0048-a-questions-takes-show-inline.md). The brand keeps that height when the rail hides the logo, so the
+   (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
    board's header and the sidebar's stay level. */
 .top { padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 4px; }
 .top .brand { gap: 4px; min-height: 44px; }
 .top .hub, .top .back { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin-left: -10px; border-radius: 10px; }
+.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.
@@ -427,7 +467,7 @@ main > * { transition: opacity .25s ease; }
 .item.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; }
-/* ADR 0040: the GitHub mark opens the Hub links sheet, with a red dot while a link is broken; a new board's setup checklist */
+/* [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 */
 .lane-github .gh-links { position: relative; display: inline-flex; align-items: center; padding: 4px; margin: -4px -2px -4px -4px; font-size: inherit; line-height: 1; color: inherit; }
 .lane-github .links-dot { position: absolute; top: 1px; right: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--color-danger); box-shadow: 0 0 0 1.5px var(--bg); }
 .hold-sheet .hold-lede { margin: 0 0 2px; font-size: 13.5px; line-height: 1.4; }
@@ -457,6 +497,15 @@ main > * { transition: opacity .25s ease; }
 .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; }
+/* 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; }
+.view-settings .toggle-spin { display: none; color: var(--muted); }
+.view-settings .toggle-slot:has(input.tap-waiting) .toggle-spin { display: inline-block; }
+.view-settings input.toggle.tap-waiting { opacity: 1; cursor: default; }
+.view-settings #permissions code { font-size: 11.5px; overflow-wrap: anywhere; }
+.view-settings #permissions .refused-note { color: var(--color-danger); }
 .view-settings .close-board-row { width: 100%; text-align: left; color: var(--color-danger); }
 .view-settings .repo-row { width: 100%; gap: 12px; text-align: left; }
 .view-settings .repo-row > :first-child { min-width: 0; overflow-wrap: anywhere; }
@@ -500,18 +549,9 @@ main > * { transition: opacity .25s ease; }
 .view-questions .bar #qstatus { min-width: 0; }
 .view-questions .bar #qstatus.sent { color: var(--color-success); font-weight: 600; }
 .view-questions .solo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0; }
-/* docs/adr/0111-a-prototype-round-ends-with-a-one-take-confirm.md */
+/* 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, .view-questions .q .chip .try-spin { width: 9px; height: 9px; margin-right: 5px; vertical-align: -1px; }
-/* A requested question: an accent tint and an accent border drawn inside the card, 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; }
-/* The source line is as tall as the state badge beside it, which a requested card leaves out. */
-.view-questions .q > .row:first-child > .muted { padding: 1px 0; }
-.view-questions .q.pr-busy textarea { opacity: .7; }
-.view-questions .q.pr-busy .proto-ask { color: var(--accent); }
-.view-questions .note-tools .chip { align-self: center; margin-top: 2px; }
+.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; }
@@ -587,7 +627,6 @@ main > * { transition: opacity .25s ease; }
 .view-frame > .frame-page { flex: 1 1 auto; display: block; width: 100%; min-height: 0; border: 0; background: var(--bg); }
 .view-frame .alone { white-space: nowrap; font-size: 13px; }
 
-.top .phone-logo { display: none; }
 @media (max-width: 899px) {
   :root:has(body > .top, body.has-sidebar > :not(.sidebar) > .top):not(.ps-embed) {
     --app-bottom: calc(49px + max(4px, env(safe-area-inset-bottom)));
@@ -596,7 +635,6 @@ main > * { transition: opacity .25s ease; }
     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 .phone-logo { display: inline-flex; margin-left: 0; }
   .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)); }
   .view-frame:not(.own-header) { padding-bottom: var(--app-bottom, 0px); }
@@ -618,15 +656,25 @@ main > * { transition: opacity .25s ease; }
 .settings-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 0 20px 16px; }
 .settings-body input { font-size: 16px; }
 .settings-footer { display: flex; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--line); }
-.settings-footer button[aria-busy="true"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
-.tk-saving, .lk-checking { display: inline-flex; align-items: center; gap: 6px; }
+.lk-checking { display: inline-flex; align-items: center; gap: 6px; }
 /* linear-key.js's modal over a page sits in .hub-view main only for hub.css's selectors. */
 .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). */
+.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; }
 .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); } }
@@ -646,6 +694,24 @@ main > * { transition: opacity .25s ease; }
 .try-spin { display: inline-block; width: 10px; height: 10px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: try-spin .8s linear infinite; flex: none; }
 @keyframes try-spin { to { transform: rotate(360deg); } }
 @media (prefers-reduced-motion: reduce) { .try-spin { animation: none; } }
+/* A pending control waits in one style (ui.js waitOn and BUSY, docs/adr/2026-11-03-1850-a-tap-waits-for-the-server-to-record-it.md,
+   docs/adr/2026-11-03-1915-every-pending-control-waits-in-one-style.md): a busy button keeps its own colours and width, disabled, and
+   its content gives way to a spinner in its text colour; the New version row's spinner sits in its pill; a bump icon keeps
+   its arrow and pulses orange until the card moves; a toggle, select or field keeps its face with a spinner beside it */
+button[aria-busy="true"], button[aria-busy="true"]:disabled, .ask-actions .icon[aria-busy="true"]:disabled { cursor: default; opacity: 1; }
+:is(button[aria-busy="true"]:not([data-card-bump], [data-bump], .sb-update-row), .sb-update-row[aria-busy="true"] .sb-go) { position: relative; -webkit-text-fill-color: transparent; }
+:is(button[aria-busy="true"]:not([data-card-bump], [data-bump], .sb-update-row), .sb-update-row[aria-busy="true"] .sb-go) > * { visibility: hidden; }
+:is(button[aria-busy="true"]:not([data-card-bump], [data-bump], .sb-update-row), .sb-update-row[aria-busy="true"] .sb-go)::after { content: ''; position: absolute; inset: 0; margin: auto;
+  width: 12px; height: 12px; box-sizing: border-box; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: try-spin .8s linear infinite; }
+@keyframes wait-orange { 50% { color: var(--color-notice); opacity: 1; } }
+button[aria-busy="true"]:is([data-card-bump], [data-bump]) { color: var(--muted); animation: wait-orange 1s ease-in-out infinite; }
+button[aria-busy="true"]:is([data-card-bump], [data-bump]) svg { fill: currentColor; }
+.try-spin.tap-beside { width: 12px; height: 12px; border-width: 2px; margin: 0 8px 0 auto; color: var(--muted); }
+.tk-field > span > .try-spin.tap-beside { margin: 0 0 0 6px; vertical-align: -2px; }
+@media (prefers-reduced-motion: reduce) {
+  :is(button[aria-busy="true"], .sb-update-row[aria-busy="true"] .sb-go)::after { animation: none; }
+  button[aria-busy="true"]:is([data-card-bump], [data-bump]) { animation: none; color: var(--color-notice); }
+}
 .install { display: inline-flex; align-items: center; gap: 4px; }
 .external-links .install.tone-ready { color: var(--color-success); }
 .external-links .install.tone-danger { color: var(--color-danger); }
@@ -654,12 +720,39 @@ main > * { transition: opacity .25s ease; }
 .tb-main > svg { flex: none; color: var(--muted); }
 .tb-main-text { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
 .tb-main .meta { justify-content: flex-end; margin-left: auto; }
+/* #60: Main's refresh icon right of its timestamp; a failed pull's reason shows on hover, or on a tap on touch */
+.tb-main .main-pull { position: relative; display: inline-flex; align-items: center; vertical-align: middle; margin-left: 6px; }
+.tb-main .gh-refresh { display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; padding: 2px 4px; color: var(--muted); min-width: 28px; min-height: 28px; }
+.tb-main .gh-refresh[aria-disabled="true"] { opacity: .45; cursor: default; }
+.tb-main .gh-refresh.failed { color: var(--color-danger); }
+.main-pull-why { position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; width: max-content; max-width: min(240px, calc(100vw - 32px)); padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font-size: 13px; line-height: 1.35; box-shadow: 0 6px 20px rgba(0,0,0,.25); visibility: hidden; pointer-events: none; }
+.main-pull-why.open { visibility: visible; }
+@media (hover: hover) { .main-pull:hover .main-pull-why { visibility: visible; } }
 .main-log-source { margin: 0 0 8px; overflow-wrap: anywhere; }
 .main-log-lines { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--chip); color: var(--text);
   font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; line-height: 1.5;
   max-height: calc(12 * 1.5 * 11.5px + 16px); white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto; }
 .main-log-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
 .main-log-actions button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 18px; }
-.main-log-actions .main-log-going { border-color: color-mix(in srgb, var(--color-notice) 45%, var(--line));
-  background: color-mix(in srgb, var(--color-notice) 12%, var(--panel)); color: var(--color-notice); cursor: default; opacity: 1; }
 #mainLogReason { color: var(--color-notice); overflow-wrap: anywhere; }
+
+/* The Auto Review lane (ui-cards.js reviewLane): its cards read like the board's, and Posted earlier's lines like a fold's. */
+.rv-card, .rv-line { border-top: 1px solid var(--line); }
+.rv-card:first-child, .rv-line:first-child { border-top: 0; }
+.rv-card > summary, .rv-line > summary { list-style: none; cursor: pointer; }
+.rv-card > summary::-webkit-details-marker, .rv-line > summary::-webkit-details-marker { display: none; }
+.rv-card > summary:hover, .rv-line > summary:hover { background: color-mix(in srgb, var(--chip) 60%, transparent); }
+.rv-card > summary { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; padding: 9px 12px; }
+.rv-card > summary .status { margin-top: 2px; }
+.rv-line > summary { padding: 8px 12px; font-size: 13px; }
+.status.rv-needs { border-color: var(--color-danger); background: var(--color-danger); }
+.rv-word.s-needs, .lane-github .rv-late { color: var(--color-danger); font-weight: 600; }
+.rv-detail { display: grid; gap: 10px; padding: 0 12px 12px 38px; font-size: 14px; min-width: 0; }
+.rv-line .rv-detail { padding-left: 12px; }
+.rv-detail p { margin: 0; }
+.rv-review { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 10px 12px; min-width: 0; overflow-wrap: anywhere; display: grid; gap: 8px; }
+.rv-review > * { margin: 0; }
+.rv-links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
+.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; }

package/board/public/toasts.js

@@ -1,5 +1,5 @@
 (function () {
-  // How long a toast fades in and out; the board's bump icon fades its fill on the same timing (app.js fadeBump).
+  // How long a toast fades in and out.
   const reduced = () => matchMedia('(prefers-reduced-motion: reduce)').matches;
   const enterTime = () => reduced() ? 80 : 150;
   const exitTime = () => reduced() ? 100 : 200;
@@ -177,5 +177,5 @@
     }
     return { toast, destroy };
   }
-  globalThis.BoardToasts = { create, enterTime, exitTime };
+  globalThis.BoardToasts = { create };
 })();