@lovek4d/kickflip 0.1.0 → 0.4.0

package/board/public/style.css

@@ -11,10 +11,10 @@ a:hover { text-decoration: underline; }
 button { font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--line); background: var(--panel);
   border-radius: 7px; padding: 6px 10px; }
 button:disabled { opacity: .5; cursor: default; }
-button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
+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 { 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; }
@@ -30,13 +30,13 @@ textarea:focus, input:focus { outline: 2px solid var(--accent-soft); border-colo
 .brand :is(h1, h2) { font-size: 16px; margin: 0; }
 .nav { display: flex; align-items: center; gap: 6px; }
 .pill { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--text); }
-.pill.hot { background: var(--accent); border-color: var(--accent); color: #fff; }
+.pill.hot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
 
 main { max-width: 860px; margin: 0 auto; padding: 12px 16px 80px; }
 
-.waiting { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
+.waiting { background: color-mix(in srgb, var(--color-notice) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--color-notice) 40%, var(--line));
   border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
-.waiting h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; color: var(--accent); }
+.waiting h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; color: var(--color-notice); }
 .waiting ul { margin: 0; padding-left: 18px; }
 .waiting li { margin: 3px 0; }
 .waiting li.prompt { list-style: none; margin: 6px 0 10px -18px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
@@ -72,19 +72,21 @@ 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. */
-.chip.unread { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
 .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); }
 
 .status { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--color-quiet); display: inline-block; position: relative; }
 .status.progress { border-color: var(--color-notice); background: conic-gradient(var(--color-notice) 0 50%, transparent 50% 100%); }
-.status.review { border-color: var(--color-success); background: conic-gradient(var(--color-success) 0 75%, transparent 75% 100%); }
-.status.todo { border-style: dashed; }
+.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-info); }
-.toast-stack { position: fixed; left: 50%; bottom: calc(var(--app-bottom, 0px) + 16px + env(safe-area-inset-bottom));
+.sub.next { color: var(--color-notice); }
+.card-hold, .card-blocked, .card-action { color: var(--color-notice); }
+.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) + 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; }
@@ -93,12 +95,14 @@ button.chip { border: 0; }
   box-shadow: 0 4px 16px rgba(0,0,0,.2); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
 .toast:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
 @media (prefers-reduced-motion: reduce) { .toast-row { transition: none; } }
-.status.done { border-color: var(--color-info); background: var(--color-info); }
+.status.done, .status.asks { border-color: var(--color-quiet); background: var(--color-quiet); }
 
 .detail { padding: 4px 12px 14px 38px; }
 .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/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; }
 .external-link { white-space: nowrap; }
@@ -113,7 +117,7 @@ button.chip { border: 0; }
 .thread { border-top: 1px dashed var(--line); padding-top: 8px; }
 .msg { margin: 8px 0; padding: 7px 10px; border-radius: 10px; max-width: 100%; }
 .msg.claude { background: var(--claude); }
