@lovek4d/kickflip 0.4.0 → 0.5.3

package/board/public/style.css

@@ -163,6 +163,11 @@ button.link { background: none; border: 0; color: var(--accent); padding: 8px 12
 .wb-done { padding: 8px 12px; font-size: 12.5px; color: var(--muted); }
 .wb-done a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
 .wb-loosehead { cursor: default; }
+.wb-counts { position: relative; border: 0; background: none; padding: 4px 0; font: inherit; cursor: help; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.wb-tip { display: none; position: absolute; right: 0; top: 100%; z-index: 6; margin-top: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 6px 18px rgba(0,0,0,.18); color: var(--text); font-weight: 400; text-align: left; }
+.wb-counts:hover .wb-tip, .wb-counts.open .wb-tip { display: block; }
+.wb-counts .wv-cur { font-weight: 700; color: var(--accent); }
+.wb-lane + .wb-lane, .wb-lane + .wb-loose { border-top: 1px solid var(--line); }
 .wb-loosehead:hover { background: var(--band); }
 /* A wave card's step number, inside its id chip, and its ⋯ menu. */
 .wn { color: var(--muted); font-variant-numeric: tabular-nums; padding-right: 5px; margin-right: 4px; border-right: 1px solid var(--line); }
@@ -202,10 +207,12 @@ code { overflow-wrap: anywhere; }
 /* The ⌘↵ / Ctrl+↵ hint left of Send: only where there is a keyboard to press it on. */
 .send-hint { display: none; color: var(--muted); font-size: 12px; white-space: nowrap; }
 @media (hover: hover) and (pointer: fine) { .send-hint { display: inline; } }
-/* A composer's text box (BoardUI.dropZone): while files are dragged over the composer, attach.js marks it .dragging and
-   the box gets a dashed accent outline with Drop to attach over it. */
+/* A composer's text box (BoardUI.dropZone), its attach button inside at the bottom right with the text kept clear of it:
+   while files are dragged over the composer, attach.js marks it .dragging and the box gets a dashed accent outline
+   with Drop to attach over it. */
 .dz { position: relative; clear: both; border-radius: 8px; }
-.dz > textarea { display: block; }
+.dz > textarea { display: block; padding-bottom: 40px; }
+.dz > .attach { position: absolute; right: 6px; bottom: 6px; width: 32px; height: 32px; z-index: 1; }
 .dz-hint { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; border-radius: 8px; pointer-events: none;
   background: color-mix(in srgb, var(--panel) 80%, transparent); color: var(--accent); font-weight: 600; font-size: 15px; }
 [data-composer].dragging .dz { outline: 2px dashed var(--accent); outline-offset: 3px; }
@@ -232,7 +239,6 @@ code { overflow-wrap: anywhere; }
 .msg .body:empty { display: none; }
 .note-tools { display: flex; align-items: flex-start; gap: 6px; }
 .note-tools .pending-files { flex: 1; margin-top: 4px; }
-.note-tools .attach { margin-top: 2px; }
 
 /* Compose button and sheet */
 main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
@@ -257,6 +263,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); }
@@ -320,7 +330,19 @@ main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
 @media (prefers-reduced-motion: no-preference) { .working-dot { animation: pulse 1.4s ease-in-out infinite; } }
 form[data-reply] .row .quick { margin-left: auto; margin-right: 6px; }
 form[data-reply] .row [data-confirm="finish"] { margin-right: 6px; }
-.q .proto { display: inline-block; margin: 0 0 8px; }
+/* A composer's send buttons (ui.js sendButton), each with its key as a small gray hint where there is a keyboard and
+   room. A pair takes a row of two halves; a Todo card's reply box wraps its pair under the row. */
+.send-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
+.send-actions button, [data-sends] button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
+.send-actions button { min-height: 44px; }
+form[data-reply] .row { flex-wrap: wrap; }
+form[data-reply] .row > .send-actions { flex: 0 0 100%; margin-top: 4px; }
+.key-hint { display: none; font-size: 11px; font-weight: 400; color: var(--muted); white-space: nowrap; }
+button.primary .key-hint { color: color-mix(in srgb, var(--on-accent) 62%, transparent); }
+@media (hover: hover) and (pointer: fine) and (min-width: 600px) { .key-hint { display: inline; } }
+#askStatus { margin: 6px 2px 0; }
+#askStatus:empty { display: none; }
+.q .proto-view { display: inline-block; margin: 0 0 10px; color: var(--accent); }
 .msg .ask-actions { margin: -4px -6px 0 8px; }
 button.attach { border: 0; background: transparent; padding: 0; }
 button.attach:disabled { opacity: .35; }
