atris 3.74.7 → 3.74.9

package/lib/gm-phone-page.js

@@ -13,8 +13,12 @@
 // then settles small at the top and the card fades up. Tap again and the
 // card dissolves, the lava melts back into the sphere, and the next bet plays.
 // Bets wait in a queue on the Mac, so a tap rarely waits; when it does, the
-// spiral follows the real progress. Once a card is up nothing moves. The
-// footer is only the count of jobs the team is working on.
+// spiral follows the real progress. Once a card is up nothing moves, but
+// while the next card is on its way the dots never stop: after an answer
+// they swarm in the sphere until it lands, and on the calm line (writing
+// your next idea) the sphere stays above the card, swarming, its box open
+// for a note, until the idea grows out of the dots. The footer is only the
+// count of jobs the team is working on.
 //
 // Every card is big type in two parts: what is going on, and why it matters
 // to the business. Nothing about how work is run or checked reaches the page.
@@ -70,7 +74,10 @@ 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; }
+.foot { position: absolute; left: 0; right: 0; bottom: max(20px, env(safe-area-inset-bottom)); text-align: center; transition: opacity 0.3s ease-out 0.1s; }
+/* while a card moves the footer steps aside, so it never jumps between the
+   bottom of the screen and the end of a card; it comes back at rest */
+body[data-busy]:not([data-in-place]) .foot { opacity: 0; transition: opacity 0.15s ease-in; }
 /* 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; }
@@ -150,7 +157,7 @@ body.has-card .foot { position: static; margin-top: 28px; }
 .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 { transform: translateY(4px); transition-duration: 0.3s, 0.38s; }
 .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
@@ -201,11 +208,37 @@ body.has-card .foot { position: static; margin-top: 28px; }
 .bet h1.said { font-size: 20px; line-height: 1.4; font-weight: 400; letter-spacing: 0; }
 .bet.holding { pointer-events: none; }
 .muted { opacity: 0.35; transition: opacity 0.2s ease; }
+/* after an act the card fades all the way before it leaves the page, never cut mid fade */
+.bet.leave.fast { transition: opacity 0.2s ease-in-out; }
+
+/* ---- the calm line: the sphere stays, a little smaller and higher, its dots
+   moving the whole time. The card under it takes no room of its own, so the
+   sphere never jumps when the card comes or goes; it glides. ---- */
+.stage { transform-origin: 50% 0; transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); }
+body.has-card.waiting .screen { justify-content: center; padding-top: max(24px, env(safe-area-inset-top)); }
+body.has-card.waiting .stage { display: block; transform: translateY(var(--wait-dy, 0px)) scale(var(--wait-k, 1)); }
+body.has-card.waiting .line { display: block; }
+body.has-card.waiting .foot { position: absolute; margin-top: 0; }
+body.waiting .bet { position: absolute; left: 24px; right: 24px; width: auto; top: var(--wait-top, 62%); padding-bottom: 76px; }
+.bet.wait-in { transform: translateY(8px); transition: opacity 0.4s ease-out 0.28s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.28s; }
+.bet.wait-in.up { transform: none; }
+.bet[data-kind="wait"] h1 { text-align: center; }
+.waitstep { margin: 10px 0 0; min-height: 1.5em; text-align: center; color: var(--text-2); font-size: 17px; transition: opacity 0.26s ease; }
+.waitstep.out { opacity: 0; }
+.waittime { display: block; min-height: 1.5em; text-align: center; color: var(--text-3); font-size: 17px; }
+.waitnotes { margin: 6px 0 0; overflow: hidden; transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+.waitnotes .turn { text-align: center; transition: opacity 0.3s ease-out; }
+.waitnotes .turn.fresh { opacity: 0; }
+.field.stay { height: 52px; }
 
 @media (prefers-reduced-motion: reduce) {
   .lava .tx, .lava .ty, .lava .blob { animation: none !important; }
   .bet { transform: none; transition: opacity 0.2s linear; }
   .line { transition: none; }
+  /* no travel and no swarm: every card change is a plain fade */
+  .stage, .waitstep, .waitnotes, .waitnotes .turn { transition: none; }
+  .bet.quick, .bet.acted, .bet.leave, .bet.leave.fast, .bet.wait-in { transform: none; transition: opacity 0.2s linear; }
+  .lava { transition: opacity 0.2s linear; }
 }
 </style>
 </head>
@@ -275,7 +308,11 @@ body.has-card .foot { position: static; margin-top: 28px; }
         setTimeout(function () { busy = false; next(); }, 650);
       }, 280);
     }
-    return { set: function (text, bad) { want = { text: text, bad: Boolean(bad) }; next(); } };
+    return {
+      set: function (text, bad) { want = { text: text, bad: Boolean(bad) }; next(); },
+      // the page just opened: no fade to wait out, so the next line comes at once
+      clear: function () { if (busy) { line.set('', false); return; } want = null; node.textContent = ''; node.classList.remove('bad', 'out'); },
+    };
   })();
 
   // ---- the orb: StippleOrb (tone dark) and LetterOrb's tap, ported 1:1 -----------
@@ -305,10 +342,26 @@ body.has-card .foot { position: static; margin-top: 28px; }
     // 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;
+    // is in. The card fades all the way while the small orb glides into the
+    // sphere, the dots spiral in at ACT_PACE, and the next card grows out of
+    // the point: the lava swells to ACT_BLOOM and is already drifting up as
+    // it does, so its size and place never stop or snap on the way.
+    var ACT_LEAVE_MS = 220, ACT_GLIDE_MS = 260, ACT_BEAT_MS = 100, ACT_PACE = 0.28, ACT_GROW_MS = 140, ACT_SETTLE_MS = 420, ACT_BLOOM = 0.56;
     var quick = false;
