@lovek4d/kickflip 0.3.1 → 0.5.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;
@@ -229,6 +257,10 @@ main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
 .sheet::backdrop { background: rgba(0,0,0,.35); touch-action: none; }
 /* A phone sheet sits above the bottom bar, which already pads the safe area (--app-bottom). */
 .sheet form { padding: 10px 16px max(12px, calc(env(safe-area-inset-bottom) - var(--app-bottom, 0px))); }
+/* Modals never scroll sideways: content wraps at the modal's width, and overflow-x hidden is only the last guard. */
+.sheet, .settings-modal { overflow-x: hidden; overflow-wrap: anywhere; }
+.settings-body { overflow-x: hidden; overflow-wrap: anywhere; }
+.sheet input, .sheet select, .sheet textarea, .settings-modal input, .settings-modal select, .settings-modal textarea { max-width: 100%; min-width: 0; }
 /* A sheet's last row of buttons stays in view at the foot of its scrolling content. Sticking stops at the scroll
    area's bottom padding, so the shadow covers what scrolls through that padding. */
 .sheet-actions { position: sticky; bottom: 0; z-index: 1; padding-top: 8px; background: var(--panel); box-shadow: 0 40px 0 var(--panel); }
@@ -282,19 +314,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,31 +334,75 @@ 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). */
+/* A status line that is a button is drawn as the div it replaces: this one reset, then only a colour per state. The font
+   shorthand stays out so .sub's 12px wins. */
+button.sub { display: block; width: 100%; margin-inline: 0; margin-bottom: 0; padding: 0; min-height: 0; border: 0; border-radius: 0; background: none;
+  font-family: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; text-align: left; appearance: none; -webkit-appearance: none; }
+button.sub.agent.stalled { color: var(--color-danger); }
+.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; }
+/* Every status line on an In Progress card is the phase-bar orange, a planner's too, and every build or plan line on a
+   Todo card the owner's blue, dot included; a Todo card's planner dashes are that blue, the running one pulsing
+   (docs/adr/2026-11-04-2300-each-lane-is-a-queue-for-the-orchestrator.md). */
+.sub.agent.in-progress { color: var(--color-notice); }
+.sub.agent.in-todo { color: var(--accent); }
+.sub.agent.in-progress .working-dot, .sub.agent.in-todo .working-dot { background: currentColor; }
+.phase-bars.plan { --bar-fill: var(--accent); }
+@keyframes pulse-fill-plan { 50% { background-color: color-mix(in srgb, var(--accent) 35%, transparent); } }
+@media (prefers-reduced-motion: no-preference) { .phase-bars.plan:not(.dim) i.now { animation-name: pulse-fill-plan; } }
 .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; }
+.msg.calls summary { cursor: pointer; color: var(--muted); list-style: none; }
+.msg.calls summary::-webkit-details-marker { display: none; }
+.msg.calls[open] summary .mark-icon { transform: rotate(90deg); }
+.msg.calls ol { margin: 4px 0; padding-left: 23px; }
 .agent-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; }
+/* Every thread status line's leading mark, icon or dot, sits centred in one 18px box, so the text after it always starts
+   at the same place; the box is 12px tall so line heights stay
+   (docs/adr/2026-11-04-2130-a-button-tap-is-a-status-line-or-a-message-footer.md). */
+.mark { display: inline-block; position: relative; width: 18px; height: 12px; margin-right: 5px; vertical-align: -1px; flex: none; }
+.mark > * { position: absolute; inset: 0; margin: auto; }
+.mark .working-dot, .mark .agent-dot { margin: auto; vertical-align: 0; }
+.mark-icon { width: 12px; height: 12px; }
+/* New questions' plain question mark is a size up from its siblings. */
+.mark-icon.big { width: 18px; height: 18px; }
+.msg.new-questions a { color: inherit; }
+/* A message's footer: the tap it came from, then Claude's pick-up to its right. */
+.msg .reply { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 2px; }
+.msg-foot .foot-status { display: inline-flex; align-items: center; }
+/* The thread's eye and fire are toggles: pressed reads as chosen, and the hint under the box says what Send posts. */
+form[data-reply] .tools { display: inline-flex; flex: none; }
+button.attach[aria-pressed="true"] { color: var(--accent); background: var(--chip); }
+.flag-hint { margin: 4px 2px 0; min-height: 1.2em; color: var(--muted); font-size: 12px; }
+.flag-hint.on { color: var(--accent); }
 /* INT-30: card line order */
-.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 +417,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 +437,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 +467,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 +485,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 +504,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 +534,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; }
@@ -478,6 +564,9 @@ main > * { transition: opacity .25s ease; }
 .view-questions .opt .lbl { font-weight: 600; }
 .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 .opt .suggested { margin-left: 6px; white-space: nowrap; }