@@ -343,7 +365,18 @@ button.attach:disabled { opacity: .35; }
 @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); }
+/* 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. It sets no width: a button is its own block formatting context, so a full-width one
+   drops below the bump icons' float instead of sitting beside it as the div's line box does (board/layout.test.mjs). */
+button.sub { display: block; margin-inline: 0; margin-bottom: 0; padding: 0; min-height: 0; border: 0; border-radius: 0; background: none;
+  font-family: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; text-align: left; appearance: none; -webkit-appearance: none; }
+button.sub.agent.stalled { color: var(--color-danger); }
+/* A tap on it calms the line to the in-progress orange, its dot sending a ripple, until the card's next status line (app-cards.js nudge). */
+button.sub.agent.stalled.nudging { color: var(--color-notice); cursor: default; }
+.nudging .working-dot { position: relative; }
+.nudging .working-dot::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; }
+@keyframes nudge-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
+@media (prefers-reduced-motion: no-preference) { .nudging .working-dot::after { animation: nudge-ping 1.1s ease-out infinite; } }
 .stalled .working-dot { background: currentColor; }
 .brand { display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; }
 .brand .hub { grid-row: 1 / span 2; align-self: center; }
@@ -361,10 +394,40 @@ button.sub.agent.stalled { display: block; width: 100%; padding: 0; border: 0; b
    (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; }
+/* docs/adr/2026-11-05-0410-a-card-status-word-comes-from-a-signal-the-board-checks.md: a quiet builder and a request no planner
+   has picked up are grey, after the lane colours so they win. */
+.sub.agent.quiet, .sub.asked { color: var(--muted); }
+.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); }
 /* INT-30: card line order */
 .line6 { margin-top: 4px; }
 .card-time time { font-variant-numeric: tabular-nums; }