+    // the swarm: while the next card is on its way the dots never stop. The
+    // sphere turns at SWARM_SPIN and every dot wanders a slow loop of its
+    // own, WANDER of the radius, springing after it. In and out of it the
+    // motion eases over about a second, and it ends the moment a card lands.
+    var IDLE_SPIN = 0.15, SWARM_SPIN = 0.5, WANDER = 0.1, SWARM_EASE = 0.04;
+    var swarmK = 0, spin = IDLE_SPIN, clock = 0;
+    // when a spiral starts, each dot keeps the speed it had and lets it fade
+    // at CARRY a frame, so the dots turn inward without a stop
+    var CARRY = 0.82;
+    // what the dots did on the last frame, kept on the canvas so the motion can be
+    // measured, and ms: how much of the dots' own clock that frame was, which is
+    // at most 50ms however long the frame took
+    var stats = { frame: 0, mode: 'idle', step: 0, mean: 0, ms: 0 };
+    canvas.__orb = stats;
     // 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
@@ -360,7 +413,11 @@ body.has-card .foot { position: static; margin-top: 28px; }
       for (var i = 0; i < count; i++) {
         var gx = gauss(), gy = gauss(), gz = gauss();
         var n = Math.hypot(gx, gy, gz) || 1;
-        dots.push({ x: gx / n, y: gy / n, z: gz / n, sx: cx, sy: cy, vx: 0, vy: 0, r: 0.4 + Math.random() * 0.7, bx: 0, by: 0, dl: 0 });
+        dots.push({
+          x: gx / n, y: gy / n, z: gz / n, sx: cx, sy: cy, vx: 0, vy: 0, r: 0.4 + Math.random() * 0.7, bx: 0, by: 0, dl: 0, kx: 0, ky: 0,
+          // its own slow loop in the swarm
+          f1: 0.5 + Math.random() * 0.8, f2: 0.5 + Math.random() * 0.8, p1: Math.random() * 6.283, p2: Math.random() * 6.283,
+        });
       }
     }
 
@@ -372,7 +429,8 @@ body.has-card .foot { position: static; margin-top: 28px; }
       var cosA = Math.cos(angle), sinA = Math.sin(angle);
       for (var i = 0; i < dots.length; i++) {
         var d = dots[i];
-        if (fromHere) { d.bx = d.sx; d.by = d.sy; } else { d.bx = cx + (d.x * cosA + d.z * sinA) * R; d.by = cy + d.y * R; }
+        if (fromHere) { d.bx = d.sx; d.by = d.sy; } else { d.bx = cx + (d.x * cosA + d.z * sinA) * R; d.by = cy + d.y * R; d.vx = 0; d.vy = 0; }
+        d.kx = 0; d.ky = 0;
         var len = Math.hypot(d.bx - cx, d.by - cy);
         d.dl = (1 - Math.min(1, len / R)) * 0.28 + Math.random() * 0.05;
       }
@@ -384,7 +442,12 @@ body.has-card .foot { position: static; margin-top: 28px; }
       var dt = Math.min(0.05, (now - (lastT || now)) / 1000);
       lastT = now;
       ctx.clearRect(0, 0, w, h);
-      if (!reduced && mode === 'idle') angle += dt * 0.15;
+      var swarming = mode === 'swarm' && !reduced;
+      var toward = 1 - Math.pow(1 - SWARM_EASE, dt * 60);
+      swarmK += ((swarming ? 1 : 0) - swarmK) * toward;
+      spin += ((swarming ? SWARM_SPIN : IDLE_SPIN) - spin) * toward;
+      clock += dt;
+      if (!reduced && (mode === 'idle' || mode === 'swarm')) angle += dt * spin;
       wave.age += dt;
       light.x += (light.tx - light.x) * 0.06;
       light.y += (light.ty - light.y) * 0.06;
@@ -400,13 +463,19 @@ body.has-card .foot { position: static; margin-top: 28px; }
         else age += (ageTo - age) * 0.05;
       }
       var cosA = Math.cos(angle), sinA = Math.sin(angle);
