atris 3.73.1 → 3.74.0

package/lib/gm-phone-page.js

@@ -86,6 +86,8 @@ button { font: inherit; color: inherit; background: none; border: 0; padding: 0;
 .team .time { grid-column: 1 / -1; font-size: 17px; color: var(--text-2); }
 .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; }
+.act > .links:empty { display: none; }
 .turn { margin: 0 0 6px; font-size: 18px; line-height: 1.4; }
 .turn.you { color: var(--text-2); }
 .turn.orb { color: var(--text); }
@@ -127,12 +129,14 @@ 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; }
-/* card to card: the old card lifts and fades, the box eases to the new
-   height, and the new card settles up from a small drift */
-.bet.turning { overflow: hidden; transition: opacity 0.22s ease-in, transform 0.22s ease-in, height 0.36s cubic-bezier(0.4, 0, 0.2, 1); }
-.bet.turning.settle { transition: opacity 0.36s ease-out, transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), height 0.36s cubic-bezier(0.4, 0, 0.2, 1); }
-.bet.turn-out { opacity: 0; transform: translateY(-10px); }
-.bet.turn-in { opacity: 0; transform: translateY(10px); transition: 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
+   new height */
+.bet.ghost { position: absolute; z-index: 1; margin: 0; pointer-events: none; transition: opacity 0.2s ease-out; }
+.bet.ghost.gone { opacity: 0; }
+.bet.turning { overflow: hidden; transition: opacity 0.32s ease-out 0.08s, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1) 0.08s, height 0.36s cubic-bezier(0.4, 0, 0.2, 1); }
+.bet.turn-in { opacity: 0; transform: translateY(4px); transition: none; }
 /* leaving: a soft fade in place, never a cut */
 .bet.leave { opacity: 0; transform: none; transition: opacity 0.4s ease-out; }
 .bet h1 { margin: 0; font-size: clamp(23px, 6.2vw, 30px); line-height: 1.12; font-weight: 700; letter-spacing: -0.03em; text-align: left; }
@@ -159,6 +163,20 @@ body.has-card .foot { position: static; margin-top: 28px; }
 /* an answer to a question card */
 .choice { width: 100%; min-height: 52px; text-align: left; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); color: var(--text); font-size: 19px; }
 
+/* typing in place: the tapped answer becomes this box at its own size and
+   spot, the cursor in it, and the rest of the card dims and stays put */
+.field { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 14px; color: var(--text); }
+.field input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 76px 0 16px; border: 0; border-radius: 14px; background: transparent; color: var(--text); font: inherit; outline: none; }
+.field input::placeholder { color: var(--text-2); opacity: 1; }
+.field:focus-within { border-color: var(--text-2); }
+.field .send { position: absolute; top: 0; right: 0; bottom: 0; min-width: 64px; padding: 0 14px; color: var(--text-2); font-size: 17px; text-decoration: none; }
+.sayline .field input { padding: 0 76px; text-align: center; }
+/* a chosen answer holds its spot with an amber edge, and the card takes no taps */
+.choice.chosen, .option.chosen, .field.chosen { border-color: var(--amber); background: rgba(255, 140, 66, 0.1); }
+.chosen .send { visibility: hidden; }
+.bet.holding { pointer-events: none; }
+.muted { opacity: 0.35; transition: opacity 0.2s ease; }
+
 @media (prefers-reduced-motion: reduce) {
   .lava .tx, .lava .ty, .lava .blob { animation: none !important; }
   .bet { transform: none; transition: opacity 0.2s linear; }
@@ -175,7 +193,7 @@ body.has-card .foot { position: static; margin-top: 28px; }
   <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>
 </main>
-<div class="lava" id="lava" role="button" tabindex="-1" aria-label="the atris orb. tap for the next idea">
+<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>
   <div class="tx" style-vars="18%,12.6s,-7.2s"><div class="ty" style-vars="15%,7.2s,-4.7s"><div class="blob b2 rev" spin-vars="48s,45deg"></div></div></div>
   <div class="tx" style-vars="12%,7.2s,-6.4s"><div class="ty" style-vars="18%,10.1s,-9.9s"><div class="blob b3" spin-vars="57.6s,90deg"></div></div></div>
@@ -624,7 +642,7 @@ 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 };
+  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
   var AFTER_MS = 1500;
 