@@ -383,6 +446,13 @@ button.sub.agent.stalled { display: block; width: 100%; padding: 0; border: 0; b
 /* 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; }
+/* A board shared with someone else, view only (docs/adr/2026-11-05-2215-a-board-is-shared-view-only-with-a-tailscale-login.md):
+   shell.js marks the page .shared-view, which hides the +, every composer, Board settings, the architecture review and
+   a card's buttons, keeping its links (Visit, Notes, Open questions). */
+.shared-view #compose, .shared-view [data-composer], .shared-view #settingsLink, .shared-view #archBulb,
+.shared-view .actions button, .shared-view button[data-confirm] { display: none !important; }
+.view-only-strip { margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 13px; }
+.view-only-strip b { color: var(--accent); }
 .view-board.offline main > * { opacity: .72; }
 .view-board.offline main, .view-board.offline > .top > :not(.nav), .view-board.offline > .top .nav > :not(.refresh) { pointer-events: none; }
 /* INT-28: answer banner */
@@ -493,6 +563,17 @@ main > * { transition: opacity .25s ease; }
 .view-settings .who.new { border-color: var(--accent); }
 .view-settings .add { display: flex; gap: 6px; margin-top: 8px; }
 .view-settings .add input { flex: 1; min-width: 0; }
+.view-settings .add.pick { flex-wrap: wrap; }
+.view-settings .share-now { color: var(--ok); font-weight: 600; }
+.view-settings .share-now::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
+.view-settings .share-reach { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }
+.view-settings .share-reach p { flex: 1 1 220px; margin: 0; }
+.view-settings .share-reach button { flex: none; }
+.view-settings .pick-col { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
+.view-settings .pick-list { max-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
+.view-settings .pick-list button { text-align: left; }
+.view-settings .pick-list button[aria-pressed="true"] { border-color: var(--accent); }
+.view-settings .who .sub { display: block; margin-top: 2px; }
 .view-settings .replies .reply { margin-top: 8px; }
 .view-settings label.who { gap: 12px; cursor: pointer; }
 .view-settings label.who .sub { display: block; margin-top: 2px; }
@@ -527,6 +608,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; }
@@ -536,6 +620,8 @@ main > * { transition: opacity .25s ease; }
 .view-questions .topics button { min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 13px;
   background: var(--panel); color: var(--text); white-space: normal; text-align: left; overflow-wrap: anywhere; }
 .view-questions .topics button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
+@keyframes pill-arrive { from { opacity: 0; transform: translateX(-12px); box-shadow: 0 0 0 3px var(--accent); } to { opacity: 1; transform: none; box-shadow: 0 0 0 0 transparent; } }
+@media (prefers-reduced-motion: no-preference) { .view-questions .topics button.arrived { animation: pill-arrive .6s ease-out; } }
 .view-questions .topics .n { color: var(--muted); margin-left: 4px; }
 .view-questions .topichead { margin: 2px 0 6px; }
 .view-questions details.done > summary { cursor: pointer; color: var(--muted); font-size: 13px; margin: 16px 0 4px; }
@@ -543,41 +629,41 @@ 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 .bar #qstatus { min-width: 0; }
+/* Typing with the keyboard up: one compact row docked on the keyboard, and the + out of the way (view-questions.js dock). */
+.view-questions.kb-up .bar { position: fixed; left: 0; right: 0; bottom: var(--kb, 0px); z-index: 7; padding: 6px 16px; box-shadow: 0 -6px 14px rgba(0,0,0,.12); }
+.view-questions.kb-up .bar .send-hint { display: none; }
 .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. */
+/* A question's drawn takes sit in as many columns as keep each at least 380px wide, one on a phone; each its option above
+   its diagram, and each row's takes top-aligned. */
 .view-questions .takes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 10px; align-items: start; margin: 6px 0; }
 .view-questions .take { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: 10px; }
 .view-questions .take:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
 .view-questions .take .opt, .view-questions .take .opt:has(input:checked) { border: 0; padding: 0; margin: 0; background: none; }
-/* view-questions.js sets a frame's height to its page's once measured; until then it shows nothing, so a take that turns
-   its question into the full-width layout never flashes cut off. */
-.view-questions .take-shot { position: relative; display: block; margin-top: 8px; height: 360px; border: 1px solid var(--line); border-radius: 10px;
-  overflow: hidden; transition: height .15s ease; }
-.view-questions .take-shot iframe { width: 100%; height: 100%; border: 0; background: var(--bg); }
-.view-questions .take-shot.measuring { transition: none; }
-.view-questions .take-shot.measuring iframe { visibility: hidden; }
-.view-questions .take-shot.measuring::before { content: 'Loading take…'; position: absolute; inset: 0; display: grid; place-items: center;
-  color: var(--muted); font-size: 12.5px; }
-.view-questions:has(.takes-full) main { max-width: none; }
-.view-questions .takes-full { grid-template-columns: minmax(0, 1fr); }
-.view-questions .take-choices { display: flex; flex-wrap: wrap; gap: 8px; }
-.view-questions .take-choices .opt { flex: 1 1 160px; margin: 0; }
-.view-questions .take-choices .opt[aria-current="true"] { border-color: var(--accent); }
-.view-questions .takes-full .take { padding: 0; border: 0; }
-.view-questions .takes-full .take-shot { margin-top: 0; transition: none; }
 
 /* A take with nothing to see: boxes and arrows, then what it means in practice. */
 .view-questions .flow { margin: 10px 0 4px; }
@@ -628,7 +714,7 @@ main > * { transition: opacity .25s ease; }
 .view-frame .alone { white-space: nowrap; font-size: 13px; }
 
 @media (max-width: 899px) {
-  :root:has(body > .top, body.has-sidebar > :not(.sidebar) > .top):not(.ps-embed) {
+  :root:has(body > .top, body.has-sidebar > :not(.sidebar) > .top) {
     --app-bottom: calc(49px + max(4px, env(safe-area-inset-bottom)));
   }
   body > .top, body.has-sidebar > :not(.sidebar) > .top {
@@ -636,7 +722,7 @@ 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 .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)); }
+  body > main, body.has-sidebar > :not(.sidebar) > main, body.has-sidebar > :not(.sidebar) > .split > main { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: calc(96px + var(--app-bottom, 0px) + env(safe-area-inset-bottom)); }
   .view-frame:not(.own-header) { padding-bottom: var(--app-bottom, 0px); }
   .sheet { bottom: max(0px, calc(var(--app-bottom, 0px) - var(--kb, 0px)));
     max-height: calc(var(--vh, 100dvh) + var(--kb, 0px) - max(var(--app-bottom, 0px), var(--kb, 0px)) - env(safe-area-inset-top) - 12px); }
@@ -661,21 +747,18 @@ main > * { transition: opacity .25s ease; }
 .lk-over, .lk-over > main { display: contents; }
 
 .tk-section { margin: 10px 0; }
-/* The Tickets source row's live state, and Hub's key field opened under it (dialogs.js ticketsControl keyState). */
+/* The Tickets source row's live state (dialogs.js ticketsControl keyState). */
 .tk-status { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
 .tk-status b { font-weight: 600; color: var(--text); }
 .tk-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
 .tk-status.on .dot { background: var(--accent); }
 .tk-status.on b { color: var(--accent); }
-.tk-inline { margin: 6px 0 10px; border: 1px solid var(--accent); border-radius: 10px; padding: 8px 10px; background: var(--accent-soft); }
-.tk-inline .tk-ask { margin: 2px 0 6px; font-size: 13px; }
-.tk-inline .hub-view main { padding: 0; }
 .tk-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 8px 0; border: 1px solid var(--line); border-radius: 9px; background: var(--chip); }
 .tk-seg button { min-width: 0; min-height: 44px; padding: 6px 4px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
 .tk-seg button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
-.ask-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 0 0; }
-.ask-choice-help { margin: 4px 2px 0; }
 .tk-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
+.landing-seg button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; text-align: center; }
+.landing-seg .sub { font-weight: 400; opacity: .8; line-height: 1.25; }
 .tk-grid { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
 @media (min-width: 560px) { .tk-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
 .tk-field { display: block; min-width: 0; }
@@ -735,6 +818,39 @@ button[aria-busy="true"]:is([data-card-bump], [data-bump]) svg { fill: currentCo
 .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 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); }
@@ -756,3 +872,46 @@ button[aria-busy="true"]:is([data-card-bump], [data-bump]) svg { fill: currentCo
 .rv-links a { color: var(--accent); text-decoration: none; }
 .rv-acts { display: flex; flex-wrap: wrap; gap: 8px; }
 .view-questions .bar #qstatus .try-spin { color: var(--accent); margin-right: 6px; }
+
+/* Needs you (app-needs.js): a deck at the top of the board on a phone; from 900px a pane beside the lanes, its lines over
+   Waiting on you (docs/adr/2026-11-05-0408-needs-you-is-a-deck-on-a-phone-and-a-pane-on-a-desktop.md). */
+.needs-pane { display: none; }
+.needs-deck { margin: 0 0 12px; border: 1px solid color-mix(in srgb, var(--color-notice) 45%, var(--line)); border-radius: 14px;
+  background: color-mix(in srgb, var(--color-notice) 7%, var(--panel)); overflow: hidden; }
+.deck-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px 4px; }
+.deck-head h2 { margin: 0; flex: 1; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-notice); }
+.deck-n { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--color-notice); color: #1c1407; font-size: 12px; font-weight: 700; text-align: center; }
+.deck-card { padding: 2px 14px 12px; min-width: 0; overflow-wrap: anywhere; }
+.deck-what { margin: 0 0 2px; font-size: 12px; color: var(--muted); }
+.deck-card h3 { margin: 0 0 4px; font-size: 15px; line-height: 1.3; }
+.deck-card h3 a { color: inherit; text-decoration: none; }
+.deck-card .ctx { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
+.deck-proto { margin: 0 0 10px; color: var(--accent); }
+.deck-opts { display: flex; flex-direction: column; gap: 6px; }
+.deck-opts button { text-align: left; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
+.deck-opts button.rec { border-color: var(--accent); }
+.deck-opts .rec-word { color: var(--accent); font-weight: 500; font-size: 12px; margin-left: 4px; }
+.deck-opts small { display: block; color: var(--muted); font-size: 12.5px; }
+.deck-prompt { margin: 0; padding: 0; list-style: none; }
+.deck-prompt li.prompt { padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
+.deck-acts { display: flex; flex-wrap: wrap; gap: 8px; }
+.deck-bar { display: flex; align-items: center; gap: 10px; padding: 0 14px 10px; }
+.deck-dots { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; }
+.deck-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
+.deck-dots i.on { background: var(--color-notice); }
+.deck-bar button { border-radius: 999px; padding: 5px 12px; font-size: 13px; }
+.deck-more { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 10px 14px; border-top: 1px solid color-mix(in srgb, var(--color-notice) 28%, var(--line));
+  background: color-mix(in srgb, var(--color-notice) 14%, var(--panel)); color: var(--text); font-weight: 600; font-size: 14px; text-decoration: none; }
+.deck-more::after { content: '›'; color: var(--accent); font-size: 18px; }
+@media (min-width: 900px) {
+  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
+  .split > main { max-width: none; margin: 0; }
+  .needs-deck { display: none; }
+  /* The board's + sits at the bottom right of the left pane: the pane ends at the middle of the space right of the sidebar. */
+  .view-board .fab { right: calc(50% - var(--sidebar-w, 0px) / 2 + var(--fab-edge)); }
+  body.has-sidebar { --sidebar-w: 272px; }
+  html.sb-collapsed body.has-sidebar { --sidebar-w: 0px; }
+  .needs-pane { display: block; position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 24px; border-left: 1px solid var(--line); }
+  .needs-pane .needs-questions main { padding: 0; max-width: none; }
+  .needs-pane .waiting { margin: 0 0 12px; }
+}