+.view-questions .opt .suggested-why { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
+.view-questions .opt .suggested-why a { color: var(--accent); }
 .view-questions .note { margin-top: 4px; }
 .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; }
@@ -494,24 +583,30 @@ main > * { transition: opacity .25s ease; }
 .view-questions details.done button.ghost { font-size: 14px; text-align: left; padding: 6px 2px; }
 .view-questions details.done .trow button { min-width: 0; }
 .view-questions details.done .trow span { flex: none; }
+.view-questions details.resolved-group > summary { list-style: none; min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 12px 0; }
+.view-questions details.resolved-group > summary::-webkit-details-marker { display: none; }
+.view-questions details.resolved-group > summary .caret { transition: transform .15s; }
+.view-questions details.resolved-group[open] > summary .caret { transform: rotate(90deg); }
+.view-questions details.resolved-group > summary .names { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.view-questions .q.resolved button.chip { cursor: pointer; font: inherit; font-size: 12px; min-height: 28px; }
+.view-questions .q.resolved button.chip:disabled { cursor: default; }
+.view-questions .q.resolved .resolved-line { margin: 8px 0; }
+.view-questions .q.resolved .opt { cursor: default; }
+.view-questions .q.resolved .opt .det { display: none; }
+.view-questions .q.resolved .opt:has(input:checked) .det { display: block; }
+.view-questions .q.resolved .opt:not(:has(input:checked)) { opacity: .6; }
+.view-questions .q.resolved .reask-line { margin-top: 10px; }
 .view-questions .bar { position: sticky; bottom: var(--app-bottom, 0px); padding: 10px 0 max(10px, env(safe-area-inset-bottom)); background: var(--bg);
   display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--line); }
 .view-questions .bar .send-hint { margin-left: auto; }
+/* The + rides above the sticky Send bar rather than over its Send. */
+.view-questions:has(.bar) .fab { bottom: calc(var(--app-bottom, 0px) + var(--fab-edge) + 72px); }
 .view-questions .bar #qstatus { min-width: 0; }
 .view-questions .bar #qstatus.sent { color: var(--color-success); font-weight: 600; }
 .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 +682,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 +690,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 +711,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 +749,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 +775,72 @@ 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 reader sheet (app-reader.js): a builder's log or notes, 85% of the height from the bottom. Its body scrolls
+   down only: every line wraps (#252). */
+.reader-sheet { height: 85dvh; max-height: 85dvh; padding: 0; overflow: hidden; }
+.reader-sheet[open] { display: flex; flex-direction: column; }
+.reader-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); }
+.reader-head h2 { flex: none; margin: 0; font-size: 15px; }
+.reader-ref { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.reader-tools { flex: none; display: inline-flex; align-items: center; gap: 6px; }
+.reader-tools:empty { display: none; }
+.reader-tools button { height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; }
+.reader-tools button[aria-pressed="true"] { color: var(--accent); background: var(--chip); }
+.reader-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
+.reader-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
+.reader-status.on { color: var(--accent); }
+.reader-status.on::before { background: var(--accent); animation: reader-pulse 1.4s ease-in-out infinite; }
+@keyframes reader-pulse { 50% { opacity: .35; } }
+.reader-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 6px 0 max(12px, env(safe-area-inset-bottom)); }
+.reader-body > .muted { padding: 8px 14px; margin: 0; }
+.reader-row { padding: 5px 14px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
+.reader-row.text { padding-top: 9px; }
+.reader-row.end { margin: 6px 14px 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--chip); }
+.reader-row.sys, .reader-row.out { color: var(--muted); font-size: 12.5px; }
+.reader-row.out { padding-left: 28px; font: 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
+.reader-row.tool { font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
+.reader-tag { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px; background: var(--chip); color: var(--accent); font-size: 11px; }
+.reader-raw, .reader-text { margin: 0; padding: 2px 14px 8px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
+.reader-md { padding: 4px 16px 12px; overflow-wrap: anywhere; line-height: 1.5; }
+.reader-md h1 { font-size: 17px; margin: 10px 0 6px; }
+.reader-md h2, .reader-md h3 { font-size: 15px; }
+.reader-md pre, .reader-md code { white-space: pre-wrap; overflow-wrap: anywhere; }
+.reader-md table { display: block; max-width: 100%; overflow-x: hidden; }
+.reader-new { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); border: 0; border-radius: 999px; padding: 7px 14px; background: var(--accent); color: var(--on-accent); font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
+.reader-new[hidden] { display: none; }
+
+/* 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 };
 })();