+      var most = 0, sum = 0, wander = WANDER * R * swarmK;
       for (var i = 0; i < dots.length; i++) {
         var d = dots[i];
         var fade = 1, shrink = 1;
+        var x0 = d.sx, y0 = d.sy;
         var rx = d.x * cosA + d.z * sinA;
         var rz = -d.x * sinA + d.z * cosA;
-        if (mode === 'idle') {
+        if (mode === 'idle' || mode === 'swarm') {
           var homeX = cx + rx * R, homeY = cy + d.y * R;
+          if (wander > 0.05) {
+            homeX += Math.sin(clock * d.f1 + d.p1) * wander;
+            homeY += Math.sin(clock * d.f2 + d.p2) * wander;
+          }
           if (waveOn) {
             var wx = homeX - wave.x, wy = homeY - wave.y;
             var wd = Math.sqrt(wx * wx + wy * wy) || 1;
@@ -437,11 +506,14 @@ body.has-card .foot { position: static; margin-top: 28px; }
           var e = t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
           var ox = (d.bx - cx) * (1 - e), oy = (d.by - cy) * (1 - e);
           var turn = e * 1.5;
-          d.sx = cx + ox * Math.cos(turn) - oy * Math.sin(turn);
-          d.sy = cy + ox * Math.sin(turn) + oy * Math.cos(turn);
+          // the speed it had carries on and fades, then the spiral has it
+          d.kx += d.vx; d.ky += d.vy; d.vx *= CARRY; d.vy *= CARRY;
+          d.sx = cx + ox * Math.cos(turn) - oy * Math.sin(turn) + d.kx * (1 - e);
+          d.sy = cy + ox * Math.sin(turn) + oy * Math.cos(turn) + d.ky * (1 - e);
           fade = 1 - Math.pow(Math.max(0, (e - 0.8) / 0.2), 1.5);
           shrink = 1 - 0.35 * e;
         }
+        if (i < 64) { var stepped = Math.max(Math.abs(d.sx - x0), Math.abs(d.sy - y0)); if (stepped > most) most = stepped; sum += stepped; }
         // front dots are lit; the back half is a dim ghost. amber in shadow, cream where lit.
         var lit = rx * light.x + d.y * light.y + rz * lz;
         var front = rz > 0;
@@ -453,6 +525,7 @@ body.has-card .foot { position: static; margin-top: 28px; }
         ctx.arc(d.sx, d.sy, d.r * (front ? 0.6 + l * 0.7 : 0.6) * shrink, 0, Math.PI * 2);
         ctx.fill();
       }
+      stats.frame += 1; stats.mode = mode; stats.step = most; stats.mean = sum / Math.min(64, dots.length || 1); stats.ms = dt * 1000;
       if (mode === 'pull') {
         // where the dots land: one bright point that swells until the lava is born
         var arrived = Math.min(1, Math.max(0, (age - 0.3) / 0.7));
@@ -463,7 +536,8 @@ body.has-card .foot { position: static; margin-top: 28px; }
         var left = 1 - (now - bridgeAt) / BRIDGE_MS;
         if (left > 0) point(left, 1); else bridgeAt = 0;
       }
-      if (mode === 'card' || (reduced && mode === 'idle')) { raf = 0; return; }
+      // still once a card is up, and under reduced motion the sphere is drawn once and holds
+      if (mode === 'card' || (reduced && (mode === 'idle' || mode === 'swarm'))) { raf = 0; return; }
       raf = requestAnimationFrame(frame);
     }
 
@@ -484,7 +558,9 @@ body.has-card .foot { position: static; margin-top: 28px; }
     function start() { if (!raf) { lastT = 0; raf = requestAnimationFrame(frame); } }
     function stop() { if (raf) cancelAnimationFrame(raf); raf = 0; }
 
-    function place(s, x, y) { lava.style.transform = 'translate(' + (x - base / 2) + 'px, ' + (y - base / 2) + 'px) scale(' + s + ')'; }
+    // at: the frame time this place is for, when it is a step of a motion, kept on
+    // the lava so the motion can be measured on the clock it runs on
+    function place(s, x, y, at) { lava.style.transform = 'translate(' + (x - base / 2) + 'px, ' + (y - base / 2) + 'px) scale(' + s + ')'; lava.__at = at; }
     function restPoint() {
       var top = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--safe-top')) || 0;
       return { x: document.documentElement.clientWidth / 2, y: window.scrollY + Math.max(16, top) + 8 + REST / 2 };
@@ -496,13 +572,20 @@ body.has-card .foot { position: static; margin-top: 28px; }
     // A queued bet (the fast pace) blooms contained: the lava grows to BLOOM
     // of the smaller window side, the page never dims, and it settles.
     function grow() {
+      // fixed while it grows past the screen, so the page never scrolls sideways
+      window.scrollTo(0, 0);
       var rect = canvas.getBoundingClientRect();
       var contained = pace < 1;
       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;
+      // after an act the card comes up at the bloom's peak; any other card once the lava has settled
+      planned('bloom', growMs);
+      if (!quick) planned('settle', settleMs);
+      // the point the dots drew, where the sphere is on screen (smaller and higher on the calm line)
+      var vx = rect.left + rect.width / 2, vy = rect.top + rect.height / 2;
+      var bloom = quick ? ACT_BLOOM : BLOOM;
       var reach = contained
-        ? BLOOM * Math.min(window.innerWidth, window.innerHeight) / 2
+        ? bloom * Math.min(window.innerWidth, window.innerHeight) / 2
         : Math.hypot(Math.max(vx, window.innerWidth - vx), Math.max(vy, window.innerHeight - vy)) * 1.08;
       base = Math.round(Math.min(1000, Math.max(280, (2 * reach) / MAX_SCALE)));
       var sMax = (2 * reach) / base;
@@ -510,18 +593,19 @@ body.has-card .foot { position: static; margin-top: 28px; }
       var rest = REST / base;
       lava.style.width = base + 'px';
       lava.style.height = base + 'px';
-      // fixed while it grows past the screen, so the page never scrolls sideways
-      window.scrollTo(0, 0);
       origin = { x: vx, y: vy };
       lava.style.position = 'fixed';
+      lava.style.opacity = '0';
+      place(sMin, origin.x, origin.y);
       lava.style.visibility = 'visible';
       lava.classList.remove('still', 'alive', 'tap');
       void lava.offsetWidth;
       lava.classList.add('alive');
+      if (contained) { rise(growMs, settleMs, sMin, sMax, rest); return; }
       var t0 = performance.now();
       var step = function (now) {
         var t = Math.min(1, (now - t0) / growMs);
-        place(sMin + (sMax - sMin) * ease(t), origin.x, origin.y);
+        place(sMin + (sMax - sMin) * ease(t), origin.x, origin.y, now);
         lava.style.opacity = String(smooth(0.02, 0.22, t));
         core.style.opacity = String(1 - smooth(0.05, 0.4, t));
         dim.style.opacity = contained ? '0' : String(smooth(0.88, 1, t));
@@ -535,7 +619,7 @@ body.has-card .foot { position: static; margin-top: 28px; }
         var s0 = performance.now();
         var settle = function (n2) {
           var u = ease(Math.min(1, (n2 - s0) / settleMs));
-          place(sMax + (rest - sMax) * u, origin.x + (p.x - origin.x) * u, origin.y + (p.y - origin.y) * u);
+          place(sMax + (rest - sMax) * u, origin.x + (p.x - origin.x) * u, origin.y + (p.y - origin.y) * u, n2);
           dim.style.opacity = contained ? '0' : String(1 - smooth(0.35, 0.85, u));
           if (u < 1) { requestAnimationFrame(settle); return; }
           settled();
@@ -545,6 +629,38 @@ body.has-card .foot { position: static; margin-top: 28px; }
       requestAnimationFrame(step);
     }
 
+    // A contained bloom is one motion. The lava is born at the point and
+    // swells for growMs on a soft curve while it already drifts up, then
+    // eases down into the small orb at the top over settleMs. Its size turns at the peak with no
+    // stop, and its place moves on one curve the whole way, so nothing snaps.
+    // The card fades up under it from the peak.
+    function rise(growMs, settleMs, sMin, sMax, rest) {
+      var total = growMs + settleMs, k = growMs / total;
+      var p = restPoint();
+      var covered = false;
+      var t0 = performance.now();
+      var step = function (now) {
+        var u = Math.min(1, (now - t0) / total);
+        var s = u < k ? sMin + (sMax - sMin) * (0.5 - 0.5 * Math.cos(Math.PI * u / k)) : sMax + (rest - sMax) * ease((u - k) / (1 - k));
+        var m = ease(u);
+        place(s, origin.x + (p.x - origin.x) * m, origin.y + (p.y - origin.y) * m, now);
+        lava.style.opacity = String(smooth(0, 0.1, u));
+        core.style.opacity = String(1 - smooth(0.04, 0.5, u));
+        dim.style.opacity = '0';
+        if (!covered && u >= k) {
+          covered = true;
+          mode = 'card';
+          stop();
+          ctx.clearRect(0, 0, w, h);
+          canvas.style.visibility = 'hidden';
+          if (onBorn) onBorn('cover');
+        }
+        if (u < 1) { requestAnimationFrame(step); return; }
+        settled();
+      };
+      requestAnimationFrame(step);
+    }
+
     // the small lava orb at the top, still, and itself the next tap
     function settled() {
       var p = restPoint();
@@ -587,9 +703,11 @@ body.has-card .foot { position: static; margin-top: 28px; }
         for (var i = 0; i < dots.length; i++) { dots[i].sx = cx; dots[i].sy = cy; dots[i].vx = 0; dots[i].vy = 0; }
         pointer.inside = false;
         age = -1; timed = false; fired = false;
-        mode = 'idle';
+        // after an act the next card is on its way, so the dots come out swarming and never stop
+        mode = fast ? 'swarm' : 'idle';
         bridgeAt = reduced ? 0 : performance.now();
         start();
+        if (!reduced) planned('beat', beatMs);
         setTimeout(cb, reduced ? 0 : beatMs);
       };
       if (reduced || lava.style.visibility !== 'visible') { reform(); return; }
@@ -599,12 +717,13 @@ body.has-card .foot { position: static; margin-top: 28px; }
       lava.style.position = 'fixed';
       place(from.s, from.x, from.y);
       var sEnd = 30 / base;
+      planned('glide', glideMs);
       var t0 = performance.now();
       var step = function (now) {
         var k = Math.min(1, (now - t0) / glideMs);
-        var t = ease(k);
+        var t = fast ? 0.5 - 0.5 * Math.cos(Math.PI * k) : ease(k);
         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);
+        place(from.s + (sEnd - from.s) * t, from.x + (to.x - from.x) * t, from.y + (to.y - from.y) * t, now);
         core.style.opacity = String(smooth(0.3, 0.9, k));
         lava.style.opacity = String(1 - smooth(0.7, 1, k));
         if (k < 1) { requestAnimationFrame(step); return; }
@@ -657,6 +776,8 @@ body.has-card .foot { position: static; margin-top: 28px; }
         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));
+        // the lava is born at 1.05 on the spiral's own clock, which runs at pace
+        planned('spiral', Math.max(0, 1.05 - age) * pace * 1000);
         timed = true;
         start();
       },
@@ -675,6 +796,24 @@ body.has-card .foot { position: static; margin-top: 28px; }
         mode = 'idle';
         start();
       },