@@ -668,7 +686,7 @@ body.has-card .foot { position: static; margin-top: 28px; }
     box.textContent = '';
     var j = s.job;
     box.appendChild(el('h1', null, j.what));
-    box.appendChild(el('p', 'why', j.why));
+    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');
@@ -677,9 +695,11 @@ body.has-card .foot { position: static; margin-top: 28px; }
         api('/bet/yes', { confirm: true }).then(function (r) { moveOn(r.ack || r.message || 'sent'); });
       });
       act.appendChild(yes);
-      act.appendChild(el('div', 'links', 'or tap the orb for the next one'));
     } else if (s.kind === 'wait') {
-      act.appendChild(el('div', 'links', 'or tap the orb for the next one'));
+      // 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';
@@ -693,6 +713,31 @@ body.has-card .foot { position: static; margin-top: 28px; }
     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);
+  }
+
   // no bet was ready: one question, then what is going on and why the answer matters
   function drawQuestionCard(s) {
     var box = document.getElementById('bet');
@@ -705,48 +750,207 @@ body.has-card .foot { position: static; margin-top: 28px; }
       var b = el('button', 'choice', c.label);
       b.type = 'button';
       b.addEventListener('click', function () {
+        if (bet.busy) return;
         buzz();
-        if (c.other) { ownAnswer(act, c); return; }
-        act.querySelectorAll('button').forEach(function (x) { x.disabled = true; });
-        api('/bet/answer', { choice: c.id }).then(function (r) {
-          if (r.ok) { moveOn(r.ack); return; }
-          act.replaceWith(el('p', 'mission', r.message || 'that did not go through'));
-        });
+        if (c.other) { typeHere(b, c.label, 60, function (text, field) { answer(field, { choice: 'other', text: text }); }); return; }
+        answer(b, { choice: c.id });
       });
       act.appendChild(b);
     });
-    act.appendChild(el('div', 'links', 'or tap the orb for the next one'));
+    // a quiet line under the answers, empty until an answer does not go through
+    act.appendChild(el('div', 'links'));
     box.appendChild(act);
     box.appendChild(sayBox());
   }
 
-  // "something else": the owner's own words, one box and one tap to save
-  function ownAnswer(act, c) {
-    var input = el('input', 'say');
+  // ---- 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 }; }
+
+  // every answer 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));
+    });
+  }
+
+  // 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
+  function hold(spot) {
+    var box = document.getElementById('bet');
+    dimOthers(spot);
+    spot.classList.add('chosen');
+    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
+  // 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');
+    // its exact height, to the subpixel, so nothing under it moves
+    field.style.height = btn.getBoundingClientRect().height + 'px';
+    var input = el('input');
     input.type = 'text';
-    input.maxLength = 60;
-    input.setAttribute('aria-label', c.label);
-    var save = el('button', 'pill', 'save');
-    save.type = 'button';
-    var go = function () {
+    input.maxLength = maxLength;
+    input.placeholder = placeholder;
+    input.enterKeyHint = 'send';
+    input.setAttribute('aria-label', placeholder);
+    var send = el('button', 'send', 'send');
+    send.type = 'button';
+    var submit = function () {
       var text = input.value.trim();
-      if (!text) return;
-      save.disabled = true;
-      api('/bet/answer', { choice: 'other', text: text }).then(function (r) {
-        if (r.ok) { moveOn(r.ack); return; }
-        save.disabled = false;
-        input.value = '';
-        input.placeholder = r.message || 'that did not go through';
-      });
+      if (text && !bet.busy) sent(text, field);
     };
-    save.addEventListener('click', go);
-    input.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); go(); } });
-    act.textContent = '';
-    act.appendChild(input);
-    act.appendChild(save);
+    // 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(); });
+    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;
+      field.replaceWith(btn);
+      dimOthers(null);
+    });
+    field.appendChild(input);
+    field.appendChild(send);
+    btn.replaceWith(field);
+    dimOthers(field);
     input.focus();
   }
 
