atris 3.74.4 → 3.74.6

package/lib/gm-phone-page.js

@@ -71,19 +71,38 @@ button { font: inherit; color: inherit; background: none; border: 0; padding: 0;
 .line.out { opacity: 0; }
 .line.bad { color: var(--text-2); }
 .foot { position: absolute; left: 0; right: 0; bottom: max(20px, env(safe-area-inset-bottom)); text-align: center; }
+/* the yeses still waiting: a small line beside the team, never a card on its own */
+#needs { margin-right: 20px; color: var(--amber); }
 .quiet { color: var(--text-2); font-size: 17px; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.25em; min-height: 44px; }
-/* the team: one row per member, who, what, the status, and the time */
-.team { position: fixed; inset: 0; z-index: 20; overflow-y: auto; background: var(--bg); padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); }
-.team .inner { max-width: 34rem; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
-.team .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
-.team h1 { margin: 0; font-size: clamp(23px, 6.2vw, 30px); line-height: 1.12; font-weight: 700; letter-spacing: -0.03em; }
-.team .row { width: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); }
-.team .who { font-size: 20px; font-weight: 700; }
-.team .st { font-size: 17px; color: var(--text-2); text-align: right; }
-.team .st.working { color: var(--text); }
-.team .st.waiting-for-your-yes { color: var(--amber); }
-.team .on { grid-column: 1 / -1; font-size: 18px; line-height: 1.35; }
-.team .time { grid-column: 1 / -1; font-size: 17px; color: var(--text-2); }
+/* a card with a table (the team, one job) is wider, and at phone width the
+   table scrolls sideways with the name column held in place; a line between
+   every column and every row, and no column narrower than its words */
+body.wide .screen { max-width: 64rem; }
+.grid { margin: 14px 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border: 1px solid var(--line); border-radius: 14px; }
+.bet table { width: 100%; min-width: 44rem; border-collapse: separate; border-spacing: 0; font-size: 17px; line-height: 1.35; }
+.bet table.k-deck { min-width: 56rem; }
+.bet th, .bet td { padding: 10px 14px; text-align: left; vertical-align: top; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
+.bet th:last-child, .bet td:last-child { border-right: 0; }
+.bet tbody tr:last-child td { border-bottom: 0; }
+.bet th { color: var(--text-2); font-weight: 400; white-space: nowrap; }
+.bet tr.row { cursor: pointer; }
+@media (hover: hover) { .bet tr.row:hover td { background: #1c1816; } }
+.bet td.member { position: sticky; left: 0; z-index: 1; background: var(--bg); white-space: nowrap; }
+.bet td.member button { font-size: 18px; font-weight: 700; text-align: left; min-height: 32px; }
+.bet td.role { min-width: 9rem; color: var(--text-2); }
+.bet td.ovr { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
+.bet td.engine, .bet td.done { white-space: nowrap; }
+.bet td.engine button { text-align: left; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.25em; min-height: 32px; }
+.bet td.status { min-width: 16rem; color: var(--text-2); }
+.bet td.status.working { color: var(--text); }
+.bet td.status.waiting-for-your-yes, .bet td.status.needs-you { color: var(--amber); }
+.bet td.work { min-width: 14rem; }
+/* a job deck card: its place in the deck and its status above the title */
+.bet .count, .bet .label, .bet .time { display: block; font-size: 17px; color: var(--text-2); }
+.bet .label.needs-you { color: var(--amber); }
+.bet .time { margin: 10px 0 0; }
+.jobline { margin: 10px 0 0; color: var(--text-2); font-size: 17px; }
+.thread { margin: 12px 0 0; }
 .sayline { margin: 10px 0 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
 .sayline .thread, .sayline .reply { width: 100%; text-align: left; margin: 0; }
 .unsent { margin: 0; text-align: center; }
@@ -129,6 +148,10 @@ body.has-card .foot { position: static; margin-top: 28px; }
 .bet { width: 100%; opacity: 0; transform: translateY(20px); transition: opacity 0.45s ease-out, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
 .bet.up { opacity: 1; transform: none; }
 .bet.quick { transition-duration: 0.4s, 0.5s; }
+/* after an act the next card fades up as the sphere settles, so the whole motion is about a
+   second, and its title drifts only a few pixels into the spot the last title had */
+.bet.acted { transform: translateY(4px); transition-duration: 0.28s, 0.36s; }
+.bet.acted.up { transform: none; }
 /* card to card: a crossfade in place. the old card is a still copy that
    fades over the box while the new card fades in under it from a small
    drift, its title landing where the old title was; the box eases to the
@@ -193,7 +216,7 @@ body.has-card .foot { position: static; margin-top: 28px; }
   </div>
   <p class="line" id="line" aria-live="polite">tap to think</p>
   <article class="bet" id="bet" hidden></article>
-  <div class="foot" id="foot"><button type="button" class="quiet" id="working" aria-haspopup="dialog">the team</button></div>
+  <div class="foot" id="foot"><button type="button" class="quiet" id="needs" hidden></button><button type="button" class="quiet" id="working">the team</button></div>
 </main>
 <div class="lava" id="lava" role="button" tabindex="-1" aria-label="the atris orb. tap to go back to the big orb">
   <div class="tx" style-vars="15%,8.4s,-2.1s"><div class="ty" style-vars="12%,10.1s,-5.1s"><div class="blob b1" spin-vars="36s,0deg"></div></div></div>
@@ -202,7 +225,6 @@ body.has-card .foot { position: static; margin-top: 28px; }
   <div class="core" id="lava-core"></div>
   <div class="dim" id="lava-dim"></div>
 </div>
-<section class="team" id="team" hidden role="dialog" aria-label="the team"><div class="inner" id="team-inner"></div></section>
 <script nonce="${nonce}">
 (function () {
   var token = new URLSearchParams(location.search).get('t') || '';
@@ -223,7 +245,15 @@ body.has-card .foot { position: static; margin-top: 28px; }
       opts.body = JSON.stringify(body);
     }
     return fetch(path + (body ? '' : '?t=' + encodeURIComponent(token)), opts)
-      .then(function (r) { return r.json().catch(function () { return { ok: false }; }).then(function (j) { j.http = r.status; return j; }); });
+      .then(function (r) { return r.json().catch(function () { return { ok: false }; }).then(function (j) { j.http = r.status; if (typeof j.needs_you === 'number') drawNeeds(j.needs_you); return j; }); });
+  }
+
+  // The yeses still waiting past the card on screen: one small line, and a
+  // tap opens the job deck with the ones that need the owner first.
+  function drawNeeds(n) {
+    var btn = document.getElementById('needs');
+    btn.hidden = !n;
+    btn.textContent = n ? (n === 1 ? '1 needs you' : n + ' need you') : '';
   }
 
   // ---- the one line under the orb: fades out, changes, fades in ------------------
@@ -274,6 +304,11 @@ body.has-card .foot { position: static; margin-top: 28px; }
     // the fast reveal stays contained: the lava grows to BLOOM of the smaller
     // window side and never washes the page
     var FAST_GROW_MS = 460, FAST_SETTLE_MS = 440, BLOOM = 0.72;
+    // the owner acted on a card: one motion of about a second when the answer
+    // is in. The card fades while the small orb glides into the sphere, the
+    // dots spiral in at ACT_PACE, and the next card blooms where they land.
+    var ACT_LEAVE_MS = 160, ACT_GLIDE_MS = 180, ACT_BEAT_MS = 100, ACT_PACE = 0.24, ACT_GROW_MS = 180, ACT_SETTLE_MS = 260;
+    var quick = false;
     // Two speeds, chosen by truth. A bet already waiting in the queue plays
     // the same curves at FAST of their length (tap to card in about two seconds, unhurried).
     // A bet still being made plays the full landing length, and the spiral
@@ -463,8 +498,8 @@ body.has-card .foot { position: static; margin-top: 28px; }
     function grow() {
       var rect = canvas.getBoundingClientRect();
       var contained = pace < 1;
-      var growMs = contained ? FAST_GROW_MS : (GROW_MS * pace);
-      var settleMs = contained ? FAST_SETTLE_MS : (SETTLE_MS * pace);
+      var growMs = quick ? ACT_GROW_MS : contained ? FAST_GROW_MS : (GROW_MS * pace);
+      var settleMs = quick ? ACT_SETTLE_MS : contained ? FAST_SETTLE_MS : (SETTLE_MS * pace);
       var vx = rect.left + cx, vy = rect.top + cy;
       var reach = contained
         ? BLOOM * Math.min(window.innerWidth, window.innerHeight) / 2
@@ -536,7 +571,9 @@ body.has-card .foot { position: static; margin-top: 28px; }
     // swap() takes the card off the page once it has faded. At the centre the
     // lava melts and the sphere grows back out of the point, holds for a
     // beat so it reads, then calls back. Reduced motion: no travel.
-    function melt(cb, to, swap) {
+    // fast: the owner acted, so the glide is the short one
+    function melt(cb, to, swap, fast) {
+      var leaveMs = fast ? ACT_LEAVE_MS : LEAVE_MS, glideMs = fast ? ACT_GLIDE_MS : GLIDE_MS, beatMs = fast ? ACT_BEAT_MS : BEAT_MS;
       lava.classList.remove('tap', 'alive');
       lava.tabIndex = -1;
       var swapped = false;
@@ -553,7 +590,7 @@ body.has-card .foot { position: static; margin-top: 28px; }
         mode = 'idle';
         bridgeAt = reduced ? 0 : performance.now();
         start();
-        setTimeout(cb, reduced ? 0 : BEAT_MS);
+        setTimeout(cb, reduced ? 0 : beatMs);
       };
       if (reduced || lava.style.visibility !== 'visible') { reform(); return; }
       var r = lava.getBoundingClientRect();
@@ -564,9 +601,9 @@ body.has-card .foot { position: static; margin-top: 28px; }
       var sEnd = 30 / base;
       var t0 = performance.now();
       var step = function (now) {
-        var k = Math.min(1, (now - t0) / GLIDE_MS);
+        var k = Math.min(1, (now - t0) / glideMs);
         var t = ease(k);
-        if (now - t0 >= LEAVE_MS) takeOff();
+        if (now - t0 >= leaveMs) takeOff();
         place(from.s + (sEnd - from.s) * t, from.x + (to.x - from.x) * t, from.y + (to.y - from.y) * t);
         core.style.opacity = String(smooth(0.3, 0.9, k));
         lava.style.opacity = String(1 - smooth(0.7, 1, k));
@@ -612,11 +649,14 @@ body.has-card .foot { position: static; margin-top: 28px; }
 
     return {
       // the bet is ready: the homepage tap, on the clock
-      play: function (cb, fast) {
+      // act: the owner acted on a card, so it is the one quick motion
+      play: function (cb, fast, act) {
         onBorn = cb;
+        quick = Boolean(act);
         if (reduced) { settled(); return; }
-        pace = fast ? FAST : 1;
-        if (mode !== 'pull') startPull(fast);
+        pace = act ? ACT_PACE : fast ? FAST : 1;
+        // after an act the dots spiral in from where the re-formed sphere is
+        if (mode !== 'pull') startPull(fast || Boolean(act));
         timed = true;
         start();
       },
@@ -643,181 +683,191 @@ body.has-card .foot { position: static; margin-top: 28px; }
     };
   })();
 
-  // ---- the bet ------------------------------------------------------------------
-  var bet = { status: null, polling: false, armed: false, drawn: null, busy: false, last: null, watching: null };
-  // how long "builder has it" (or any ack) stays before the next card
+  // ---- the card: one renderer, one way to act --------------------------------------
+  // The page draws exactly the card the Mac served, with draw(card), and
+  // nothing else draws a card. Its options and its box come only from that
+  // card, and nothing from the card before survives a draw. Every tap posts
+  // the card's id and the option's id, or the words typed in its box, to
+  // /card; the Mac refuses anything else, and its answer is the next card.
+  var bet = { shown: null, watching: null, tapAt: 0 };
+  // while an act or a turn is under way the card takes no taps; the page
+  // marks it on the body too, so anyone reading the page can tell
+  var busyNow = false;
+  Object.defineProperty(bet, 'busy', { get: function () { return busyNow; }, set: function (v) { busyNow = Boolean(v); document.body.toggleAttribute('data-busy', busyNow); } });
+  // how long a line like "builder has it" stays under the orb before the next card
   var AFTER_MS = 1500;
+  // a tapped option holds as chosen this long before the motion starts
+  var HOLD_MS = 150;
+  // what turns in place instead of the spiral: flipping the deck, more
+  // models, and who a swap is for are the same card moving, not an answer
+  var IN_PLACE = ['flip', 'more', 'scope'];
 
   function buzz() { if (navigator.vibrate) { try { navigator.vibrate(10); } catch (e) { /* not on this device */ } } }
 
-  // after a yes or a nice, the next card comes the way a re-tap brings it
-  function moveOn(ack) {
-    var box = document.getElementById('bet');
-    box.style.minHeight = box.offsetHeight + 'px';
-    var act = box.querySelector('.act');
-    var line = box.querySelector('.sayline');
-    if (line) line.remove();
-    if (act) act.replaceWith(el('p', 'mission', ack));
-    else box.appendChild(el('p', 'mission', ack));
-    setTimeout(function () { tapOrb(false); }, AFTER_MS);
-  }
-
-  function armedTap(go, label, armedLabel, run) {
-    go.addEventListener('click', function () {
-      buzz();
-      if (!bet.armed) {
-        bet.armed = true; go.textContent = armedLabel; go.className = 'pill armed';
-        setTimeout(function () { if (bet.armed) { bet.armed = false; go.textContent = label; go.className = 'pill'; } }, 5000);
-        return;
+  // a failed fetch reads like a refusal, so nothing ever hangs
+  function offline() { return { ok: false, http: 0, message: 'that did not reach the mac. try again.' }; }
+
+  function box() { return document.getElementById('bet'); }
+
+  // ---- draw: the one place a card becomes the page -----------------------------------
+  function draw(card) {
+    var b = box();
+    b.textContent = '';
+    b.setAttribute('data-card', card.id);
+    b.setAttribute('data-kind', card.kind);
+    document.body.classList.toggle('wide', Boolean(card.table));
+    if (card.count) b.appendChild(el('span', 'count', card.count));
+    if (card.label) b.appendChild(el('span', 'label ' + card.label.replace(/ /g, '-'), card.label));
+    var title = b.appendChild(el('h1', null, card.title));
+    // a reply of more than one line reads at the body size, in the same spot
+    if (card.kind === 'reply') {
+      var lines = document.createRange();
+      lines.selectNodeContents(title);
+      if (lines.getClientRects().length > 1) title.classList.add('said');
+    }
+    if (card.body) b.appendChild(el('p', 'why', card.body));
+    // a reply keeps the title's spot; the turns so far sit quietly under it
+    if (card.thread && card.thread.length) {
+      var thread = b.appendChild(el('div', 'thread'));
+      card.thread.forEach(function (t) { thread.appendChild(el('p', 'turn ' + (t.who === 'owner' ? 'you' : 'orb'), t.text)); });
+    }
+    // who it is and what they do; the rating and the model live on the team table
+    if (card.job && !card.table) b.appendChild(el('p', 'jobline', [card.job.member, card.job.role].filter(Boolean).join(' · ')));
+    var inCells = card.options.filter(function (o) { return o.cell; });
+    if (card.table) b.appendChild(drawTable(card, inCells));
+    if (card.time) b.appendChild(el('span', 'time', card.time));
+    if (card.line) b.appendChild(el('p', 'mission', card.line));
+    // the options in the card's own order; quiet ones next to each other share one line
+    var rest = card.options.filter(function (o) { return !o.cell; });
+    var quiet = function (o) { return !o.style || o.style === 'quiet'; };
+    var act = el('div', 'act' + (rest.some(function (o) { return o.style === 'choice' || o.style === 'option'; }) ? ' answers' : ''));
+    var links = null;
+    var group = null;
+    rest.forEach(function (o) {
+      if (!quiet(o)) { links = null; act.appendChild(optionButton(o)); return; }
+      // a group of quiet options shares one line, headed by its words
+      if (links && (o.group || null) === group) links.appendChild(document.createTextNode(' · '));
+      else {
+        links = act.appendChild(el('div', 'links'));
+        group = o.group || null;
+        if (group) links.appendChild(document.createTextNode(group + ': '));
       }
-      bet.armed = false;
-      run();
+      links.appendChild(optionButton(o));
     });
+    // a quiet line under the options, empty until something does not go through
+    act.appendChild(el('p', 'links note'));
+    b.appendChild(act);
+    if (card.input) b.appendChild(inputLine(card.input));
   }
 
-  // a line that ends like a sentence
-  function sentence(t) {
-    var s = String(t || '').trim();
-    return s && !/[.!?]$/.test(s) ? s + '.' : s;
-  }
-
-  // a yes the owner owes, or a finished business move: what is going on,
-  // then why it matters, both written by the server
-  function drawJobCard(s) {
-    var box = document.getElementById('bet');
-    box.textContent = '';
-    var j = s.job;
-    box.appendChild(el('h1', null, j.what));
-    if (j.why) box.appendChild(el('p', 'why', j.why));
-    var act = el('div', 'act');
-    if (s.kind === 'yes') {
-      var yes = el('button', 'pill', 'yes');
-      yes.type = 'button';
-      armedTap(yes, 'yes', 'tap again to say yes', function () {
-        api('/bet/yes', { confirm: true }).then(function (r) { moveOn(r.ack || r.message || 'sent'); });
-      });
-      act.appendChild(yes);
-    } else if (s.kind === 'wait') {
-      // one calm line: the idea turns in on its own once it is written
-      watchWait();
-      box.appendChild(sayBox());
-      return;
-    } else {
-      var ok = el('button', 'pill', 'nice');
-      ok.type = 'button';
-      ok.addEventListener('click', function () {
-        buzz();
-        api('/bet/nice', {}).then(function (r) { moveOn(r.ack || 'nice.'); });
+  // a table: one row per line, a line between every cell; an option with a
+  // cell is drawn in that cell, and a tap anywhere on its row opens the
+  // row's first option
+  function drawTable(card, inCells) {
+    var t = card.table;
+    var grid = el('div', 'grid');
+    var table = grid.appendChild(el('table', 'k-' + card.kind));
+    var head = el('tr');
+    t.columns.forEach(function (c) { head.appendChild(el('th', c, c)).scope = 'col'; });
+    table.appendChild(el('thead')).appendChild(head);
+    var body = table.appendChild(el('tbody'));
+    t.rows.forEach(function (row, i) {
+      var mine = inCells.filter(function (o) { return o.cell.row === i; });
+      var tr = body.appendChild(el('tr', mine.length ? 'row' : null));
+      row.forEach(function (cell, j) {
+        var col = t.columns[j];
+        var td = tr.appendChild(el('td', col + (col === 'status' && t.status ? ' ' + String(t.status[i] || '').replace(/ /g, '-') : '')));
+        var o = mine.filter(function (x) { return x.cell.column === col; })[0];
+        if (o) {
+          var btn = td.appendChild(optionButton(o, true));
+          btn.addEventListener('click', function (e) { e.stopPropagation(); });
+        } else td.textContent = cell;
       });
-      act.appendChild(ok);
-    }
-    box.appendChild(act);
-    box.appendChild(sayBox());
-  }
-
-  // While the calm line shows, look every WAIT_LOOK_MS for the idea; once the
-  // server has one ready, it is asked for the way a tap does and turns in
-  // with one crossfade. No tap, and nothing moves on the page while it
-  // waits. It also waits while the owner types there (the box has the
-  // cursor or any words), so it comes in after they send, or once they
-  // clear the box and leave it; and on the big orb, it waits for their tap.
-  var WAIT_LOOK_MS = 1500;
-  function typingOnCard() {
-    var input = document.getElementById('bet').querySelector('.field input');
-    return Boolean(input && (input === document.activeElement || input.value.trim()));
-  }
-  function watchWait() {
-    if (bet.watching) return;
-    var quiet = function () { return !bet.busy && document.body.classList.contains('has-card') && !typingOnCard(); };
-    bet.watching = setInterval(function () {
-      if (!bet.last || bet.last.kind !== 'wait') { clearInterval(bet.watching); bet.watching = null; return; }
-      if (!quiet()) return;
-      api('/bet').then(function (s) {
-        if (s.http !== 200 || !quiet() || !bet.last || bet.last.kind !== 'wait') return;
-        if (s.id !== bet.last.id && s.kind !== 'wait' && isCard(s)) { bet.status = s.status; turn(s); return; }
-        if (s.kind === 'wait' && s.queue > 0) think(false, 0);
-      }).catch(function () { /* the next look tries again */ });
-    }, WAIT_LOOK_MS);
+      if (mine.length) tr.addEventListener('click', function () { var first = tr.querySelector('button'); if (first) first.click(); });
+    });
+    return grid;
   }
 
-  // no bet was ready: one question, then what is going on and why the answer matters
-  function drawQuestionCard(s) {
-    var box = document.getElementById('bet');
-    box.textContent = '';
-    var q = s.question;
-    box.appendChild(el('h1', null, q.ask));
-    if (q.line) box.appendChild(el('p', 'why', q.line));
-    var act = el('div', 'act answers');
-    q.choices.forEach(function (c) {
-      var b = el('button', 'choice', c.label);
-      b.type = 'button';
-      b.addEventListener('click', function () {
+  // One option, as the card says: big or quiet, a second tap when it asks
+  // for one, a box when it takes words. bare: no class of its own (in a cell).
+  function optionButton(o, bare) {
+    var cls = bare ? null : o.style === 'primary' ? 'pill' : o.style === 'choice' ? 'choice' : o.style === 'option' ? 'option' : null;
+    var btn = el('button', cls);
+    btn.type = 'button';
+    btn.setAttribute('data-option', o.id);
+    if (o.style === 'option' || (o.detail && o.style === 'choice')) {
+      btn.appendChild(el('span', 't', o.label));
+      if (o.detail) btn.appendChild(el('span', 'w', o.detail));
+    } else btn.textContent = o.label;
+    if (o.chosen) btn.classList.add('chosen');
+    if (o.type) btn.classList.add('other');
+    if (o.action === 'none') { btn.disabled = true; return btn; }
+    if (o.confirm) {
+      // the first tap arms this one button; the second sends; it goes quiet after five seconds
+      var armed = false, quiet = null;
+      btn.addEventListener('click', function () {
         if (bet.busy) return;
         buzz();
-        // typed words are read first, so a question back is explained and nothing is saved
-        if (c.other) { typeHere(b, c.label, 60, function (text, field) { say(field, { text: text }); }); return; }
-        answer(b, { choice: c.id });
+        if (!armed) {
+          armed = true; btn.textContent = o.confirm; btn.classList.add('armed');
+          quiet = setTimeout(function () { armed = false; btn.textContent = o.label; btn.classList.remove('armed'); }, 5000);
+          return;
+        }
+        clearTimeout(quiet);
+        armed = false;
+        send(btn, { option_id: o.id, confirm: true }, o);
       });
-      if (c.other) b.classList.add('other');
-      act.appendChild(b);
+      return btn;
+    }
+    btn.addEventListener('click', function () {
+      if (bet.busy) return;
+      buzz();
+      if (o.type) { typeHere(btn, o.type.placeholder || o.label, o.type.max || 280, function (text, field) { send(field, { option_id: o.id, text: text }, o); }); return; }
+      send(btn, { option_id: o.id }, o);
     });
-    // a quiet line under the answers, empty until an answer does not go through
-    act.appendChild(el('div', 'links'));
-    box.appendChild(act);
-    // its own something else box is the one place to type
-    if (!q.choices.some(function (c) { return c.other; })) box.appendChild(sayBox());
+    return btn;
   }
 
-  // ---- answering in place: the eyes stay in one spot ----------------------------
-  // A tapped answer, or the words typed in its place, holds that spot as
-  // chosen for HOLD_MS while the rest of the card dims and stays put. The
-  // next card is asked for during the hold and turns in once it is over.
-  var HOLD_MS = 400;
-
-  // a failed fetch reads like a refusal, so a hold never hangs
-  function offline() { return { ok: false, http: 0 }; }
+  // the card's box: a quiet line that turns into the field in its own spot
+  function inputLine(input) {
+    var wrap = el('div', 'links sayline');
+    var open = wrap.appendChild(el('button', 'quiet', input.label || 'or say something'));
+    open.type = 'button';
+    open.addEventListener('click', function () {
+      if (bet.busy) return;
+      typeHere(open, input.placeholder || 'say something', input.max || 280, function (text, field) { send(field, { text: text }, null); });
+    });
+    return wrap;
+  }
 
-  // every answer row of the card dims but the one in use; no spot, none
+  // ---- answering in place: the eyes stay in one spot ---------------------------------
+  // every row of the card dims but the one in use; no spot, none
   function dimOthers(spot) {
-    var box = document.getElementById('bet');
-    box.querySelectorAll('.act > *, .options > *, .sayline, :scope > .links').forEach(function (n) {
-      n.classList.toggle('muted', Boolean(spot) && n !== spot && !n.contains(spot));
+    box().querySelectorAll('.act > *, .act .links > button, .sayline, .grid').forEach(function (n) {
+      n.classList.toggle('muted', Boolean(spot) && n !== spot && !n.contains(spot) && !spot.contains(n));
     });
   }
 
-  // the spot holds as chosen and the card takes no taps; returns when it
-  // started, which is also where the time to the next card counts from
+  // the spot holds as chosen and the card takes no taps; returns when it started
   function hold(spot) {
-    var box = document.getElementById('bet');
     dimOthers(spot);
     spot.classList.add('chosen');
-    box.classList.add('holding');
+    box().classList.add('holding');
     var input = spot.querySelector('input');
     if (input) { input.readOnly = true; input.blur(); }
     bet.busy = true;
-    bet.armed = false;
     bet.tapAt = performance.now();
     document.body.removeAttribute('data-reveal-ms');
     return bet.tapAt;
   }
 
-  // it did not go through: the card is as it was
-  function unhold() {
-    var box = document.getElementById('bet');
-    box.classList.remove('holding');
-    dimOthers(null);
-    box.querySelectorAll('.chosen').forEach(function (n) { n.classList.remove('chosen'); });
-    bet.busy = false;
-  }
-
-  // resolves once the hold that started at heldAt has run HOLD_MS
   function afterHold(heldAt) {
     var left = heldAt ? heldAt + HOLD_MS - performance.now() : 0;
     return new Promise(function (resolve) { setTimeout(resolve, Math.max(0, left)); });
   }
 
   // The tapped button becomes the field at its own size and spot, with the
-  // cursor already in it, and the other answers dim. Enter or send hands
+  // cursor already in it, and the other options dim. Enter or send hands
   // the words to sent(text, field). Left empty, it turns back into the button.
   function typeHere(btn, placeholder, maxLength, sent) {
     var field = el('div', btn.classList.contains('choice') ? 'choice field' : 'field');
@@ -829,18 +879,17 @@ body.has-card .foot { position: static; margin-top: 28px; }
     input.placeholder = placeholder;
     input.enterKeyHint = 'send';
     input.setAttribute('aria-label', placeholder);
-    var send = el('button', 'send', 'send');
-    send.type = 'button';
+    var go = el('button', 'send', 'send');
+    go.type = 'button';
     var submit = function () {
       var text = input.value.trim();
       if (text && !bet.busy) sent(text, field);
     };
     // a press on send keeps the cursor in the field, so it never closes first
-    send.addEventListener('mousedown', function (e) { e.preventDefault(); });
-    send.addEventListener('click', function () { buzz(); submit(); });
+    go.addEventListener('mousedown', function (e) { e.preventDefault(); });
+    go.addEventListener('click', function () { buzz(); submit(); });
     input.addEventListener('keydown', function (e) {
       if (e.key === 'Enter') { e.preventDefault(); submit(); }
-      if (e.key === 'Escape') { input.value = ''; input.blur(); }
     });
     input.addEventListener('blur', function () {
       if (input.value.trim() || field.classList.contains('chosen') || !field.isConnected) return;
@@ -848,370 +897,130 @@ body.has-card .foot { position: static; margin-top: 28px; }
       dimOthers(null);
     });
     field.appendChild(input);
-    field.appendChild(send);
+    field.appendChild(go);
     btn.replaceWith(field);
     dimOthers(field);
     input.focus();
+    return field;
   }
 
-  // An answer to a question holds as chosen while it saves. If it does not
-  // go through, the card comes back as it was, the words still in the
-  // field, and why takes the hint's line under the answers.
-  function answer(spot, body) {
-    body.card = shownCard();
-    var heldAt = hold(spot);
-    api('/bet/answer', body).catch(offline).then(function (r) {
-      if (r.ok) { think(false, heldAt); return; }
-      unhold();
-      var hint = document.getElementById('bet').querySelector('.act .links');
-      if (hint) hint.textContent = r.message || 'that did not go through';
-      var input = spot.querySelector('input');
-      if (input) { input.readOnly = false; dimOthers(spot); input.focus(); }
-    });
-  }
-
-  // the card the owner is looking at, named with every answer and every
-  // word said, so the server acts on that card or on nothing
-  function shownCard() { return bet.last && bet.last.id ? bet.last.id : ''; }
-
-  // Words said on a card hold their spot as chosen while the server reads
-  // them. An answer or an instruction brings the next card; a question
-  // back or a second tap it needs turns in as the orb's reply, in the
-  // title's spot. If it did not send, the words stay where they were.
-  // One id per typed send: made when these words are first sent from this
-  // spot, the same on every retry of them, and new when the words change,
-  // so a send whose reply was lost is never sent twice. getRandomValues
+  // One id per send: made when these words are first sent from this card's
+  // option or box, the same on every retry of them there, and new for any
+  // other card, option, or words, so a send whose answer was lost is never
+  // sent twice and the same words to someone else always go. getRandomValues
   // works on the plain http of the wifi link, where randomUUID does not.
-  function sendId(spot, text) {
-    if (spot.sendText !== text) {
+  var sent = { key: null, id: null };
+  function sendId(key) {
+    if (sent.key !== key) {
       var n = new Uint32Array(2);
       crypto.getRandomValues(n);
-      spot.sendText = text;
-      spot.sendId = ('000000' + n[0].toString(36)).slice(-7) + ('000000' + n[1].toString(36)).slice(-7);
+      sent.key = key;
+      sent.id = ('000000' + n[0].toString(36)).slice(-7) + ('000000' + n[1].toString(36)).slice(-7);
     }
-    return spot.sendId;
-  }
-
-  // while the words are read, one quiet ellipsis in the held spot: where
-  // send was in a box, or after a tapped reply. Nowhere else.
-  function reading(spot) {
-    var send = spot.querySelector('.send');
-    if (send) { send.textContent = '\u2026'; send.classList.add('reading'); return; }
-    spot.appendChild(el('span', 'reading', ' \u2026'));
-  }
-  function doneReading(spot) {
-    var send = spot.querySelector('.send.reading');
-    if (send) { send.textContent = 'send'; send.classList.remove('reading'); }
-    var dots = spot.querySelector('span.reading');
-    if (dots) dots.remove();
+    return sent.id;
   }
 
-  function say(spot, body) {
-    body.card = shownCard();
-    body.send = sendId(spot, body.text);
+  // ---- acting: one post, then one motion to the next card ------------------------------
+  // The option holds as chosen for HOLD_MS. Then the card fades while the
+  // small orb glides into the sphere; once the answer is in, the dots
+  // spiral in and the next card blooms where they land. An answer that is
+  // late leaves the sphere in its idle drift until it lands. A line from the
+  // Mac (who has it now) shows under the sphere while it waits. When it did
+  // not go through, the same card comes back with the words still in its
+  // box and one line why. Flipping the deck turns the card in place.
+  function send(spot, body, option) {
+    if (!bet.shown) return;
+    var from = bet.shown;
+    body.card_id = from.id;
+    if (body.text) body.send = sendId([from.id, option ? option.id : 'the box', body.text].join(' | '));
     var heldAt = hold(spot);
-    reading(spot);
-    api('/bet/say', body).catch(offline).then(function (r) {
-      if (r.ok && !r.stay) { think(false, heldAt); return; }
-      if (!r.ok && r.reason !== 'needs_confirm') { unsent(spot, r.message || 'that did not send. tap send to try again'); return; }
-      afterHold(heldAt).then(function () { crossfade(function () { drawReply(r, body.text); }); });
-    });
-  }
-
-  // It did not send: the card is as it was, the words still in the box with
-  // the cursor in it, and one short line under it says why, so Enter (or
-  // the same tap) tries again. Left empty, the box turns back into the
-  // button and the line goes with it.
-  function unsent(spot, why) {
-    doneReading(spot);
-    unhold();
-    var note = spot.nextElementSibling;
-    var input = spot.querySelector('input');
-    if (!note || !note.classList.contains('unsent')) {
-      note = el('p', 'links unsent');
-      spot.after(note);
-      if (input) input.addEventListener('blur', function () { if (!spot.isConnected) note.remove(); });
-    }
-    note.textContent = why;
-    if (input) { input.readOnly = false; dimOthers(spot); input.focus(); }
-  }
-
-  // one reply to tap: it holds as chosen and is said
-  function sayChoice(label, body) {
-    var b = el('button', 'choice', label);
-    b.type = 'button';
-    b.addEventListener('click', function () {
-      if (bet.busy) return;
-      buzz();
-      say(b, body);
-    });
-    return b;
-  }
-
-  // the orb's reply is the title, with the card's own answer right under it
-  // (do it, yes, nice, or the answers), then up to three suggested replies;
-  // starting a member who is not running takes one more tap, or it is kept
-  // as a note. The say line takes anything else.
-  function drawReply(r, said) {
-    var box = document.getElementById('bet');
-    // a reply never takes the card's own answer away: the card is drawn
-    // once more, and its row is kept, buttons and all
-    var own = null;
-    if (bet.last) { drawBetCard(bet.last); own = box.querySelector(':scope > .act, :scope > .options'); }
-    box.textContent = '';
-    bet.drawn = null;
-    var title = el('h1', null, r.stay ? r.reply : (r.message || 'that did not go through'));
-    box.appendChild(title);
-    // more than one line reads at the body size, in the same spot
-    var lines = document.createRange();
-    lines.selectNodeContents(title);
-    if (lines.getClientRects().length > 1) title.classList.add('said');
-    if (own) box.appendChild(own);
-    var act = el('div', 'act answers');
-    var have = own ? Array.prototype.map.call(own.querySelectorAll('button'), function (b) { return b.textContent.trim().toLowerCase(); }) : [];
-    if (r.stay) (r.suggestions || []).forEach(function (sug) {
-      if (have.indexOf(String(sug).trim().toLowerCase()) < 0) act.appendChild(sayChoice(sug, { text: sug }));
-    });
-    if (r.reason === 'needs_confirm') {
-      act.appendChild(sayChoice('start it', { text: said, confirm: true }));
-      act.appendChild(sayChoice('keep it as a note instead', { text: said, note: true }));
+    var answer = api('/act', body).catch(offline);
+    if (option && IN_PLACE.indexOf(option.action) >= 0) {
+      Promise.all([answer, afterHold(heldAt)]).then(function (both) {
+        var r = both[0];
+        if (!r.ok || !r.card) { bet.busy = false; unsent(from, r, body.text, option); return; }
+        turnTo(r.card);
+      });
+      return;
     }
-    box.appendChild(act);
-    if (!own || !own.querySelector('.other')) box.appendChild(sayBox());
+    afterHold(heldAt).then(function () { flow(answer, from, body.text, option); });
   }
 
-  // the owner's own number, once a week: one box and one tap to save
-  function drawReportCard(s) {
-    var box = document.getElementById('bet');
-    box.textContent = '';
-    box.appendChild(el('h1', null, s.report.what));
-    box.appendChild(el('p', 'why', s.report.why));
-    var act = el('div', 'act answers');
-    var input = el('input', 'say');
-    input.type = 'number';
-    input.inputMode = 'decimal';
-    input.setAttribute('aria-label', s.report.what);
-    var save = el('button', 'pill', 'save');
-    save.type = 'button';
-    var go = function () {
-      if (!String(input.value).trim()) return;
-      save.disabled = true;
-      api('/bet/report', { value: input.value }).then(function (r) {
-        if (r.ok) { moveOn(r.ack); return; }
-        save.disabled = false;
-        input.value = '';
-        input.placeholder = r.message || 'that did not go through';
-      });
+  function flow(answer, from, typed, option) {
+    var landed = null;
+    var sphere = false;
+    var lineAt = 0;
+    var land = function () {
+      if (!landed || !sphere) return;
+      var r = landed;
+      landed = null;
+      var wait = r.ack && lineAt ? Math.max(0, AFTER_MS - (performance.now() - lineAt)) : 0;
+      setTimeout(function () {
+        // nothing more to show: the sphere stays, with its line
+        if (r.ok && (r.home || !r.card)) { bet.busy = false; bet.shown = null; line.set(r.home ? 'not now. tap when you want another' : 'tap to think', false); return; }
+        // the card the Mac has on screen now is the one that comes back; a
+        // refusal comes back on it with one line why
+        var then = r.card || from;
+        if (!then) { bet.busy = false; line.set('that did not go through. tap to try again', true); return; }
+        if (!r.ok) { spiralTo(then, function () { unsent(then, r, typed, then.id === (from && from.id) ? option : null); }); return; }
+        spiralTo(then, null);
+      }, wait);
     };
-    save.addEventListener('click', go);
-    input.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); go(); } });
-    act.appendChild(input);
-    act.appendChild(save);
-    // a quiet way out: moves on, saves nothing, and is not asked again today
-    var links = el('div', 'links');
-    var later = el('button', null, 'not now');
-    later.type = 'button';
-    later.addEventListener('click', function () { if (bet.busy) return; buzz(); think(false, 0); });
-    links.appendChild(later);
-    act.appendChild(links);
-    box.appendChild(act);
-    box.appendChild(sayBox());
-  }
-
-  // A conversation in one box. While the words are read the reply spot shows
-  // a quiet ellipsis; a question back is answered in place, with the turns so
-  // far above it and up to three suggested replies to tap. Starting a member
-  // who is not running takes a second tap, or it is kept as a note.
-  // post(body) sends it; done(ack) runs when something real came of it.
-  function convo(post, done, placeholder) {
-    var wrap = el('div', 'links sayline');
-    var thread = el('div', 'thread');
-    var reply = el('p', 'why reply');
-    reply.hidden = true;
-    var input = el('input', 'say');
-    input.type = 'text';
-    input.maxLength = 280;
-    input.setAttribute('aria-label', placeholder);
-    input.placeholder = placeholder;
-    var send = el('button', 'pill', 'send');
-    send.type = 'button';
-    var extra = el('div', 'links');
-    var pending = null;
-    // an armed second tap belongs to the words it was asked about: any edit clears it
-    function disarm() {
-      pending = null;
-      send.textContent = 'send';
-      send.className = 'pill';
-      extra.textContent = '';
-      reply.textContent = '';
-      reply.hidden = true;
-    }
-    function drawThread(turns) {
-      thread.textContent = '';
-      turns.forEach(function (t) { thread.appendChild(el('p', 'turn ' + (t.who === 'owner' ? 'you' : 'orb'), t.text)); });
-    }
-    function go(more, said) {
-      var text = said || input.value.trim();
-      if (!text) return;
-      send.disabled = true;
-      reply.hidden = false;
-      reply.textContent = '\u2026';
-      extra.textContent = '';
-      // the same words carry the same id on every try, so a retry never sends twice
-      var body = { text: text, send: sendId(wrap, text) };
-      if (more) Object.keys(more).forEach(function (k) { body[k] = more[k]; });
-      post(body).catch(offline).then(function (r) {
-        if (r.ok && !r.stay) { done(r.ack); return; }
-        send.disabled = false;
-        if (r.stay) { reply.textContent = r.reply;
-          input.value = '';
-          drawThread(r.thread.slice(0, -1));
-          (r.suggestions || []).forEach(function (sug) {
-            var b = el('button', 'quiet', sug);
-            b.type = 'button';
-            b.addEventListener('click', function () { buzz(); go(null, sug); });
-            extra.appendChild(b);
-          });
-          return;
-        }
-        if (r.reason === 'needs_confirm') {
-          pending = text;
-          reply.textContent = r.message;
-          send.textContent = 'tap again';
-          send.className = 'pill armed';
-          var keep = el('button', 'quiet', 'keep it as a note instead');
-          keep.type = 'button';
-          keep.addEventListener('click', function () { disarm(); go({ note: true }); });
-          extra.appendChild(keep);
-          return;
-        }
-        // it did not send: the words are in the box, send works again, and
-        // one short line says so
-        if (said && !input.value) input.value = said;
-        reply.textContent = r.message || 'that did not send. tap send to try again';
-        input.focus();
-      });
-    }
-    send.addEventListener('click', function () {
-      buzz();
-      if (pending) { disarm(); go({ confirm: true }); return; }
-      go();
+    answer.then(function (r) {
+      landed = r;
+      if (r.ok && r.ack) { lineAt = performance.now(); line.set(r.ack, false); }
+      land();
     });
-    input.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); send.click(); } });
-    input.addEventListener('input', function () { if (pending) disarm(); });
-    wrap.appendChild(thread);
-    wrap.appendChild(reply);
-    wrap.appendChild(input);
-    wrap.appendChild(send);
-    wrap.appendChild(extra);
-    return wrap;
+    leave(function () { sphere = true; land(); }, true);
   }
 
-  // a quiet line under every card: tap it and the line becomes the box, in
-  // its own spot. on a question it is the answer, on an idea a note to
-  // rework it, on a yes or a finished job a word to that member; the server
-  // reads it first, and a question back is answered
-  function sayBox() {
-    var wrap = el('div', 'links sayline');
-    var open = el('button', 'quiet', 'or say something');
-    open.type = 'button';
-    open.addEventListener('click', function () {
-      if (bet.busy) return;
-      typeHere(open, 'say something', 280, function (text, field) { say(field, { text: text }); });
-    });
-    wrap.appendChild(open);
-    return wrap;
+  // the card fades in place while the small orb glides down and becomes the
+  // sphere; the card leaves the page once it has faded
+  function leave(then, fast) {
+    var b = box();
+    var to = sphereSpot();
+    b.classList.remove('quick', 'acted', 'up');
+    b.classList.add('leave');
+    var swap = function () {
+      b.style.minHeight = '';
+      b.hidden = true;
+      b.classList.remove('leave', 'holding');
+      document.body.classList.remove('has-card', 'wide');
+      window.scrollTo(0, 0);
+    };
+    if (reduced) { swap(); orb.melt(then, to, function () {}, fast); return; }
+    orb.melt(then, to, swap, fast);
   }
 
-  // two or three ideas side by side: one tap picks one and opens its full card
-  function drawChoiceCard(s) {
-    var box = document.getElementById('bet');
-    box.textContent = '';
-    box.appendChild(el('h1', null, 'which one next?'));
-    var list = el('div', 'options');
-    s.choice.options.forEach(function (o) {
-      var b = el('button', 'option');
-      b.type = 'button';
-      b.appendChild(el('span', 't', o.title));
-      b.appendChild(el('span', 'w', o.why));
-      b.addEventListener('click', function () {
-        if (bet.busy) return;
-        buzz();
-        var heldAt = hold(b);
-        api('/bet/pick', { id: o.id }).then(function (r) {
-          if (r.http === 200 && r.bet) { afterHold(heldAt).then(function () { turn(r); }); return; }
-          think(false, heldAt);
-        }, function () { think(false, heldAt); });
-      });
-      list.appendChild(b);
-    });
-    box.appendChild(list);
-    box.appendChild(sayBox());
+  // from the sphere: the dots spiral in and the card blooms where they land
+  function spiralTo(card, after) {
+    line.set('', false);
+    if (reduced) { orb.settled(); showCard(card, false); bet.busy = false; if (after) after(); return; }
+    orb.play(function (phase) {
+      // the card blooms where the dots land; what comes with it (a line why, the words back in their box) comes with it
+      if (phase === 'cover') { showCard(card, true, true, true); if (after) after(); }
+      if (phase === 'settled') bet.busy = false;
+    }, true, true);
   }
 
-  function drawBetCard(s) {
-    if (s.kind === 'report') { drawReportCard(s); return; }
-    if (s.kind === 'choice') { drawChoiceCard(s); return; }
-    if (s.kind === 'question') { drawQuestionCard(s); return; }
-    if (s.kind && s.kind !== 'bet') { drawJobCard(s); return; }
-    var box = document.getElementById('bet');
-    box.textContent = '';
-    var b = s.bet;
-    box.appendChild(el('h1', null, b.title));
-    // why it matters: what is going on and what we expect, in the same big type
-    box.appendChild(el('p', 'why', [b.why_now, b.expect].map(sentence).join(' ')));
-    if (s.mission) { box.appendChild(el('p', 'mission', s.mission.line)); return; }
-    if (s.status === 'starting') { box.appendChild(el('p', 'mission', 'starting now')); return; }
-    var act = el('div', 'act');
-    var go = el('button', 'pill' + (bet.armed ? ' armed' : ''), bet.armed ? 'tap again to start' : 'do it');
-    go.type = 'button';
-    go.setAttribute('aria-label', bet.armed ? 'tap again to start the team on this idea' : 'do it. starts the team on the steps; your yes steps wait for you');
-    go.addEventListener('click', function () {
-      buzz();
-      if (!bet.armed) {
-        bet.armed = true; drawBetCard(s);
-        setTimeout(function () { if (bet.armed) { bet.armed = false; if (bet.last) drawBetCard(bet.last); } }, 5000);
-        return;
-      }
-      bet.armed = false;
-      s.status = 'starting'; s.unstarted = null; drawBetCard(s);
-      api('/bet/do', { confirm: true }).catch(offline).then(function (r) {
-        if (!r || !r.ok) {
-          // it did not get going: the card comes back as it was, do it and
-          // all, with one line why, and the page follows this card again
-          s.status = 'ready';
-          s.unstarted = (r && r.message) || 'that did not start. tap do it to try again';
-          bet.drawn = s.id;
-          drawBetCard(s);
-          refresh();
-          return;
-        }
-        loadBet(); refresh();
-        setTimeout(function () { tapOrb(false); }, AFTER_MS);
-      });
-    });
-    act.appendChild(go);
-    if (s.unstarted) act.appendChild(el('p', 'links unsent', s.unstarted));
-    var links = el('div', 'links');
-    var sharp = el('button', null, 'sharper idea');
-    sharp.type = 'button';
-    sharp.addEventListener('click', function () { tapOrb(true); });
-    var skip = el('button', null, 'not now');
-    skip.type = 'button';
-    skip.addEventListener('click', function () {
-      buzz();
-      api('/bet/skip', {}).then(function () {
-        dissolve(function () { bet.status = 'skipped'; line.set('not now. tap when you want another', false); });
-      });
-    });
-    links.appendChild(sharp);
-    links.appendChild(document.createTextNode(' · '));
-    links.appendChild(skip);
-    act.appendChild(links);
-    box.appendChild(act);
-    box.appendChild(sayBox());
+  // It did not go through: this card as it was, one line why under its
+  // options, and typed words back in their box with the cursor in it.
+  function unsent(card, r, typed, option) {
+    if (bet.shown !== card || box().getAttribute('data-card') !== card.id) showCard(card, false);
+    box().classList.remove('holding');
+    var note = box().querySelector('.act .note');
+    // the Mac's own refusals are plain words; anything else reads as one plain line
+    if (note) note.textContent = (r && r.http === 409 && r.message) || (r && r.http === 0 && r.message) || 'that did not go through. try again.';
+    if (!typed) return;
+    // the words go back where they were typed, or to this card's own box when the card is a new one
+    var spot = option ? box().querySelector('[data-option="' + option.id + '"]') : box().querySelector('.sayline .quiet');
+    if (!spot) return;
+    if (!option && !card.input) return;
+    var field = typeHere(spot, (option && option.type && option.type.placeholder) || (card.input && card.input.placeholder) || 'say something', 280, function (text, f) { send(f, option ? { option_id: option.id, text: text } : { text: text }, option); });
+    field.querySelector('input').value = typed;
   }
 
+  // ---- showing a card ---------------------------------------------------------------------
   // the time from the tap to the card fully on screen, kept on the page so
   // the speed can be measured
   function measured() {
@@ -1219,301 +1028,261 @@ body.has-card .foot { position: static; margin-top: 28px; }
     bet.tapAt = 0;
   }
 
-  function showCard(s, animate, fast) {
-    var box = document.getElementById('bet');
-    bet.last = s;
-    bet.drawn = s.id;
-    drawBetCard(s);
+  // fast: the quick fade from the big orb; act: the short one after an act
+  function showCard(card, animate, fast, act) {
+    var b = box();
+    bet.shown = card;
+    // where it starts from is set first: drawing measures the title, and a
+    // measure is a frame the card would otherwise start from somewhere else
+    b.classList.remove('leave', 'holding');
+    b.classList.toggle('quick', Boolean(fast) && !act);
+    b.classList.toggle('acted', Boolean(act));
+    b.classList.toggle('up', !animate);
+    // on the page before it is drawn, so a long title can tell it runs past one line
     document.body.classList.add('has-card');
-    box.hidden = false;
-    box.classList.remove('leave', 'holding');
-    box.classList.toggle('quick', Boolean(fast));
-    if (!animate) { box.classList.add('up'); measured(); return; }
-    box.classList.remove('up');
-    var done = function (e) { if (e.propertyName === 'opacity') { box.removeEventListener('transitionend', done); measured(); } };
-    box.addEventListener('transitionend', done);
-    void box.offsetWidth;
-    requestAnimationFrame(function () { box.classList.add('up'); });
+    b.hidden = false;
+    draw(card);
+    if (card.watch) watchWait(); else stopWatch();
+    if (!animate) { measured(); return; }
+    var done = function (e) { if (e.propertyName === 'opacity') { b.removeEventListener('transitionend', done); measured(); } };
+    b.addEventListener('transitionend', done);
+    void b.offsetWidth;
+    requestAnimationFrame(function () { b.classList.add('up'); });
   }
 
   // where the sphere sits once the card is gone, read before anything moves,
   // in page coordinates (the screen's once the page is back at the top)
   function sphereSpot() {
-    var box = document.getElementById('bet');
-    var y0 = window.scrollY, was = box.hidden;
-    document.body.classList.remove('has-card');
-    box.hidden = true;
+    var b = box();
+    var y0 = window.scrollY, was = b.hidden, wide = document.body.classList.contains('wide');
+    document.body.classList.remove('has-card', 'wide');
+    b.hidden = true;
     var r = document.getElementById('orb').getBoundingClientRect();
     var spot = { x: r.left + r.width / 2, y: r.top + window.scrollY + r.height / 2 };
     document.body.classList.add('has-card');
-    box.hidden = was;
+    if (wide) document.body.classList.add('wide');
+    b.hidden = was;
     if (window.scrollY !== y0) window.scrollTo(0, y0);
     return spot;
   }
 
-  // the card fades out in place while the small orb glides down and becomes
-  // the sphere again; the card leaves the page once it has faded
-  function dissolve(then) {
-    var box = document.getElementById('bet');
-    var to = sphereSpot();
-    box.classList.remove('quick', 'up');
-    box.classList.add('leave');
-    var swap = function () {
-      box.style.minHeight = '';
-      box.hidden = true;
-      box.classList.remove('leave');
-      document.body.classList.remove('has-card');
-      window.scrollTo(0, 0);
-    };
-    if (reduced) { setTimeout(function () { orb.melt(then, to, swap); }, orb.leaveMs); return; }
-    orb.melt(then, to, swap);
-  }
-
-  // what the page does with the server's answer once the sphere is ready.
-  // Every tap comes back with a card, so the orb plays straight into it.
-  function reveal(s, fast) {
-    bet.status = s.status;
-    if ((s.bet || s.job || s.question || s.choice || s.report) && (s.status === 'ready' || s.status === 'started' || s.status === 'starting')) {
-      line.set('', false);
-      orb.play(function (phase) { if (phase === 'settled') { bet.busy = false; showCard(s, true, fast); } }, fast);
-      return;
-    }
-    bet.busy = false;
-    orb.relax();
-    line.set('tap to think', false);
-  }
-
-  function isCard(s) {
-    return Boolean((s.bet || s.job || s.question || s.choice || s.report) && (s.status === 'ready' || s.status === 'started' || s.status === 'starting'));
-  }
-
-  // Card to card: a crossfade in place. The small orb stays where it is.
-  // A still copy of the old card fades over the box while the new card,
-  // drawn under it, fades in from DRIFT below over TURN_IN_MS, starting
-  // 80ms in, so its title lands where the old title was. The box eases to
-  // its new height. No layout jump.
+  // Card to card in place: a still copy of the old card fades over the box
+  // while the new card, drawn under it, fades in from DRIFT below over
+  // TURN_IN_MS, starting 80ms in, so its title lands where the old title
+  // was. The box eases to its new height. No layout jump.
   var TURN_IN_MS = 320, DRIFT = 4;
-  function turn(s) {
-    crossfade(function () { bet.last = s; bet.drawn = s.id; drawBetCard(s); });
+  function turnTo(card) {
+    var b = box();
+    b.classList.remove('holding');
+    bet.shown = card;
+    turnInPlace(b, function () { draw(card); }, function () { bet.busy = false; measured(); if (card.watch) watchWait(); else stopWatch(); });
   }
 
-  // draw() puts the next card in the box
-  function crossfade(draw) {
-    var box = document.getElementById('bet');
-    box.classList.remove('holding');
-    if (reduced) { box.style.minHeight = ''; draw(); bet.busy = false; measured(); return; }
-    var from = box.offsetHeight;
-    box.style.height = from + 'px';
-    box.style.minHeight = '';
-    var ghost = box.cloneNode(true);
+  function turnInPlace(b, paint, after) {
+    if (reduced) { b.style.minHeight = ''; paint(); after(); return; }
+    var from = b.offsetHeight;
+    b.style.height = from + 'px';
+    b.style.minHeight = '';
+    var ghost = b.cloneNode(true);
     ghost.removeAttribute('id');
-    ghost.classList.remove('quick', 'turning', 'turn-in');
+    ghost.classList.remove('quick', 'acted', 'turning', 'turn-in');
     ghost.classList.add('up', 'ghost');
     ghost.setAttribute('aria-hidden', 'true');
     ghost.inert = true;
-    var r = box.getBoundingClientRect(), p = box.offsetParent.getBoundingClientRect();
+    var r = b.getBoundingClientRect(), p = b.offsetParent.getBoundingClientRect();
     ghost.style.top = (r.top - p.top) + 'px';
     ghost.style.left = (r.left - p.left) + 'px';
     ghost.style.width = r.width + 'px';
-    box.after(ghost);
-    box.classList.remove('quick', 'turning');
-    draw();
-    box.style.height = 'auto';
-    var to = box.offsetHeight;
-    box.style.height = from + 'px';
-    box.classList.add('turn-in');
-    void box.offsetHeight;
-    box.classList.add('turning');
-    box.classList.remove('turn-in');
-    box.style.height = to + 'px';
+    b.after(ghost);
+    b.classList.remove('quick', 'acted', 'turning');
+    paint();
+    b.style.height = 'auto';
+    var to = b.offsetHeight;
+    b.style.height = from + 'px';
+    b.classList.add('turn-in');
+    void b.offsetHeight;
+    b.classList.add('turning');
+    b.classList.remove('turn-in');
+    b.style.height = to + 'px';
     ghost.classList.add('gone');
     setTimeout(function () {
       ghost.remove();
-      box.classList.remove('turning');
-      box.style.height = '';
-      bet.busy = false;
-      measured();
+      b.classList.remove('turning');
+      b.style.height = '';
+      after();
     }, 80 + TURN_IN_MS + 20);
   }
 
-  // one tap: buzz at once and ask the server for the next card. From the
-  // sphere the orb plays into it; with a card up it is one calm turn.
-  function tapOrb(sharper) {
-    if (bet.busy) return;
-    buzz();
-    think(sharper, 0);
+  // While the calm line shows, look every WAIT_LOOK_MS for the idea; once the
+  // Mac has one ready, it is asked for the way a tap does and turns in with
+  // one crossfade. It waits while the owner types there (the box has the
+  // cursor or any words), and on the big orb it waits for their tap.
+  var WAIT_LOOK_MS = 1500;
+  function typingOnCard() {
+    var input = box().querySelector('.field input');
+    return Boolean(input && (input === document.activeElement || input.value.trim()));
+  }
+  function stopWatch() { if (bet.watching) { clearInterval(bet.watching); bet.watching = null; } }
+  function watchWait() {
+    if (bet.watching) return;
+    var quiet = function () { return !bet.busy && document.body.classList.contains('has-card') && !typingOnCard(); };
+    bet.watching = setInterval(function () {
+      if (!bet.shown || !bet.shown.watch) { stopWatch(); return; }
+      if (!quiet()) return;
+      api('/card').then(function (s) {
+        if (s.http !== 200 || !quiet() || !bet.shown || !bet.shown.watch || !s.card) return;
+        if (s.card.id !== bet.shown.id && isLive(s)) { turnTo(s.card); return; }
+        if (s.queue > 0) {
+          bet.busy = true;
+          api('/act', { orb: true, card_id: bet.shown.id }).catch(offline).then(function (r) {
+            if (r.ok && r.card) turnTo(r.card); else bet.busy = false;
+          });
+        }
+      }).catch(function () { /* the next look tries again */ });
+    }, WAIT_LOOK_MS);
   }
 
-  // Ask for the next card. heldAt: an answer has held as chosen since then,
-  // so the card is asked for during the hold and turns in once it is over,
-  // and the time to the card counts from that answer.
-  function think(sharper, heldAt) {
+  function isLive(s) { return Boolean(s && s.card); }
+
+  // ---- the orb ----------------------------------------------------------------------------
+  // The big orb: the next card, with the spiral, as on page open. An idea
+  // that landed behind the calm line is the next one, so it is never passed.
+  function think() {
+    if (bet.busy) return;
+    buzz();
     bet.busy = true;
-    bet.armed = false;
-    bet.tapAt = heldAt || performance.now();
+    bet.tapAt = performance.now();
     document.body.removeAttribute('data-reveal-ms');
-    var onCard = document.body.classList.contains('has-card');
     var failed = function () {
       bet.busy = false;
-      document.getElementById('bet').classList.remove('holding');
       orb.relax();
       line.set('that did not go through. tap to try again', true);
     };
-    Promise.all([api('/bet/think', { sharper: Boolean(sharper) }), afterHold(heldAt)]).then(function (both) {
-      var s = both[0];
-      if (s.http !== 200) { failed(); return; }
-      bet.status = s.status;
-      if (onCard && isCard(s)) { turn(s); return; }
-      if (onCard) { dissolve(function () { reveal(s, true); }); return; }
-      reveal(s, true);
+    api('/act', { orb: true, card_id: bet.shown ? bet.shown.id : null }).then(function (r) {
+      if (r.http !== 200 || !r.card) { if (r.http === 200) { bet.busy = false; orb.relax(); line.set('tap to think', false); return; } failed(); return; }
+      line.set('', false);
+      orb.play(function (phase) { if (phase === 'settled') { bet.busy = false; showCard(r.card, true, true); } }, true);
     }, failed);
   }
 
-  function loadBet() {
-    return api('/bet').then(function (s) {
-      if (s.http !== 200) return;
-      bet.status = s.status;
-      if ((s.bet || s.job || s.question || s.choice || s.report) && bet.drawn === s.id) { bet.last = s; drawBetCard(s); if (s.status === 'starting') poll(); }
-    });
-  }
-
-  function poll() {
-    if (bet.polling) return;
-    bet.polling = true;
-    setTimeout(function () { bet.polling = false; loadBet(); }, 400);
-  }
-
-  // first look: a card already on screen shows settled, anything else is the sphere
-  function firstLook() {
-    api('/bet').then(function (s) {
-      if (s.http !== 200) return;
-      bet.status = s.status;
-      if ((s.bet || s.job || s.question || s.choice || s.report) && (s.status === 'ready' || s.status === 'started' || s.status === 'starting')) {
-        orb.settled();
-        showCard(s, false);
-        return;
-      }
-      line.set(s.status === 'skipped' ? 'not now. tap when you want another' : 'tap to think', false);
-    });
-  }
-
-  // The small orb on a card goes back to the big dotted orb, the same calm
-  // way the page goes home before a new idea: the card fades, the small orb
-  // glides down and the dots form again, idle under the pointer. The card
-  // stays where it was on the server, so nothing is passed yet.
+  // The small orb on a card goes back to the big dotted orb, from any card:
+  // the card fades, the small orb glides down and the dots form again, idle
+  // under the pointer. The card stays where it is on the Mac, so nothing is
+  // passed until the big orb is tapped.
   function goHome() {
     if (bet.busy) return;
     buzz();
     bet.busy = true;
-    bet.armed = false;
-    dissolve(function () { bet.busy = false; line.set('tap to think', false); });
+    stopWatch();
+    // the line under the big orb is ready before the sphere is back
+    line.set('tap to think', false);
+    leave(function () { bet.busy = false; });
   }
 
-  // The big orb: the next idea, with the spiral, as on page open. An idea
-  // that landed behind the calm line is the next one, so it is never passed.
-  function tapBig() { tapOrb(false); }
-
   function tapSmallOrb() {
-    if (document.body.classList.contains('has-card')) goHome(); else tapBig();
+    if (document.body.classList.contains('has-card')) goHome(); else think();
   }
 
   var canvas = document.getElementById('orb');
   var lavaTap = document.getElementById('lava');
-  [[canvas, tapBig], [lavaTap, tapSmallOrb]].forEach(function (pair) {
+  [[canvas, think], [lavaTap, tapSmallOrb]].forEach(function (pair) {
     pair[0].addEventListener('click', pair[1]);
     pair[0].addEventListener('keydown', function (e) {
       if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); pair[1](); }
     });
   });
 
-  // ---- the team: who is on what, from real state, and a word to any of them ----
-
-  var teamBox = document.getElementById('team');
-  var teamInner = document.getElementById('team-inner');
-  // the way back from what is on top: the team closes, a talk card goes back to the team
-  var teamBack = null;
-
-  function closeTeam() { teamBox.hidden = true; }
-
-  function teamHead(title) {
-    teamInner.textContent = '';
-    teamBack = closeTeam;
-    var head = el('div', 'head');
-    head.appendChild(el('h1', null, title));
-    var close = el('button', 'quiet', 'close');
-    close.type = 'button';
-    close.addEventListener('click', closeTeam);
-    head.appendChild(close);
-    teamInner.appendChild(head);
+  // first look: a card already on screen shows settled, anything else is the sphere
+  function firstLook() {
+    api('/card').then(function (s) {
+      if (s.http !== 200) return;
+      if (s.card) { orb.settled(); showCard(s.card, false); return; }
+      line.set(s.status === 'skipped' ? 'not now. tap when you want another' : 'tap to think', false);
+    });
   }
 
-  function openTeam() {
-    teamBox.hidden = false;
-    teamHead('the team');
-    api('/bet/team').then(function (s) { if (s.http === 200) drawTeam(s.rows || []); });
+  // ---- the footer: the team and the yeses waiting, both cards like any other ---------------
+  // From any card, or the big orb: the Mac serves the team table or the job
+  // deck as the next card, and its back option returns to where the owner was.
+  function openFrom(which) {
+    if (bet.busy) return;
+    buzz();
+    bet.busy = true;
+    bet.tapAt = performance.now();
+    var answer = api('/act', { open: which, card_id: bet.shown ? bet.shown.id : null }).catch(offline);
+    if (!document.body.classList.contains('has-card')) {
+      answer.then(function (r) {
+        if (!r.ok || !r.card) { bet.busy = false; line.set((r && r.message) || 'that did not go through. tap to try again', true); return; }
+        spiralTo(r.card, null);
+      });
+      return;
+    }
+    flow(answer, bet.shown, null, null);
   }
+  document.getElementById('working').addEventListener('click', function () { openFrom('team'); });
+  document.getElementById('needs').addEventListener('click', function () { openFrom('deck'); });
 
-  function drawTeam(rows) {
-    teamHead('the team');
-    if (!rows.length) { teamInner.appendChild(el('p', 'why', 'nobody has had work in the last day.')); return; }
-    rows.forEach(function (r) {
-      var row = el('button', 'row');
-      row.type = 'button';
-      row.appendChild(el('span', 'who', r.member));
-      row.appendChild(el('span', 'st ' + r.status.replace(/ /g, '-'), r.status));
-      row.appendChild(el('span', 'on', r.on));
-      row.appendChild(el('span', 'time', r.time));
-      row.addEventListener('click', function () { drawTalk(r); });
-      teamInner.appendChild(row);
-    });
+  // the option on the card that does this, if it has one
+  function optionFor(action, step) {
+    if (!bet.shown) return null;
+    return bet.shown.options.filter(function (o) { return o.action === action && (step == null || (o.binds && o.binds.step === step)); })[0] || null;
   }
-
-  // a talk card: what the member is on, and a word to steer them
-  function drawTalk(r) {
-    teamHead(r.member);
-    teamBack = openTeam;
-    teamInner.appendChild(el('p', 'why', r.status + ': ' + r.on + '. ' + r.time + '.'));
-    var talkBox = convo(function (body) { body.member = r.member; return api('/bet/steer', body); }, function (ack) {
-      talkBox.replaceWith(el('p', 'mission', ack));
-    }, 'tell ' + r.member + ' something');
-    var back = el('button', 'quiet', 'back to the team');
-    back.type = 'button';
-    back.addEventListener('click', openTeam);
-    teamInner.appendChild(talkBox);
-    teamInner.appendChild(back);
+  function useOption(o) {
+    var b = o && box().querySelector('[data-option="' + o.id + '"]');
+    if (b && !bet.busy) b.click();
   }
 
-  document.getElementById('working').addEventListener('click', openTeam);
-
-  // Esc on the team page steps back one layer, the way its own buttons do:
-  // words being typed are cancelled and the cursor leaves first, then the
-  // talk card goes back to the team, then the team closes to the card.
-  // On the card itself it does nothing. It listens on the way down, so the
-  // focused element is still the field the key was pressed in.
+  // Esc: words being typed are cancelled and the cursor leaves first; then
+  // a card with a way back takes it. On a card with none it does nothing.
   document.addEventListener('keydown', function (e) {
-    if (e.key !== 'Escape' || e.isComposing || teamBox.hidden) return;
-    e.preventDefault();
+    if (e.key !== 'Escape' || e.isComposing || !bet.shown || !document.body.classList.contains('has-card')) return;
     var field = document.activeElement;
-    if (field && (field.tagName === 'INPUT' || field.tagName === 'TEXTAREA')) {
+    if (field && field.tagName === 'INPUT') {
+      e.preventDefault();
       field.value = '';
-      // the field's own input listener drops a second tap armed for those words
-      field.dispatchEvent(new Event('input'));
       field.blur();
       return;
     }
-    teamBack();
+    var back = optionFor('back');
+    if (back) { e.preventDefault(); useOption(back); }
   }, true);
 
+  // the arrows and a sideways swipe flip the job deck, unless the owner is typing
+  document.addEventListener('keydown', function (e) {
+    var step = e.key === 'ArrowLeft' ? -1 : e.key === 'ArrowRight' ? 1 : 0;
+    var field = document.activeElement;
+    if (!step || e.isComposing || (field && field.tagName === 'INPUT')) return;
+    var o = optionFor('flip', step);
+    if (!o) return;
+    e.preventDefault();
+    useOption(o);
+  });
+  var swipe = null;
+  box().addEventListener('touchstart', function (e) { swipe = { x: e.touches[0].clientX, y: e.touches[0].clientY }; }, { passive: true });
+  box().addEventListener('touchend', function (e) {
+    if (!swipe) return;
+    var dx = e.changedTouches[0].clientX - swipe.x, dy = e.changedTouches[0].clientY - swipe.y;
+    swipe = null;
+    if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy)) useOption(optionFor('flip', dx < 0 ? 1 : -1));
+  });
+
   // the footer: how many members are really working, or the team when none are
   function drawWorking(n) {
     var btn = document.getElementById('working');
     btn.textContent = n ? n + ' working' : 'the team';
   }
 
+  // Every few seconds: the footer counts, and the card on screen. When the
+  // Mac's card has changed (a new id: its options are not the ones shown),
+  // it turns in place, unless the owner is typing or a motion is under way.
   function refresh() {
-    return api('/bet').then(function (s) {
+    return api('/card').then(function (s) {
       if (s.http !== 200) { line.set('this link stopped working. start gm phone again on the mac.', true); return; }
       drawWorking(s.team_working || 0);
+      if (s.card && bet.shown && s.card.id !== bet.shown.id && !bet.busy && !typingOnCard() && document.body.classList.contains('has-card')) {
+        bet.busy = true;
+        turnTo(s.card);
+      }
     }).catch(function () { /* the next refresh tries again */ });
   }