+      // the next card is on its way: the sphere is on the page and its dots keep moving
+      swarm: function () {
+        if (mode === 'card') {
+          canvas.style.visibility = 'visible';
+          measure();
+          for (var i = 0; i < dots.length; i++) { dots[i].sx = cx; dots[i].sy = cy; dots[i].vx = 0; dots[i].vy = 0; }
+          lava.classList.remove('tap', 'still', 'alive');
+          lava.style.visibility = 'hidden';
+          lava.style.opacity = '0';
+          lava.tabIndex = -1;
+          age = -1; timed = false; fired = false;
+          mode = 'swarm';
+        }
+        if (mode === 'idle') mode = 'swarm';
+        start();
+      },
+      // nothing is on its way: back to the idle drift under the pointer
+      calm: function () { if (mode === 'swarm') mode = 'idle'; start(); },
       melt: melt,
       leaveMs: reduced ? 200 : LEAVE_MS,
       // a bet is already up when the page loads: the settled orb, no motion
@@ -689,7 +828,7 @@ body.has-card .foot { position: static; margin-top: 28px; }
   // 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 };
+  var bet = { shown: null, watching: null, tapAt: 0, plan: [], waited: 0, noting: false, clock: null };
   // 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;
@@ -726,13 +865,16 @@ body.has-card .foot { position: static; margin-top: 28px; }
       if (lines.getClientRects().length > 1) title.classList.add('said');
     }
     if (card.body) b.appendChild(el('p', 'why', card.body));
+    var calm = isWait(card);
+    // the calm line: what the writer is doing now, how long it has been, and the notes typed here
+    if (calm) { b.appendChild(el('p', 'waitstep')); b.appendChild(el('span', 'waittime')); b.appendChild(el('div', 'waitnotes')); }
     // a reply keeps the title's spot; the turns so far sit quietly under it
-    if (card.thread && card.thread.length) {
+    if (!calm && 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(' · ')));
+    if (card.job && !card.table && !calm) 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));
@@ -758,6 +900,7 @@ body.has-card .foot { position: static; margin-top: 28px; }
     act.appendChild(el('p', 'links note'));
     b.appendChild(act);
     if (card.input) b.appendChild(inputLine(card.input));
+    if (calm) live(card, true);
   }
 
   // a table: one row per line, a line between every cell; an option with a
@@ -828,7 +971,9 @@ body.has-card .foot { position: static; margin-top: 28px; }
     return btn;
   }
 
-  // the card's box: a quiet line that turns into the field in its own spot
+  // the card's box: a quiet line that turns into the field in its own spot.
+  // On the calm line it is open from the start and stays open, without
+  // taking the cursor, and the words are a note for the idea being written.
   function inputLine(input) {
     var wrap = el('div', 'links sayline');
     var open = wrap.appendChild(el('button', 'quiet', input.label || 'or say something'));
@@ -837,6 +982,7 @@ body.has-card .foot { position: static; margin-top: 28px; }
       if (bet.busy) return;
       typeHere(open, input.placeholder || 'say something', input.max || 280, function (text, field) { send(field, { text: text }, null); });
     });
+    if (box().getAttribute('data-kind') === 'wait') typeHere(open, input.placeholder || 'add a note for this idea', input.max || 280, function (text, field) { sendNote(field, text); }, true);
     return wrap;
   }
 
@@ -856,9 +1002,9 @@ body.has-card .foot { position: static; margin-top: 28px; }
     var input = spot.querySelector('input');
     if (input) { input.readOnly = true; input.blur(); }
     bet.busy = true;