+  // 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
+  // works on the plain http of the wifi link, where randomUUID does not.
+  function sendId(spot, text) {
+    if (spot.sendText !== text) {
+      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);
+    }
+    return spot.sendId;
+  }
+
+  function say(spot, body) {
+    body.card = shownCard();
+    body.send = sendId(spot, body.text);
+    var heldAt = hold(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) {
+    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;
+    box.appendChild(el('h1', null, r.stay ? r.reply : (r.message || 'that did not go through')));
+    if (own) box.appendChild(own);
+    var act = el('div', 'act answers');
+    if (r.stay) (r.suggestions || []).forEach(function (sug) { 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 }));
+    }
+    box.appendChild(act);
+    box.appendChild(sayBox());
+  }
+
   // the owner's own number, once a week: one box and one tap to save
   function drawReportCard(s) {
     var box = document.getElementById('bet');
@@ -774,7 +978,6 @@ body.has-card .foot { position: static; margin-top: 28px; }
     input.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); go(); } });
     act.appendChild(input);
     act.appendChild(save);
-    act.appendChild(el('div', 'links', 'or tap the orb for the next one'));
     box.appendChild(act);
   }
 
@@ -817,9 +1020,10 @@ body.has-card .foot { position: static; margin-top: 28px; }
       reply.hidden = false;
       reply.textContent = '\u2026';
       extra.textContent = '';
-      var body = { text: text };
+      // 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).then(function (r) {
+      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;
@@ -844,7 +1048,11 @@ body.has-card .foot { position: static; margin-top: 28px; }
           extra.appendChild(keep);
           return;
         }
-        reply.textContent = r.message || 'that did not go through';
+        // 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 () {
@@ -862,26 +1070,22 @@ body.has-card .foot { position: static; margin-top: 28px; }
     return wrap;
   }
 
-  // a quiet line under every card: tap it for one box. 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
+  // 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 () {
-      var box = sayConvo();
-      wrap.replaceWith(box);
-      box.querySelector('input').focus();
+      if (bet.busy) return;
+      typeHere(open, 'say something', 280, function (text, field) { say(field, { text: text }); });
     });
     wrap.appendChild(open);
     return wrap;
   }
 
-  function sayConvo() {
-    return convo(function (body) { return api('/bet/say', body); }, moveOn, 'say something');
-  }
-
   // two or three ideas side by side: one tap picks one and opens its full card
   function drawChoiceCard(s) {
     var box = document.getElementById('bet');
@@ -894,17 +1098,17 @@ body.has-card .foot { position: static; margin-top: 28px; }
       b.appendChild(el('span', 't', o.title));
       b.appendChild(el('span', 'w', o.why));
       b.addEventListener('click', function () {
+        if (bet.busy) return;
         buzz();
-        list.querySelectorAll('button').forEach(function (x) { x.disabled = true; });
+        var heldAt = hold(b);
         api('/bet/pick', { id: o.id }).then(function (r) {
-          if (r.http === 200 && r.bet) { bet.busy = true; turn(r); return; }
-          tapOrb(false);
-        });
+          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(el('div', 'links', 'or tap the orb for the next one'));
     box.appendChild(sayBox());
   }
 
@@ -933,13 +1137,24 @@ body.has-card .foot { position: static; margin-top: 28px; }
         return;
       }
       bet.armed = false;
-      s.status = 'starting'; drawBetCard(s);
-      api('/bet/do', { confirm: true }).then(function (r) {
+      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();
-        if (r && r.ok) setTimeout(function () { tapOrb(false); }, AFTER_MS);
+        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';
@@ -974,7 +1189,7 @@ body.has-card .foot { position: static; margin-top: 28px; }
     drawBetCard(s);
     document.body.classList.add('has-card');
     box.hidden = false;
-    box.classList.remove('leave');
+    box.classList.remove('leave', 'holding');
     box.classList.toggle('quick', Boolean(fast));
     if (!animate) { box.classList.add('up'); measured(); return; }
     box.classList.remove('up');
@@ -1035,39 +1250,53 @@ body.has-card .foot { position: static; margin-top: 28px; }
     return Boolean((s.bet || s.job || s.question || s.choice || s.report) && (s.status === 'ready' || s.status === 'started' || s.status === 'starting'));
   }
 
-  // Card to card: one calm turn in place. The small orb stays where it is.
-  // The box holds its height while the old card lifts and fades for
-  // TURN_OUT_MS, then the new card settles up from DRIFT below over
-  // TURN_IN_MS while the box eases to its new height. No layout jump.
-  var TURN_OUT_MS = 220, TURN_IN_MS = 360, DRIFT = 10;
+  // 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.
+  var TURN_IN_MS = 320, DRIFT = 4;
   function turn(s) {
+    crossfade(function () { bet.last = s; bet.drawn = s.id; drawBetCard(s); });
+  }
+
+  // draw() puts the next card in the box
+  function crossfade(draw) {
     var box = document.getElementById('bet');
-    if (reduced) { box.style.minHeight = ''; bet.last = s; bet.drawn = s.id; drawBetCard(s); bet.busy = false; measured(); return; }
+    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 = '';
-    box.classList.remove('quick', 'settle');
-    box.classList.add('turning', 'turn-out');
+    var ghost = box.cloneNode(true);
+    ghost.removeAttribute('id');
+    ghost.classList.remove('quick', 'turning', 'turn-in');
+    ghost.classList.add('up', 'ghost');
+    ghost.setAttribute('aria-hidden', 'true');
+    ghost.inert = true;
+    var r = box.getBoundingClientRect(), p = box.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';
+    ghost.classList.add('gone');
     setTimeout(function () {
-      bet.last = s;
-      bet.drawn = s.id;
-      drawBetCard(s);
-      box.style.height = 'auto';
-      var to = box.offsetHeight;
-      box.style.height = from + 'px';
-      box.classList.remove('turning', 'turn-out');
-      box.classList.add('turn-in');
-      void box.offsetHeight;
-      box.classList.add('turning', 'settle');
-      box.classList.remove('turn-in');
-      box.style.height = to + 'px';
-      setTimeout(function () {
-        box.classList.remove('turning', 'settle');
-        box.style.height = '';
-        bet.busy = false;
-        measured();
-      }, TURN_IN_MS + 20);
-    }, TURN_OUT_MS);
+      ghost.remove();
+      box.classList.remove('turning');
+      box.style.height = '';
+      bet.busy = false;
+      measured();
+    }, 80 + TURN_IN_MS + 20);
   }
 
   // one tap: buzz at once and ask the server for the next card. From the
