@lovek4d/kickflip 0.1.0 → 0.3.1

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, 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; }
@@ -74,16 +74,18 @@ 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); }
 /* 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); }
+.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) + 16px + 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;
@@ -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/0156-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; }
+/* ADR 0144: 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,32 @@ 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-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-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; }
 .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); }
@@ -187,15 +206,15 @@ 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-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)); }
+.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);
+  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) + 94px + env(safe-area-inset-bottom)); }
 /* 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 +254,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 +280,23 @@ 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; }
+/* 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; }
+/* 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: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,6 +310,13 @@ 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/0160-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); }
+@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; } }
 .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); }
@@ -292,9 +326,20 @@ button.attach:disabled { opacity: .35; }
 .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). */
+.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 +350,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) */
 /* INT-35: offline header */
 .view-board.offline #compose { display: none; }
 .view-board.offline main > * { opacity: .72; }
@@ -327,6 +373,9 @@ button.attach:disabled { opacity: .35; }
 .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,6 +391,20 @@ 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 */
+.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; }
@@ -354,16 +417,21 @@ button.attach:disabled { opacity: .35; }
 .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 */
 .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 +446,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; }
@@ -398,7 +466,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 +479,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 +500,21 @@ 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 */
+.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 .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 +567,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); }
@@ -514,14 +597,13 @@ main > * { transition: opacity .25s ease; }
     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,6 +618,10 @@ 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; }
+/* 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; }
 .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); }
@@ -565,6 +651,15 @@ main > * { transition: opacity .25s ease; }
 .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; }
+.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; }

package/board/public/toasts.js

@@ -1,12 +1,14 @@
 (function () {
+  // How long a toast fades in and out; the board's bump icon fades its fill on the same timing (app.js fadeBump).
+  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;
@@ -175,5 +177,5 @@
     }
     return { toast, destroy };
   }
-  globalThis.BoardToasts = { create };
+  globalThis.BoardToasts = { create, enterTime, exitTime };
 })();