-.msg.love { background: var(--love); }
+.msg.love { background: var(--accent-soft); }
 .msg .who { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
 .msg .body { white-space: pre-wrap; overflow-wrap: anywhere; }
 .msg .reply { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
@@ -124,6 +128,8 @@ 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; }
+/* [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) {
   .item > summary { grid-template-columns: 16px 1fr; }
@@ -133,19 +139,50 @@ 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; }
-.waves { display: grid; gap: 6px; margin-top: 4px; }
-.wave { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; background: var(--panel);
-  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; color: var(--text); }
-.wave.on { border-color: var(--accent); background: var(--accent-soft); }
-.wave-name { font-weight: 600; font-size: 13px; }
-.wave .bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
-.wave .bar span { display: block; height: 100%; background: var(--color-success); }
+.wave-icon { display: inline-block; vertical-align: -2px; flex: none; }
+.wv-link { border: 0; background: none; padding: 0; min-height: 0; color: var(--accent); font: inherit; cursor: pointer; }
+.wv-link:disabled { color: var(--muted); cursor: default; }
+.wv-busy { display: inline-flex; align-items: center; gap: 6px; color: var(--color-notice); }
+/* 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; }
 .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; }
 .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); }
@@ -165,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; }
@@ -183,19 +228,21 @@ 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; }
-.note-tools .attach { margin-left: auto; margin-top: 2px; }
+.note-tools .attach { margin-top: 2px; }
 
 /* Compose button and sheet */
-main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
-.fab { position: fixed; z-index: 6; right: calc(16px + env(safe-area-inset-right)); bottom: calc(var(--app-bottom, 0px) + 16px + env(safe-area-inset-bottom));
-  width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 0; background: var(--accent); color: #fff;
+main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
+/* 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) + 80px + 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;
@@ -235,22 +282,13 @@ main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
 @keyframes sheet-in { from { transform: translateY(100%); } }
 @keyframes sheet-out { to { transform: translateY(100%); } }
 @keyframes fade-in { from { opacity: 0; } }
-.confirm-sheet { position: fixed; inset: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none; border: 0;
-  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
-  gap: 8px; padding: 8px 8px calc(10px + env(safe-area-inset-bottom)); background: rgba(0,0,0,.4); animation: fade-in .18s ease-out; }
-.confirm-sheet .box { width: min(520px, 100%); background: var(--panel); border-radius: 14px; overflow: hidden; text-align: center;
-  box-shadow: 0 10px 40px rgba(0,0,0,.3); animation: sheet-in .22s ease-out; }
-.confirm-sheet p { margin: 0; padding: 14px 16px; font-size: 13.5px; line-height: 1.4; color: var(--muted); border-bottom: 1px solid var(--line); }
-.confirm-sheet button { display: block; width: 100%; border: 0; border-radius: 0; background: transparent; padding: 14px 6px; font-size: 17px; color: var(--accent); }
-.confirm-sheet .cancel { font-weight: 600; }
-.confirm-sheet::backdrop { background: transparent; }
 @media (min-width: 700px) {
   .sheet { bottom: calc(var(--kb, 0px) + 24px); max-height: calc(var(--vh, 100dvh) - env(safe-area-inset-top) - 12px); padding-bottom: 0;
     border-bottom: 1px solid var(--line); border-radius: 16px; }
   .sheet form { padding-bottom: 14px; }
 }
 @media (prefers-reduced-motion: reduce) {
-  .sheet[open], .sheet[open]::backdrop, .sheet.closing, .sheet.closing::backdrop, .confirm-sheet, .confirm-sheet .box { animation: none; }
+  .sheet[open], .sheet[open]::backdrop, .sheet.closing, .sheet.closing::backdrop { animation: none; }
   .fab:active { transform: none; }
 }
 /* The hub lives at the tailnet root, outside this site, so its link is root-absolute. */
@@ -270,6 +308,14 @@ main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
 .ask-actions { float: right; display: flex; gap: 2px; margin: -6px -6px 0 8px; }
 .ask-actions .icon { padding: 6px; color: var(--muted); }
 .ask-actions .icon:disabled { opacity: .35; }
+.ask-actions .icon.bumped { color: var(--color-notice); opacity: 1; }
+.ask-actions .icon.bumped svg { fill: currentColor; }
+.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, [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; }
 @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; }
@@ -283,18 +329,47 @@ button.attach:disabled { opacity: .35; }
 .line1 .chip { vertical-align: 1px; margin-right: 2px; }
 .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/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. */
+.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; } }
+/* 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/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; }
+.msg.calls summary { cursor: pointer; color: var(--muted); }
+.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; }
+.card-unread .sep { color: var(--muted); font-weight: 400; }
 /* Lane headers: Linear-style group bands */
 .lane > summary { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 34px; padding: 5px 12px;
   background: var(--band); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--text); }
@@ -305,6 +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/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; }
@@ -324,9 +400,21 @@ 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; }
+.lane-github:has(.remote) { min-width: 0; }
+.lane-github .remote { min-width: 0; }
+.lane-github .remote-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .lane-github .gh-refresh { font-size: 15px; line-height: 1; padding: 2px 4px; margin-right: -6px; color: var(--muted); }
 .lane-github .gh-refresh[aria-disabled="true"] { opacity: .35; cursor: default; }
 /* INT-44: both refreshes rest and spin while they fetch */
@@ -342,28 +430,48 @@ 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; }
+/* [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); }
+.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; } }
+.arch-body { display: grid; gap: 12px; padding-bottom: 6px; }
+.arch-body p { margin: 0; font-size: 13.5px; line-height: 1.45; }
+.arch-last { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 13.5px; }
+.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/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.
-   A changed card, or other changed line, gets a builder-orange border that fades once (app-snapshot.js flashChanged). */
+   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). */
 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 1; border-radius: 6px; }
-@keyframes snapshot-flash { from { box-shadow: inset 0 0 0 2px var(--color-notice); } to { box-shadow: inset 0 0 0 2px transparent; } }
+.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; }
+@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; }
+.hold-sheet .hub-view .dur-chips .btn { min-height: 44px; font-size: 15px; }
 .sheet .sheet-body { padding: 10px 16px max(12px, calc(env(safe-area-inset-bottom) - var(--app-bottom, 0px))); }
 .hub-links { list-style: none; margin: 0; padding: 0; }
 .hub-links li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); min-width: 0; }