-    bet.tapAt = performance.now();
-    document.body.removeAttribute('data-reveal-ms');
-    return bet.tapAt;
+    var at = tapped();
+    planned('hold', HOLD_MS);
+    return at;
   }
 
   function afterHold(heldAt) {
@@ -869,10 +1015,12 @@ body.has-card .foot { position: static; margin-top: 28px; }
   // The tapped button becomes the field at its own size and spot, with the
   // 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) {
+  // stay: the calm line's box, open from the start without the cursor, and
+  // open after every send.
+  function typeHere(btn, placeholder, maxLength, sent, stay) {
     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';
+    if (stay) field.classList.add('stay'); else field.style.height = btn.getBoundingClientRect().height + 'px';
     var input = el('input');
     input.type = 'text';
     input.maxLength = maxLength;
@@ -883,7 +1031,7 @@ body.has-card .foot { position: static; margin-top: 28px; }
     go.type = 'button';
     var submit = function () {
       var text = input.value.trim();
-      if (text && !bet.busy) sent(text, field);
+      if (text && !bet.busy && !bet.noting) sent(text, field);
     };
     // a press on send keeps the cursor in the field, so it never closes first
     go.addEventListener('mousedown', function (e) { e.preventDefault(); });
@@ -892,13 +1040,14 @@ body.has-card .foot { position: static; margin-top: 28px; }
       if (e.key === 'Enter') { e.preventDefault(); submit(); }
     });
     input.addEventListener('blur', function () {
-      if (input.value.trim() || field.classList.contains('chosen') || !field.isConnected) return;
+      if (stay || input.value.trim() || field.classList.contains('chosen') || !field.isConnected) return;
       field.replaceWith(btn);
       dimOthers(null);
     });
     field.appendChild(input);
     field.appendChild(go);
     btn.replaceWith(field);
+    if (stay) return field;
     dimOthers(field);
     input.focus();
     return field;
@@ -936,9 +1085,10 @@ body.has-card .foot { position: static; margin-top: 28px; }
     var heldAt = hold(spot);
     var answer = api('/act', body).catch(offline);
     if (option && IN_PLACE.indexOf(option.action) >= 0) {
+      document.body.setAttribute('data-in-place', '');
       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; }
+        if (!r.ok || !r.card) { bet.busy = false; document.body.removeAttribute('data-in-place'); unsent(from, r, body.text, option); return; }
         turnTo(r.card);
       });
       return;