@@ -1075,18 +1304,32 @@ body.has-card .foot { position: static; margin-top: 28px; }
   function tapOrb(sharper) {
     if (bet.busy) return;
     buzz();
+    think(sharper, 0);
+  }
+
+  // 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) {
     bet.busy = true;
     bet.armed = false;
-    bet.tapAt = performance.now();
+    bet.tapAt = heldAt || performance.now();
     document.body.removeAttribute('data-reveal-ms');
     var onCard = document.body.classList.contains('has-card');
-    api('/bet/think', { sharper: Boolean(sharper) }).then(function (s) {
-      if (s.http !== 200) { bet.busy = false; orb.relax(); line.set('that did not go through. tap to try again', true); return; }
+    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);
-    });
+    }, failed);
   }
 
   function loadBet() {
@@ -1117,12 +1360,32 @@ body.has-card .foot { position: static; margin-top: 28px; }
     });
   }
 
+  // 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.
+  function goHome() {
+    if (bet.busy) return;
+    buzz();
+    bet.busy = true;
+    bet.armed = false;
+    dissolve(function () { bet.busy = false; line.set('tap to think', 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();
+  }
+
   var canvas = document.getElementById('orb');
   var lavaTap = document.getElementById('lava');
-  [canvas, lavaTap].forEach(function (node) {
-    node.addEventListener('click', function () { tapOrb(false); });
-    node.addEventListener('keydown', function (e) {
-      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); tapOrb(false); }
+  [[canvas, tapBig], [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](); }
     });
   });
 
@@ -1130,14 +1393,19 @@ body.has-card .foot { position: static; margin-top: 28px; }
 
   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', function () { teamBox.hidden = true; });
+    close.addEventListener('click', closeTeam);
     head.appendChild(close);
     teamInner.appendChild(head);
   }
@@ -1166,6 +1434,7 @@ body.has-card .foot { position: static; margin-top: 28px; }
   // 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));
@@ -1179,6 +1448,25 @@ body.has-card .foot { position: static; margin-top: 28px; }
 
   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.
+  document.addEventListener('keydown', function (e) {
+    if (e.key !== 'Escape' || e.isComposing || teamBox.hidden) return;
+    e.preventDefault();
+    var field = document.activeElement;
+    if (field && (field.tagName === 'INPUT' || field.tagName === 'TEXTAREA')) {
+      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();
+  }, true);
+
   // the footer: how many members are really working, or the team when none are
   function drawWorking(n) {
     var btn = document.getElementById('working');