@@ -378,7 +486,7 @@ main > * { transition: opacity .25s ease; }
 .setup-steps .dot { flex: none; }
 
 /* The board's other views (view-settings.js, view-questions.js, view-notes.js) each scope their rules by the class on their root. */
-.view-settings .set h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); margin: 18px 0 6px; }
+.view-settings .set h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 18px 0 6px; }
 .view-settings .who { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border: 1px solid var(--line);
   border-radius: 9px; margin: 6px 0; background: var(--panel); }
 .view-settings .who.gone { opacity: .5; text-decoration: line-through; }
@@ -389,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; }
@@ -398,7 +515,7 @@ main > * { transition: opacity .25s ease; }
 .view-settings .close-board-sheet h2 { color: var(--text); font-size: 18px; text-transform: none; letter-spacing: normal; }
 .view-settings .close-board-sheet input { display: block; width: 100%; margin-top: 8px; }
 .view-settings .close-board-sheet .danger { color: var(--color-danger); }
-.view-settings .close-board-warning:has(li) { border: 1px solid var(--color-notice); padding: 0 12px; border-radius: 10px; margin-bottom: 14px; }
+.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); }
 .view-questions .q h3 { font-size: 15px; margin: 6px 0 4px; line-height: 1.3; }
@@ -411,13 +528,13 @@ main > * { transition: opacity .25s ease; }
 .view-questions .opt .rec { color: var(--accent); font-weight: 500; font-size: 12px; margin-left: 4px; }
 .view-questions .opt .det { color: var(--muted); font-size: 13px; }
 .view-questions .note { margin-top: 4px; }
-.view-questions .ans { background: var(--love); border-radius: 9px; padding: 7px 10px; margin-top: 8px; font-size: 13px; }
+.view-questions .ans { background: var(--accent-soft); border-radius: 9px; padding: 7px 10px; margin-top: 8px; font-size: 13px; }
 .view-questions .rep { background: var(--claude); border-radius: 9px; padding: 7px 10px; margin-top: 6px; font-size: 13px; }
 .view-questions .q details { margin-top: 8px; }
 .view-questions .q details > summary { cursor: pointer; color: var(--muted); font-size: 13px; }
-.view-questions .topics { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; margin-bottom: 4px; }
-.view-questions .topics button { flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 13px;
-  background: var(--panel); color: var(--text); white-space: nowrap; }
+.view-questions .topics { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 8px; margin-bottom: 4px; }
+.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 .n { color: var(--muted); margin-left: 4px; }
 .view-questions .topichead { margin: 2px 0 6px; }
@@ -432,6 +549,12 @@ 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/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. */
@@ -484,7 +607,7 @@ main > * { transition: opacity .25s ease; }
 .view-notes .plan ul, .view-notes .plan ol { padding-left: 22px; }
 .view-notes .plan li { margin: 3px 0; }
 .view-notes .plan li.nested { margin-left: 20px; }
-.view-notes .plan code { font-size: 12.5px; background: var(--accent-soft); border-radius: 4px; padding: 0 3px; }
+.view-notes .plan code { font-size: 12.5px; background: var(--chip); border-radius: 4px; padding: 0 3px; }
 .view-notes .plan pre { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
 .view-notes .plan pre code { background: none; padding: 0; overflow-wrap: normal; }
 .view-notes .plan blockquote { border-left: 3px solid var(--line); padding-left: 10px; color: var(--muted); }
@@ -504,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)));
@@ -513,15 +635,13 @@ 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 { min-width: 44px; min-height: 44px; }
+  .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); }
   .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); }
   .sheet.keyboard-sheet:not(.kb)::after { height: 0; }
   .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)))); }
-  .confirm-sheet { padding-bottom: calc(10px + var(--app-bottom, 0px) + env(safe-area-inset-bottom)); }
 }
 
 .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));
@@ -536,11 +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); }
+.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); } }
@@ -560,11 +694,65 @@ 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); }
 .actions button[aria-disabled="true"] { opacity: .5; cursor: default; }
 .tb-main { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 13px; }
-.tb-main svg { flex: none; color: var(--muted); }
+.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; }
+#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,12 +1,14 @@
 (function () {
+  // 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;
+
   function create(root) {
     const stack = document.createElement('div');
     stack.setAttribute('class', 'toast-stack');
     stack.setAttribute('aria-label', 'Notifications');
     root.appendChild(stack);
-    const reduced = matchMedia('(prefers-reduced-motion: reduce)');
-    const enterTime = () => reduced.matches ? 80 : 150;
-    const exitTime = () => reduced.matches ? 100 : 200;
     let entries = [];
     let pending = [];
     let frame = 0;