@@ -949,19 +1099,23 @@ body.has-card .foot { position: static; margin-top: 28px; }
   function flow(answer, from, typed, option) {
     var landed = null;
     var sphere = false;
-    var lineAt = 0;
+    var lineAt = 0, waitFrom = 0;
     var land = function () {
+      // the sphere is ready before the answer is in: it waits from now
+      if (sphere && !landed) waitFrom = performance.now();
       if (!landed || !sphere) return;
+      if (waitFrom) bet.waited += performance.now() - waitFrom;
       var r = landed;
       landed = null;
       var wait = r.ack && lineAt ? Math.max(0, AFTER_MS - (performance.now() - lineAt)) : 0;
+      if (wait) planned('line', wait);
       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; }
+        // nothing more to show: the sphere stays, with its line, and its dots settle into the idle drift
+        if (r.ok && (r.home || !r.card)) { bet.busy = false; bet.shown = null; orb.calm(); 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 (!then) { bet.busy = false; orb.calm(); 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);
@@ -975,27 +1129,50 @@ body.has-card .foot { position: static; margin-top: 28px; }
   }
 
   // the card fades in place while the small orb glides down and becomes the
-  // sphere; the card leaves the page once it has faded
+  // sphere; the card leaves the page once it has faded all the way. From the
+  // calm line the sphere is already there: its words fade and it glides home.
   function leave(then, fast) {
+    if (waiting()) { leaveWait(then, fast); return; }
     var b = box();
     var to = sphereSpot();
     b.classList.remove('quick', 'acted', 'up');
     b.classList.add('leave');
+    b.classList.toggle('fast', Boolean(fast));
     var swap = function () {
       b.style.minHeight = '';
       b.hidden = true;
-      b.classList.remove('leave', 'holding');
+      b.classList.remove('leave', 'fast', 'holding');
       document.body.classList.remove('has-card', 'wide');
       window.scrollTo(0, 0);
     };
-    if (reduced) { swap(); orb.melt(then, to, function () {}, fast); return; }
+    // reduced motion: no travel; the card and the small orb fade, then the sphere is there
+    if (reduced) {
+      document.getElementById('lava').style.opacity = '0';
+      planned('leave', 200);
+      setTimeout(function () { swap(); stageFade(); orb.melt(then, to, function () {}, fast); }, 200);
+      return;
+    }
     orb.melt(then, to, swap, fast);
   }
 
-  // from the sphere: the dots spiral in and the card blooms where they land
+  // under reduced motion the sphere never travels: it fades in where it now sits
+  function stageFade() {
+    if (!reduced) return;
+    var stage = document.getElementById('stage');
+    stage.style.transition = 'none';
+    stage.style.opacity = '0';
+    void stage.offsetWidth;
+    stage.style.transition = 'opacity 0.2s linear';
+    stage.style.opacity = '';
+  }
+
+  // from the sphere: the dots spiral in and the card grows out of the point.
+  // The calm line is not a card that blooms: the sphere stays and its dots keep moving.
   function spiralTo(card, after) {
     line.set('', false);
-    if (reduced) { orb.settled(); showCard(card, false); bet.busy = false; if (after) after(); return; }
+    if (isWait(card)) { enterWait(card); if (after) after(); return; }
+    // reduced motion: no spiral; the card fades in where it goes
+    if (reduced) { orb.settled(); showCard(card, true); 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(); }
@@ -1012,6 +1189,9 @@ body.has-card .foot { position: static; margin-top: 28px; }
     // 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 calm line's box is open already: the words go back into it
+    var openBox = !option && box().querySelector('.sayline .field.stay input');
+    if (openBox) { openBox.value = 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;
@@ -1021,24 +1201,49 @@ body.has-card .foot { position: static; margin-top: 28px; }
   }
 
   // ---- showing a card ---------------------------------------------------------------------
-  // the time from the tap to the card fully on screen, kept on the page so
-  // the speed can be measured
+  // The time from the tap to the card fully on screen, kept on the page so
+  // the speed can be measured. data-reveal-ms is the clock. data-reveal-plan
+  // is each step of the motion in order with the length it is set to take,
+  // and data-reveal-waited-ms is how long the sphere waited on the Mac's
+  // answer, so late frames on a busy machine are told apart from the motion.
+  var REVEAL = ['data-reveal-ms', 'data-reveal-plan', 'data-reveal-waited-ms'];
+  function tapped() {
+    bet.tapAt = performance.now();
+    bet.plan = [];
+    bet.waited = 0;
+    REVEAL.forEach(function (a) { document.body.removeAttribute(a); });
+    return bet.tapAt;
+  }
+  function planned(name, ms) { if (bet.tapAt) bet.plan.push(name + ' ' + Math.round(ms)); }
   function measured() {
-    if (bet.tapAt) document.body.setAttribute('data-reveal-ms', String(Math.round(performance.now() - bet.tapAt)));
+    if (bet.tapAt) {
+      document.body.setAttribute('data-reveal-plan', bet.plan.join(', '));
+      document.body.setAttribute('data-reveal-waited-ms', String(Math.round(bet.waited)));
+      document.body.setAttribute('data-reveal-ms', String(Math.round(performance.now() - bet.tapAt)));
+    }
     bet.tapAt = 0;
   }
+  // how long a card's own fade up is set to take, read from its style
+  function fadeMs(n) {
+    var s = getComputedStyle(n);
+    var i = Math.max(0, s.transitionProperty.split(', ').indexOf('opacity'));
+    var at = function (list) { var v = list.split(', '); return (parseFloat(v[i % v.length]) || 0) * 1000; };
+    return at(s.transitionDelay) + at(s.transitionDuration);
+  }
 
   // fast: the quick fade from the big orb; act: the short one after an act
   function showCard(card, animate, fast, act) {
+    if (isWait(card)) { enterWait(card, !animate); return; }
     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.remove('leave', 'fast', 'holding', 'wait-in');
     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.remove('waiting');
     document.body.classList.add('has-card');
     b.hidden = false;
     draw(card);
@@ -1047,9 +1252,224 @@ body.has-card .foot { position: static; margin-top: 28px; }
     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'); planned('fade', fadeMs(b)); });
+  }
+
+  // ---- the calm line: the dots keep moving while the next idea is written -----------------
+  // The sphere stays on the page, a little smaller and higher, and its dots
+  // swarm. The card sits under it with what the writer is doing now, and its
+  // box is open: words typed there are a note for the idea being written,
+  // and the card stays. When the idea lands it grows out of the dots. A tap
+  // on the dots goes back to the big orb, as the small orb does on a card.
+  function isWait(card) { return Boolean(card && card.kind === 'wait'); }
+  function waiting() { return document.body.classList.contains('waiting'); }
+  // the calm line is one card while its words change, under any stamp
+  function sameCard(a, b) { return Boolean(a && b && (a.id === b.id || (isWait(a) && isWait(b) && String(a.id).split('#')[0] === String(b.id).split('#')[0]))); }
+
+  // the smaller sphere's place: at most 300px, and high enough that the card
+  // under it has WAIT_ROOM. It is read from the sphere's own place in the
+  // layout, which the calm line keeps and a transform never moves.
+  var WAIT_ROOM = 250;
+  function placeWait(animate) {
+    var stage = document.getElementById('stage');
+    var body = document.body;
+    var hidden = !stage.offsetHeight;
+    if (hidden) body.classList.add('has-card', 'waiting');
+    var screenTop = document.getElementById('screen').getBoundingClientRect().top;
+    var h = stage.offsetHeight || 1, top0 = screenTop + stage.offsetTop;
+    if (hidden) body.classList.remove('waiting');
+    var k = Math.min(1, 300 / h, 0.62 * Math.min(window.innerWidth, window.innerHeight) / h);
+    var top = Math.max(24, (window.innerHeight - (k * h + WAIT_ROOM)) / 2);
+    var s = body.style;
+    s.setProperty('--wait-k', k.toFixed(4));
+    s.setProperty('--wait-dy', Math.round(top - top0) + 'px');
+    s.setProperty('--wait-top', Math.round(top + k * h + 6 - screenTop) + 'px');
+    if (animate) return;
+    stage.style.transition = 'none';
+    requestAnimationFrame(function () { requestAnimationFrame(function () { stage.style.transition = ''; }); });
+  }
+
+  // a turned phone: the calm line's sphere and card find their place again
+  window.addEventListener('resize', function () { if (waiting()) placeWait(false); });
+
+  // atOnce: the page opened on it, so it is simply there
+  function enterWait(card, atOnce) {
+    var b = box();
+    var was = waiting() && !b.hidden;
+    bet.shown = card;
+    if (atOnce) line.clear(); else line.set('', false);
+    orb.swarm();
+    if (!was) { placeWait(!atOnce && !reduced); stageFade(); }
+    b.classList.remove('leave', 'fast', 'holding', 'quick', 'acted', 'up', 'wait-in');
+    document.body.classList.add('has-card', 'waiting');
+    document.getElementById('orb').setAttribute('aria-label', 'the atris orb, writing your next idea. tap to go back to the big orb');
+    b.hidden = false;
+    draw(card);
+    watchWait();
+    bet.busy = false;
+    if (was || atOnce) { b.classList.add('up'); return; }
+    b.classList.add('wait-in');
+    void b.offsetWidth;
     requestAnimationFrame(function () { b.classList.add('up'); });
   }
 
+  // The calm line's live words: what the writer is doing now, how long it
+  // has been, and the newest note typed here with the answer to it. draw()
+  // puts them on the card; while it shows they are kept fresh in place. Its
+  // options and its box never change under one id, so the field, its words,
+  // and the cursor in it are never touched.
+  function live(card, atOnce) {
+    var b = box();
+    var step = b.querySelector('.waitstep');
+    if (!isWait(card) || !step) return;
+    bet.shown = card;
+    b.setAttribute('data-card', card.id);
+    var h = b.querySelector('h1');
+    if (h.textContent !== card.title) h.textContent = card.title;
+    var lines = Array.isArray(card.progress) ? card.progress : [];
+    var newest = lines.length ? lines[lines.length - 1] : null;
+    stepTo(step, newest && typeof newest.line === 'string' ? newest.line : '', atOnce);
+    notesTo(b.querySelector('.waitnotes'), card.thread || [], atOnce);
+    // the Mac's own count of how long it has been, carried on from when it came
+    if (Number.isFinite(card.waited_ms)) waitClock = { key: String(card.id).split('#')[0], ms: card.waited_ms, at: Date.now() };
+    tickWait();
+  }
+
+  // one line at a time, crossfaded in its own spot, so nothing under it moves
+  function stepTo(node, text, atOnce) {
+    if (node.getAttribute('data-text') === text) return;
+    node.setAttribute('data-text', text);
+    clearTimeout(node.fading);
+    if (atOnce || reduced || !node.textContent) { node.textContent = text; node.classList.remove('out'); return; }
+    node.classList.add('out');
+    node.fading = setTimeout(function () { node.textContent = node.getAttribute('data-text'); node.classList.remove('out'); }, 260);
+  }
+
+  // the newest note and the answer to it; a new one fades in, and the room it
+  // takes opens smoothly
+  function notesTo(node, turns, atOnce) {
+    var want = turns.slice(-2);
+    var had = Array.prototype.map.call(node.children, function (n) { return n.textContent; });
+    if (had.join('\\n') === want.map(function (t) { return t.text; }).join('\\n')) return;
+    var from = node.offsetHeight;
+    node.style.height = '';
+    node.textContent = '';
+    want.forEach(function (t, i) {
+      var p = node.appendChild(el('p', 'turn ' + (t.who === 'owner' ? 'you' : 'orb'), t.text));
+      if (!atOnce && !reduced && had[i] !== t.text) p.classList.add('fresh');
+    });
+    if (atOnce || reduced) return;
+    var to = node.offsetHeight;
+    if (from !== to) {
+      node.style.height = from + 'px';
+      void node.offsetHeight;
+      node.style.height = to + 'px';
+      clearTimeout(node.opening);
+      node.opening = setTimeout(function () { node.style.height = ''; }, 340);
+    }
+    requestAnimationFrame(function () { requestAnimationFrame(function () { Array.prototype.forEach.call(node.querySelectorAll('.fresh'), function (p) { p.classList.remove('fresh'); }); }); });
+  }
+
+  // how long the idea has been written, in plain words: the Mac's own count
+  // when the card has it, else from when it began on the Mac's clock when
+  // that is sane, else from when the page first saw the calm line
+  var seen = { key: null, at: 0 };
+  var waitClock = { key: null, ms: 0, at: 0 };
+  function sinceWords(ms) {
+    var s = Math.round(ms / 1000);
+    if (!(s >= 5) || s > 3600) return '';
+    if (s < 60) return Math.max(5, Math.round(s / 5) * 5) + ' seconds so far';
+    var m = Math.round(s / 60);
+    return m === 1 ? 'about a minute so far' : 'about ' + m + ' minutes so far';
+  }
+  function tickWait() {
+    var node = box().querySelector('.waittime');
+    var card = bet.shown;
+    if (!node || !isWait(card) || !waiting()) { clearInterval(bet.clock); bet.clock = null; return; }
+    var key = String(card.id).split('#')[0];
+    if (seen.key !== key) seen = { key: key, at: Date.now() };
+    var began = typeof card.started_at === 'number' ? card.started_at : Date.parse(card.started_at || '');
+    var ms = waitClock.key === key ? waitClock.ms + (Date.now() - waitClock.at) : Date.now() - began;
+    if (!(ms >= 0 && ms < 3600000)) ms = Date.now() - seen.at;
+    var words = sinceWords(ms);
+    if (node.textContent !== words) node.textContent = words;
+    if (!bet.clock) bet.clock = setInterval(tickWait, 1000);
+  }
+
+  // A note on the calm line: the words hold in the box for the moment it
+  // takes, then the box clears and stays open, and the note and the answer
+  // to it show above. Nothing moves on: the idea that comes in is the one
+  // written with it. Words that did not reach the Mac stay in the box.
+  function sendNote(field, text) {
+    var from = bet.shown;
+    var input = field.querySelector('input');
+    var body = { card_id: from.id, text: text, send: sendId([from.id, 'the box', text].join(' | ')) };
+    bet.noting = true;
+    field.classList.add('chosen');
+    input.readOnly = true;
+    var note = box().querySelector('.act .note');
+    if (note) note.textContent = '';
+    api('/act', body).catch(offline).then(function (r) {
+      bet.noting = false;
+      field.classList.remove('chosen');
+      input.readOnly = false;
+      // the owner went back to the big orb meanwhile: the Mac has the note, and nothing here moves
+      if (!waiting()) return;
+      if (r.ok && r.card && sameCard(r.card, from)) { input.value = ''; input.blur(); live(r.card); return; }
+      // the Mac moved on (the idea landed meanwhile): it comes in, and the words go back in its box
+      if (r.card && !sameCard(r.card, from)) { landFromWait(r.card, r.ok ? null : function () { unsent(r.card, r, text, null); }); return; }
+      if (note) note.textContent = (r && r.message) || 'that did not go through. try again.';
+    });
+  }
+
+  // off the calm line, home or to an act's next card: its words fade, then
+  // the sphere glides back to its own place and size
+  function leaveWait(then, fast) {
+    var b = box();
+    stopWatch();
+    if (!fast) orb.calm();
+    b.classList.remove('wait-in');
+    b.classList.add('leave', 'fast');
+    setTimeout(function () {
+      b.hidden = true;
+      b.classList.remove('leave', 'fast', 'holding', 'up');
+      document.body.classList.remove('has-card', 'wide', 'waiting');
+      stageFade();
+      document.getElementById('orb').setAttribute('aria-label', 'the atris orb. tap to think of one new idea for the business');
+      then();
+    }, 220);
+  }
+
+  // The idea lands: the calm line's words fade while the dots spiral in
+  // from wherever they are, and the card grows out of the point.
+  function landFromWait(card, after) {
+    var b = box();
+    bet.busy = true;
+    stopWatch();
+    b.classList.remove('wait-in');
+    b.classList.add('leave', 'fast');
+    var off = function () {
+      b.classList.remove('leave', 'fast');
+      document.body.classList.remove('waiting');
+      document.getElementById('orb').setAttribute('aria-label', 'the atris orb. tap to think of one new idea for the business');
+    };
+    if (reduced) {
+      setTimeout(function () { off(); orb.settled(); showCard(card, true); bet.busy = false; if (after) after(); }, 200);
+      return;
+    }
+    orb.play(function (phase) {
+      if (phase === 'cover') { off(); showCard(card, true, true, true); if (after) after(); }
+      if (phase === 'settled') bet.busy = false;
+    }, true, true);
+  }
+
+  // a card the Mac has now that is not the one on screen
+  function arrive(card) {
+    if (waiting()) { landFromWait(card); return; }
+    if (isWait(card)) { leave(function () { enterWait(card); }, true); return; }
+    turnTo(card);
+  }
+
   // 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() {
@@ -1075,7 +1495,8 @@ body.has-card .foot { position: static; margin-top: 28px; }
     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(); });
