Fix phone strip ergonomics; add device launch helper

The two chip rows sat flush: the reference spaces them with
'#strip .chips + .chips', but the .lbl between them is display:none on
phones and still in the DOM, so the sibling selector never matched.
Measured gap was 0px, and both selected chips are light-filled and
left-aligned, so they merged into one shape.

- collapse the 7 context chips into one 44px control opening the existing
  sheet, whose rows now show CTXHINT (never surfaced on phones before)
- chip targets 34.9px -> 44px; they scroll, so a mis-hit scrolled instead
  of tapping
- right-edge fade only on rows that actually overflow (703px and 952px of
  content in a 360px viewport, scrollbars hidden)

Applied in native/ so reference/ stays frozen; CLAUDE.md records what the
React port must carry.

scripts/device.sh makes the screen-off renderer denial unmissable: it
verifies the phone is awake, waits for the page to parse rather than for
the activity, and reads the pid after start (adb install -r kills the old
process, which produced one false 'page never loaded').

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

native/native.css

@@ -33,4 +33,47 @@
     padding-left: var(--ins-l);
     padding-right: var(--ins-r);
   }
+
+  /* ---------- strip ergonomics (Phase 1 UI fix) ----------
+     The reference spaces its two chip rows with `#strip .chips + .chips`, but
+     on phones the .lbl heading between them is display:none and still in the
+     DOM, so the adjacent-sibling selector never matches and the rows sit flush
+     (measured: 0px gap). native.js collapses the 7 context chips into the
+     single .ctxbtn below, leaving one chip row with real touch targets.
+     Phase 2 must carry this - see CLAUDE.md. */
+
+  .ctxbtn{
+    display: flex; align-items: center; justify-content: space-between; gap: 10px;
+    width: 100%; min-height: 44px; padding: 8px 14px;
+    font-family: var(--fc); font-size: 1.05rem; font-weight: 600;
+    background: var(--card); color: var(--ink);
+    border: 1px solid var(--line); border-radius: 10px;
+    text-align: left; cursor: pointer;
+  }
+  .ctxbtn b{ font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .ctxbtn > span{ color: var(--muted); flex: 0 0 auto; }
+
+  /* Real 44px targets. These scroll horizontally, so an undersized target
+     turns a mis-hit into a scroll rather than a tap. */
+  #strip .chips{ margin-top: 8px; }
+  #strip .chips .chip{ min-height: 44px; padding: 8px 14px; }
+
+  /* Scroll affordance. native.js sets data-more only on rows that actually
+     overflow, so the fade never appears where there is nothing to reach. */
+  #strip .chips[data-more]{
+    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
+    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
+  }
 }
+
+/* Context picker rows inside the sheet. Uses CTXHINT from the reference, which
+   the phone layout otherwise never shows. */
+.ctxopt{
+  display: block; width: 100%; text-align: left; color: inherit;
+  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
+  padding: 10px 14px; margin-bottom: 8px; min-height: 44px; cursor: pointer;
+}
+.ctxopt[aria-pressed="true"]{ background: var(--ink); color: var(--page); border-color: var(--ink); }
+.ctxopt b{ display: block; font-family: var(--fc); font-size: 1.1rem; line-height: 1.2; }
+.ctxopt .hint{ font-size: .85rem; color: var(--muted); }
+.ctxopt[aria-pressed="true"] .hint{ color: var(--page); opacity: .75; }

native/native.js

@@ -110,4 +110,72 @@
       App.exitApp();
     });
   }
+
+  /* ---------- strip ergonomics (Phase 1 UI fix) ----------
+     Collapses the 7 context chips into one 44px control that opens the existing
+     sheet, which frees a row and fixes the flush-rows bug described in
+     native.css. renderExplore() rewrites #strip wholesale on every render, so
+     this re-applies afterwards rather than running once. */
+
+  function phone() { return matchMedia("(max-width:820px)").matches; }
+
+  function ctxSheetHTML() {
+    return Object.keys(CTX)
+      .map(function (c) {
+        return '<button class="ctxopt" data-ctx="' + c + '" aria-pressed="' + (c === st.ctx) + '">' +
+          "<b>" + CTX[c] + "</b><span class=\"hint\">" + CTXHINT[c] + "</span></button>";
+      })
+      .join("");
+  }
+
+  function reshapeStrip() {
+    var strip = document.getElementById("strip");
+    if (!strip) return;
+
+    // Two .chips rows means the Explore strip (context row first, layers second).
+    // Drill renders a .stripbtn and Find an input, so both are left alone.
+    var rows = strip.querySelectorAll(".chips");
+    if (phone() && rows.length >= 2) {
+      var btn = document.createElement("button");
+      btn.className = "ctxbtn";
+      btn.setAttribute("data-ctxsheet", "");
+      btn.setAttribute("aria-label", "Mode: " + CTX[st.ctx] + ". Change mode");
+      var label = document.createElement("b");
+      label.textContent = CTX[st.ctx];
+      var caret = document.createElement("span");
+      caret.setAttribute("aria-hidden", "true");
+      caret.textContent = "▾";
+      btn.appendChild(label);
+      btn.appendChild(caret);
+      rows[0].replaceWith(btn);
+    }
+
+    strip.querySelectorAll(".chips").forEach(function (r) {
+      if (r.scrollWidth > r.clientWidth + 1) r.setAttribute("data-more", "");
+      else r.removeAttribute("data-more");
+    });
+  }
+
+  var origRenderExplore = window.renderExplore;
+  if (typeof origRenderExplore === "function") {
+    window.renderExplore = function () {
+      origRenderExplore.apply(this, arguments);
+      reshapeStrip();
+    };
+  }
+
+  document.addEventListener("click", function (ev) {
+    var t = ev.target.closest && ev.target.closest("button");
+    if (!t) return;
+    if (t.hasAttribute("data-ctxsheet")) {
+      openSheet("Where you are", ctxSheetHTML());
+      return;
+    }
+    // The reference's own handler runs first (registered earlier) and applies
+    // data-ctx, so this only has to dismiss the sheet afterwards.
+    if (t.hasAttribute("data-ctx") && t.closest("#sheet")) closeSheet();
+  });
+
+  // The first render already ran before this script loaded.
+  reshapeStrip();
 })();