+    document.body.setAttribute('data-in-place', '');
+    turnInPlace(b, function () { draw(card); }, function () { bet.busy = false; document.body.removeAttribute('data-in-place'); measured(); if (card.watch) watchWait(); else stopWatch(); });
   }
 
   function turnInPlace(b, paint, after) {
@@ -1105,18 +1526,21 @@ body.has-card .foot { position: static; margin-top: 28px; }
     b.classList.remove('turn-in');
     b.style.height = to + 'px';
     ghost.classList.add('gone');
+    var turnMs = 80 + TURN_IN_MS + 20;
+    planned('turn', turnMs);
     setTimeout(function () {
       ghost.remove();
       b.classList.remove('turning');
       b.style.height = '';
       after();
-    }, 80 + TURN_IN_MS + 20);
+    }, turnMs);
   }
 
-  // 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.
+  // While the calm line shows, look every WAIT_LOOK_MS: its live words are
+  // kept fresh, even while the owner types, and once the Mac has the idea
+  // ready it is asked for the way a tap does and grows out of the dots. It
+  // waits while the owner types there (the box has the cursor or any words)
+  // or a note is on its way, and on the big orb it waits for their tap.
   var WAIT_LOOK_MS = 1500;
   function typingOnCard() {
     var input = box().querySelector('.field input');
@@ -1125,34 +1549,35 @@ body.has-card .foot { position: static; margin-top: 28px; }
   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(); };
+    var quiet = function () { return !bet.busy && !bet.noting && document.body.classList.contains('has-card') && !typingOnCard(); };
     bet.watching = setInterval(function () {
       if (!bet.shown || !bet.shown.watch) { stopWatch(); return; }
-      if (!quiet()) return;
+      if (bet.busy || bet.noting) 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;
-          });
-        }
+        if (s.http !== 200 || !s.card || !bet.shown || !bet.shown.watch || bet.busy || bet.noting) return;
+        if (sameCard(s.card, bet.shown)) live(s.card);
+        else if (quiet()) { bet.busy = true; arrive(s.card); return; }
+        if (!quiet() || !(s.queue > 0)) return;
+        bet.busy = true;
+        api('/act', { orb: true, card_id: bet.shown.id }).catch(offline).then(function (r) {
+          if (r.ok && r.card && !sameCard(r.card, bet.shown)) { arrive(r.card); return; }
+          bet.busy = false;
+          if (r.ok && r.card) live(r.card);
+        });
       }).catch(function () { /* the next look tries again */ });
     }, WAIT_LOOK_MS);
   }
 
-  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;
+    // on the calm line the dots are the orb on the card: a tap goes back to the big one
+    if (waiting()) { goHome(); return; }
     buzz();
     bet.busy = true;
-    bet.tapAt = performance.now();
-    document.body.removeAttribute('data-reveal-ms');
+    tapped();
     var failed = function () {
       bet.busy = false;
       orb.relax();
@@ -1161,6 +1586,10 @@ body.has-card .foot { position: static; margin-top: 28px; }
     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);
+      // nothing ready yet: the calm line, with the sphere where it is and its dots moving
+      if (isWait(r.card)) { enterWait(r.card); return; }
+      // the big orb moves once the answer is in
+      bet.waited = performance.now() - bet.tapAt;
       orb.play(function (phase) { if (phase === 'settled') { bet.busy = false; showCard(r.card, true, true); } }, true);
     }, failed);
   }
@@ -1174,6 +1603,8 @@ body.has-card .foot { position: static; margin-top: 28px; }
     buzz();
     bet.busy = true;
     stopWatch();
+    // from the calm line the sphere is already there; its line comes once the card's words are gone
+    if (waiting()) { leave(function () { line.set('tap to think', false); bet.busy = false; }); return; }
     // the line under the big orb is ready before the sphere is back
     line.set('tap to think', false);
     leave(function () { bet.busy = false; });
@@ -1196,6 +1627,7 @@ body.has-card .foot { position: static; margin-top: 28px; }
   function firstLook() {
     api('/card').then(function (s) {
       if (s.http !== 200) return;
+      if (s.card && isWait(s.card)) { enterWait(s.card, true); 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);
     });
@@ -1208,11 +1640,12 @@ body.has-card .foot { position: static; margin-top: 28px; }
     if (bet.busy) return;
     buzz();
     bet.busy = true;
-    bet.tapAt = performance.now();
+    tapped();
     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; }
+        bet.waited = performance.now() - bet.tapAt;
         spiralTo(r.card, null);
       });
       return;
@@ -1274,14 +1707,15 @@ body.has-card .foot { position: static; margin-top: 28px; }
 
   // 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.
+  // it turns in place, or grows out of the dots on the calm line, unless the
+  // owner is typing or a motion is under way.
   function refresh() {
     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')) {
+      if (s.card && bet.shown && !sameCard(s.card, bet.shown) && !bet.busy && !bet.noting && !typingOnCard() && document.body.classList.contains('has-card')) {
         bet.busy = true;
-        turnTo(s.card);
+        arrive(s.card);
       }
     }).catch(function () { /* the next refresh tries again */ });
   }