@vibelord/lanes 1.0.1 → 1.0.3

package/payload/lanes/web/mobile.css

@@ -62,231 +62,100 @@ html.lanes-mobile:root {
   --zj-yellow: var(--lanes-tone-attention);
 }
 /* END lanes tokens */
-/* Non-colour layout variables; colours come from the generated token block above.
-   Safe areas apply in Home Screen mode and on both sides of landscape Safari. */
-html.lanes-mobile {
-  --lanes-safe-top: env(safe-area-inset-top, 0px);
-  --lanes-safe-bottom: env(safe-area-inset-bottom, 0px);
-  --lanes-safe-left: env(safe-area-inset-left, 0px);
-  --lanes-safe-right: env(safe-area-inset-right, 0px);
-  --lanes-head: calc(58px + var(--lanes-safe-top));
-  --lanes-dock: calc(66px + var(--lanes-safe-bottom));
-  --lanes-keys: 0px;
-  --lanes-vh: 100dvh;
-  --lanes-vw: 100vw;
-  --lanes-offset-top: 0px;
-  --lanes-offset-left: 0px;
-  -webkit-text-size-adjust: 100%;
-  overscroll-behavior: none;
-}
-html.lanes-keyboard {
-  --lanes-dock: 48px;
-  --lanes-keys: 48px;
-  --lanes-safe-bottom: 0px;
-}
+/* Layout; colours only via the tokens above */
+html.lanes-mobile { --lanes-safe-top: env(safe-area-inset-top, 0px); --lanes-safe-bottom: env(safe-area-inset-bottom, 0px); --lanes-safe-left: env(safe-area-inset-left, 0px); --lanes-safe-right: env(safe-area-inset-right, 0px); --lanes-head: calc(58px + var(--lanes-safe-top)); --lanes-dock: calc(66px + var(--lanes-safe-bottom)); --lanes-keys: 0px; --lanes-quick: 0px; --lanes-vh: 100dvh; --lanes-vw: 100vw; --lanes-offset-top: 0px; --lanes-offset-left: 0px; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
+html.lanes-keyboard { --lanes-dock: 48px; --lanes-keys: 48px; --lanes-safe-bottom: 0px; }
 .lanes-mobile body { overscroll-behavior: none; }
-.lanes-shell, .lanes-shell *, .lanes-mobile .security-modal *, .lanes-mobile #zj-mobile-root * {
-  box-sizing: border-box;
-}
-.lanes-shell {
-  color: var(--lanes-text);
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  -webkit-tap-highlight-color: transparent;
-}
+.lanes-mobile body, .lanes-mobile #terminal { background: var(--lanes-surface) !important; }
+.lanes-shell, .lanes-shell *, .lanes-mobile .security-modal *, .lanes-mobile #zj-mobile-root * { box-sizing: border-box; }
+.lanes-shell { color: var(--lanes-text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-tap-highlight-color: transparent; }
 .lanes-shell [hidden], .lanes-shell[hidden] { display: none !important; }
-.lanes-shell button, .lanes-mobile #zj-mobile-root button {
-  touch-action: manipulation;
-  -webkit-tap-highlight-color: transparent;
-  cursor: pointer;
-}
+.lanes-shell button, .lanes-mobile #zj-mobile-root button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; cursor: pointer; }
 .lanes-shell button { font: inherit; color: inherit; }
-.lanes-shell button:focus-visible, .lanes-shell input:focus-visible {
-  outline: 2px solid var(--lanes-accent); outline-offset: -3px;
-}
+.lanes-shell button:focus-visible, .lanes-shell input:focus-visible { outline: 2px solid var(--lanes-accent); outline-offset: -3px; }
 .lanes-ready .zj-mobile-topbar { display: none !important; }
-.lanes-ready body.zj-mobile-active #terminal {
-  position: fixed;
-  top: calc(var(--lanes-offset-top) + var(--lanes-head) + 8px);
-  left: calc(var(--lanes-offset-left) + var(--lanes-safe-left) + 8px);
-  width: calc(var(--lanes-vw) - var(--lanes-safe-left) - var(--lanes-safe-right) - 16px);
-  height: calc(var(--lanes-vh) - var(--lanes-head) - var(--lanes-dock) - var(--lanes-keys) - 16px);
-  margin: 0;
-  padding: 0;
-}
-.lanes-header {
-  position: fixed; z-index: 510;
-  top: var(--lanes-offset-top); left: var(--lanes-offset-left);
-  width: var(--lanes-vw); height: var(--lanes-head);
-  padding: var(--lanes-safe-top) calc(8px + var(--lanes-safe-right)) 0 calc(12px + var(--lanes-safe-left));
-  display: flex; align-items: center; gap: 10px;
-  background: var(--lanes-bg); border-bottom: 1px solid var(--lanes-border);
-}
+.lanes-ready body.zj-mobile-active #terminal { position: fixed; top: calc(var(--lanes-offset-top) + var(--lanes-head) + 8px); left: calc(var(--lanes-offset-left) + var(--lanes-safe-left) + 8px); width: calc(var(--lanes-vw) - var(--lanes-safe-left) - var(--lanes-safe-right) - 16px); height: calc(var(--lanes-vh) - var(--lanes-head) - var(--lanes-dock) - var(--lanes-keys) - var(--lanes-quick) - 16px); margin: 0; padding: 0; }
+.lanes-header { position: fixed; z-index: 510; top: var(--lanes-offset-top); left: var(--lanes-offset-left); width: var(--lanes-vw); height: var(--lanes-head); padding: var(--lanes-safe-top) calc(8px + var(--lanes-safe-right)) 0 calc(16px + var(--lanes-safe-left)); display: flex; align-items: center; gap: 10px; background: var(--lanes-bg); border-bottom: 1px solid var(--lanes-border); }
 .lanes-brand { height: 34px; width: 34px; flex: 0 0 34px; }
-.lanes-context {
-  display: flex; flex: 1; min-width: 0; height: 54px;
-  flex-direction: column; justify-content: center; align-items: flex-start;
-  border: 0; background: none; padding: 0; text-align: left;
-}
-.lanes-context strong { font-size: 16px; letter-spacing: -.25px; line-height: 22px; }
-.lanes-context span { font-size: 12px; color: var(--lanes-muted); line-height: 18px; }
+.lanes-context { display: flex; flex: 1; min-width: 0; height: 54px; flex-direction: column; justify-content: center; align-items: flex-start; border: 0; background: none; padding: 0; text-align: left; }
+.lanes-context strong { font-size: 17px; letter-spacing: -.3px; line-height: 22px; }
+.lanes-context span { font-size: 13px; color: var(--lanes-muted); line-height: 18px; }
 .lanes-context strong, .lanes-context span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.lanes-button {
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
-  gap: 5px; min-width: 48px; min-height: 48px; padding: 5px;
-  border: 0; background: transparent; border-radius: 12px;
-}
+.lanes-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 48px; min-height: 48px; padding: 5px; border: 0; background: transparent; border-radius: 12px; }
 .lanes-button svg { width: 23px; height: 23px; flex: 0 0 23px; }
-.lanes-button span { font-size: 10px; font-weight: 600; letter-spacing: .1px; }
+.lanes-button span { font-size: 12px; font-weight: 600; letter-spacing: .1px; }
 .lanes-more, .lanes-close { flex: 0 0 48px; }
 .lanes-more span, .lanes-close span { display: none; }
-.lanes-button:active, .lanes-workspace:active { background: var(--lanes-press); }
-.lanes-dock {
-  position: fixed; z-index: 510;
-  top: calc(var(--lanes-offset-top) + var(--lanes-vh) - var(--lanes-dock));
-  left: var(--lanes-offset-left); width: var(--lanes-vw); height: var(--lanes-dock);
-  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
-  padding: 4px calc(8px + var(--lanes-safe-right)) var(--lanes-safe-bottom) calc(8px + var(--lanes-safe-left));
-  border-top: 1px solid var(--lanes-border); background: var(--lanes-bg);
-}
-.lanes-dock .lanes-button { color: var(--lanes-muted); }
+.lanes-button:active, .lanes-workspace:active, .lanes-quick button:active { background: var(--lanes-press); }
+.lanes-dock { position: fixed; z-index: 510; top: calc(var(--lanes-offset-top) + var(--lanes-vh) - var(--lanes-dock)); left: var(--lanes-offset-left); width: var(--lanes-vw); height: var(--lanes-dock); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 4px calc(8px + var(--lanes-safe-right)) var(--lanes-safe-bottom) calc(8px + var(--lanes-safe-left)); border-top: 1px solid var(--lanes-border); background: var(--lanes-bg); }
+.lanes-dock .lanes-button { color: var(--lanes-muted); position: relative; }
 .lanes-dock .lanes-button[aria-pressed="true"] { color: var(--lanes-accent); background: var(--lanes-current); }
-.lanes-terminal-input {
-  position: relative; align-self: center; min-width: 0; height: 52px;
-  margin: 0 2px; border: 1px solid var(--lanes-border); border-radius: 12px;
-  background: var(--lanes-panel); color: var(--lanes-muted);
-}
-.lanes-input-label {
-  position: absolute; inset: 0; pointer-events: none;
-  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
-}
+.lanes-button[data-count]::after { content: attr(data-count); position: absolute; top: 2px; right: 8px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--lanes-tone-attention); color: var(--lanes-on-accent); font-size: 12px; font-weight: 600; }
+.lanes-terminal-input { position: relative; align-self: center; min-width: 0; height: 52px; margin: 0 2px; border: 1px solid var(--lanes-border); border-radius: 12px; background: var(--lanes-panel); color: var(--lanes-muted); }
+.lanes-input-label { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
 .lanes-input-label svg { width: 23px; height: 23px; }
-.lanes-input-label span { font-size: 10px; font-weight: 600; }
-.lanes-terminal-input:focus-within, .lanes-terminal-input.is-typing {
-  border-color: var(--lanes-accent); color: var(--lanes-accent); background: var(--lanes-current);
-}
+.lanes-input-label span { font-size: 12px; font-weight: 600; letter-spacing: .1px; }
+.lanes-terminal-input:focus-within, .lanes-terminal-input.is-typing { border-color: var(--lanes-accent); color: var(--lanes-accent); background: var(--lanes-current); }
 .lanes-keyboard .lanes-dock { padding-top: 0; }
 .lanes-keyboard .lanes-dock .lanes-button { min-height: 44px; padding: 0; }
 .lanes-keyboard .lanes-dock .lanes-button span { display: none; }
 .lanes-keyboard .lanes-terminal-input { height: 44px; }
 .lanes-keyboard .lanes-input-label { flex-direction: row; gap: 5px; }
-.lanes-ready .zj-mobile-modbar {
-  top: calc(var(--lanes-offset-top) + var(--lanes-vh) - var(--lanes-dock) - var(--lanes-keys));
-  bottom: auto; left: calc(var(--lanes-offset-left) + var(--lanes-safe-left));
-  right: auto; width: calc(var(--lanes-vw) - var(--lanes-safe-left) - var(--lanes-safe-right));
-  height: 48px; z-index: 510;
-  overflow-x: auto; overscroll-behavior: contain;
-  scrollbar-width: none; background: var(--lanes-panel); border-color: var(--lanes-border);
-}
+.lanes-ready .zj-mobile-modbar, .lanes-quick { top: calc(var(--lanes-offset-top) + var(--lanes-vh) - var(--lanes-dock) - var(--lanes-keys)); bottom: auto; left: calc(var(--lanes-offset-left) + var(--lanes-safe-left)); right: auto; width: calc(var(--lanes-vw) - var(--lanes-safe-left) - var(--lanes-safe-right)); height: 48px; z-index: 510; overflow-x: auto; overscroll-behavior: contain; scrollbar-width: none; background: var(--lanes-panel); border-color: var(--lanes-border); }
 .lanes-ready:not(.lanes-keyboard) .zj-mobile-modbar { display: none !important; }
+.lanes-quick { position: fixed; top: calc(var(--lanes-offset-top) + var(--lanes-vh) - var(--lanes-dock) - var(--lanes-keys) - var(--lanes-quick)); display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 2px 16px; border-top: 1px solid var(--lanes-border); }
+.lanes-quick button { min-height: 44px; min-width: 44px; border: 1px solid var(--lanes-border); border-radius: 12px; background: var(--lanes-bg); font: 600 15px ui-monospace, Menlo, monospace; }
+.lanes-quick .is-destructive { color: var(--lanes-tone-urgent); }
+.lanes-quick .is-destructive:active { background: var(--lanes-tone-urgent); color: var(--lanes-on-accent); transition: background 0s 400ms, color 0s 400ms; }
 .lanes-ready.lanes-keyboard .zj-mobile-modbar { display: flex !important; }
-.lanes-ready .zj-mobile-modbar button {
-  flex: 1 0 44px; min-width: 44px; min-height: 48px;
-  color: var(--lanes-text); font: 500 13px -apple-system, sans-serif;
-  border-color: var(--lanes-border);
-}
-.lanes-ready .zj-mobile-modbar button.zj-armed { background: var(--lanes-accent); color: #101318; }
-.lanes-sheet {
-  position: fixed; z-index: 800;
-  top: var(--lanes-offset-top); left: var(--lanes-offset-left);
-  height: var(--lanes-vh); width: var(--lanes-vw);
-  display: flex; align-items: flex-end; background: #0009;
-  padding: var(--lanes-safe-top) var(--lanes-safe-right) 0 var(--lanes-safe-left);
-}
-.lanes-sheet-panel {
-  display: flex; flex-direction: column; width: 100%; min-height: 0;
-  max-height: calc(var(--lanes-vh) - var(--lanes-safe-top) - 20px);
-  background: var(--lanes-bg); border: 1px solid var(--lanes-border);
-  border-bottom: 0; border-radius: 24px 24px 0 0;
-  padding: 20px 16px calc(8px + var(--lanes-safe-bottom));
-  box-shadow: 0 -16px 80px #0007;
-}
+.lanes-ready .zj-mobile-modbar button { flex: 1 0 44px; min-width: 44px; min-height: 48px; color: var(--lanes-text); font: 500 13px -apple-system, sans-serif; border-color: var(--lanes-border); }
+.lanes-ready .zj-mobile-modbar button.zj-armed { background: var(--lanes-accent); color: var(--lanes-on-accent); }
+.lanes-sheet { position: fixed; z-index: 800; top: var(--lanes-offset-top); left: var(--lanes-offset-left); height: var(--lanes-vh); width: var(--lanes-vw); display: flex; align-items: flex-end; background: var(--lanes-scrim); padding: var(--lanes-safe-top) var(--lanes-safe-right) 0 var(--lanes-safe-left); }
+.lanes-sheet-panel { display: flex; flex-direction: column; width: 100%; min-height: 0; max-height: calc(var(--lanes-vh) - var(--lanes-safe-top) - 20px); background: var(--lanes-bg); border: 1px solid var(--lanes-border); border-bottom: 0; border-radius: 24px 24px 0 0; padding: 20px 16px calc(8px + var(--lanes-safe-bottom)); box-shadow: var(--lanes-shadow); }
 .lanes-sheet-head { display: flex; justify-content: space-between; align-items: center; flex: 0 0 auto; margin-bottom: 18px; }
 .lanes-sheet-head h2 { font-size: 25px; line-height: 30px; letter-spacing: -.8px; margin: 0 0 3px; }
 .lanes-sheet-head p { font-size: 13px; color: var(--lanes-muted); margin: 0; }
 .lanes-close { background: var(--lanes-panel); border-radius: 50%; }
-.lanes-search {
-  display: flex; align-items: center; gap: 10px; flex: 0 0 48px;
-  height: 48px; background: var(--lanes-panel); border: 1px solid var(--lanes-border);
-  border-radius: 12px; padding: 0 14px; margin-bottom: 12px;
-}
+.lanes-search { display: flex; align-items: center; gap: 10px; flex: 0 0 48px; height: 48px; background: var(--lanes-panel); border: 1px solid var(--lanes-border); border-radius: 12px; padding: 0 14px; margin-bottom: 12px; }
 .lanes-search svg { width: 20px; height: 20px; color: var(--lanes-muted); flex-shrink: 0; }
-.lanes-search input {
-  border: 0; outline: none; background: transparent; color: var(--lanes-text);
-  font: 16px -apple-system, sans-serif; min-width: 0; width: 100%; height: 44px;
-}
+.lanes-search input { border: 0; outline: none; background: transparent; color: var(--lanes-text); font: 16px -apple-system, sans-serif; min-width: 0; width: 100%; height: 44px; }
 .lanes-search input::placeholder { color: var(--lanes-muted); }
-.lanes-workspaces {
-  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
-  display: flex; flex-direction: column; gap: 6px;
-  -webkit-overflow-scrolling: touch;
-}
-.lanes-workspace {
-  display: flex; align-items: center; gap: 12px;
-  flex: 0 0 auto; width: 100%; min-height: 74px; padding: 12px;
-  background: var(--lanes-panel); border: 1px solid transparent; border-radius: 14px;
-  text-align: left;
-}
+.lanes-workspaces { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; -webkit-overflow-scrolling: touch; }
+.lanes-workspace { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; width: 100%; min-height: 74px; padding: 12px; background: var(--lanes-panel); border: 1px solid transparent; border-radius: 14px; text-align: left; }
 .lanes-workspace.is-current { border-color: var(--lanes-current-border); background: var(--lanes-current); }
-.lanes-monogram {
-  display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px;
-  font-size: 17px; font-weight: 650; color: var(--lanes-accent);
-  background: var(--lanes-chip); border: 1px solid var(--lanes-border); border-radius: 11px;
-}
+.lanes-monogram { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; font-size: 17px; font-weight: 650; color: var(--lanes-accent); background: var(--lanes-chip); border: 1px solid var(--lanes-border); border-radius: 11px; }
 .lanes-workspace-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
 .lanes-workspace-copy strong { font-size: 16px; font-weight: 600; line-height: 21px; overflow-wrap: anywhere; }
-.lanes-workspace-copy small { font-size: 12px; color: var(--lanes-muted); }
+.lanes-workspace-copy small { font-size: 13px; color: var(--lanes-muted); }
+.lanes-tone-urgent { color: var(--lanes-tone-urgent); }
+.lanes-tone-attention { color: var(--lanes-tone-attention); }
+.lanes-tone-working { color: var(--lanes-tone-working); }
+.lanes-tone-done { color: var(--lanes-tone-done); }
 .lanes-workspace-arrow { width: 18px; flex: 0 0 18px; color: var(--lanes-muted); }
 .is-current .lanes-workspace-arrow { color: var(--lanes-accent); }
 .lanes-session-link { border: 0; background: transparent; min-height: 48px; color: var(--lanes-muted) !important; font-size: 13px !important; flex-shrink: 0; }
 .lanes-empty { text-align: center; color: var(--lanes-muted); padding: 30px 12px; }
-.lanes-mobile #zj-mobile-root { font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
-.lanes-mobile .zj-mobile-menu {
-  top: calc(var(--lanes-offset-top) + var(--lanes-head) + 6px);
-  right: calc(var(--lanes-safe-right) + 8px); left: auto;
-  max-height: calc(var(--lanes-vh) - var(--lanes-head) - 16px);
-  max-width: calc(var(--lanes-vw) - var(--lanes-safe-left) - var(--lanes-safe-right) - 16px);
-  min-width: min(290px, 90vw); overflow-y: auto;
-  background: var(--lanes-panel); border: 1px solid var(--lanes-border);
-  border-radius: 16px; box-shadow: 0 12px 48px #0009;
-}
+.lanes-mobile #zj-mobile-root, .lanes-mobile .security-modal { font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
+.lanes-mobile .zj-mobile-menu { top: calc(var(--lanes-offset-top) + var(--lanes-head) + 6px); right: calc(var(--lanes-safe-right) + 8px); left: auto; max-height: calc(var(--lanes-vh) - var(--lanes-head) - 16px); max-width: calc(var(--lanes-vw) - var(--lanes-safe-left) - var(--lanes-safe-right) - 16px); min-width: min(290px, 90vw); overflow-y: auto; background: var(--lanes-panel); border: 1px solid var(--lanes-border); border-radius: 16px; box-shadow: var(--lanes-shadow); }
 .lanes-mobile .zj-mobile-menu button { min-height: 48px; color: var(--lanes-text); font-size: 15px; }
 .lanes-font-controls { display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--lanes-border); }
 .lanes-font-controls > span { margin-right: auto; font-size: 13px; color: var(--lanes-muted); }
 .lanes-font-controls button { min-width: 44px; padding: 8px !important; text-align: center !important; }
 .lanes-font-controls output { font: 12px -apple-system, sans-serif; width: 36px; text-align: center; color: var(--lanes-muted); }
-.lanes-mobile .zj-mobile-overlay {
-  top: var(--lanes-offset-top); left: var(--lanes-offset-left); right: auto;
-  width: var(--lanes-vw); height: var(--lanes-vh); max-height: var(--lanes-vh);
-  padding: var(--lanes-safe-top) var(--lanes-safe-right) var(--lanes-safe-bottom) var(--lanes-safe-left);
-  background: var(--lanes-bg); color: var(--lanes-text);
-}
+.lanes-mobile .zj-mobile-overlay { top: var(--lanes-offset-top); left: var(--lanes-offset-left); right: auto; width: var(--lanes-vw); height: var(--lanes-vh); max-height: var(--lanes-vh); padding: var(--lanes-safe-top) var(--lanes-safe-right) var(--lanes-safe-bottom) var(--lanes-safe-left); background: var(--lanes-bg); color: var(--lanes-text); }
 .lanes-mobile .zj-mobile-overlay-header { border-color: var(--lanes-border); padding: 8px 12px; min-height: 64px; }
 .lanes-mobile .zj-mobile-overlay-header .zj-back { min-width: 64px; min-height: 48px; border-radius: 12px; border-color: var(--lanes-border); }
 .lanes-mobile .zj-mobile-overlay-header .zj-title { font-size: 19px; font-weight: 600; }
 .lanes-mobile .zj-mobile-search-row { padding: 12px; }
-.lanes-mobile .zj-mobile-overlay input.zj-search, .lanes-mobile .zj-mobile-overlay input.zj-name {
-  min-width: 0; font-size: 16px; min-height: 48px; border-radius: 10px; padding: 10px;
-  color: var(--lanes-text); background: var(--lanes-panel); border-color: var(--lanes-border);
-}
+.lanes-mobile .zj-mobile-overlay input.zj-search, .lanes-mobile .zj-mobile-overlay input.zj-name { min-width: 0; font-size: 16px; min-height: 48px; border-radius: 10px; padding: 10px; color: var(--lanes-text); background: var(--lanes-panel); border-color: var(--lanes-border); }
 .lanes-mobile .zj-mobile-cards { padding: 0 12px 12px; overscroll-behavior: contain; }
 .lanes-mobile .zj-mobile-card { min-height: 72px; padding: 16px; border: 1px solid var(--lanes-border); border-radius: 14px; background: var(--lanes-panel); }
 .lanes-mobile .zj-mobile-card .zj-card-title { color: var(--lanes-accent); font-size: 16px; overflow-wrap: anywhere; }
-.lanes-mobile .zj-mobile-card .zj-card-meta { color: var(--lanes-muted); font-size: 12px; overflow-wrap: anywhere; }
+.lanes-mobile .zj-mobile-card .zj-card-meta { color: var(--lanes-muted); font-size: 13px; overflow-wrap: anywhere; }
 .lanes-mobile .zj-mobile-footer { padding-bottom: 8px; }
 .lanes-mobile .zj-mobile-footer button { min-height: 48px; border-radius: 12px; color: var(--lanes-accent); border-color: var(--lanes-border); }
-.lanes-mobile .security-modal {
-  position: fixed; z-index: 9999; box-sizing: border-box;
-  display: flex; align-items: center; justify-content: center;
-  top: var(--lanes-offset-top); left: var(--lanes-offset-left);
-  width: var(--lanes-vw); height: var(--lanes-vh);
-  padding: calc(16px + var(--lanes-safe-top)) calc(20px + var(--lanes-safe-right)) calc(16px + var(--lanes-safe-bottom)) calc(20px + var(--lanes-safe-left));
-  overflow: auto; background: var(--lanes-bg); font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-}
-.lanes-mobile .security-modal .security-modal-content {
-  width: 100%; max-width: 400px; max-height: 100%; overflow-y: auto;
-  border: 1px solid var(--lanes-border); border-radius: 22px;
-  padding: 24px; background: var(--lanes-panel); color: var(--lanes-text); box-shadow: none;
-}
+.lanes-mobile .security-modal { box-sizing: border-box; top: var(--lanes-offset-top); left: var(--lanes-offset-left); width: var(--lanes-vw); height: var(--lanes-vh); padding: calc(16px + var(--lanes-safe-top)) calc(20px + var(--lanes-safe-right)) calc(16px + var(--lanes-safe-bottom)) calc(20px + var(--lanes-safe-left)); overflow: auto; background: var(--lanes-bg); }
+.lanes-mobile .security-modal .security-modal-content { width: 100%; max-width: 400px; max-height: 100%; overflow-y: auto; border: 1px solid var(--lanes-border); border-radius: 24px; padding: 24px; background: var(--lanes-panel); color: var(--lanes-text); box-shadow: none; }
 .lanes-mobile .security-modal .security-modal-content::before { display: none; }
 .lanes-mobile .security-modal h3 { font-size: 25px; font-weight: 650; text-transform: none; letter-spacing: -.7px; color: var(--lanes-text); border: 0; margin-bottom: 18px; }
 .lanes-mobile .security-modal input[type="password"] { display: block; width: 100%; padding: 12px; margin-bottom: 12px; font-size: 16px; min-height: 52px; border-radius: 12px; background: var(--lanes-bg); color: var(--lanes-text); border: 1px solid var(--lanes-border); appearance: none; }
@@ -294,18 +163,15 @@ html.lanes-keyboard {
 .lanes-mobile .security-modal input[type="checkbox"] { width: 22px; height: 22px; border-radius: 6px; flex: 0 0 22px; accent-color: var(--lanes-accent); }
 .lanes-mobile .security-modal .button-row { display: flex; gap: 12px; margin-top: 20px; }
 .lanes-mobile .security-modal button { min-height: 48px; border: 1px solid; border-radius: 12px; font-size: 15px; padding: 10px 20px; appearance: none; }
-.lanes-mobile .security-modal .submit-btn { background: var(--lanes-accent); border-color: var(--lanes-accent); color: #101318; font-weight: 650; flex: 1; }
+.lanes-mobile .security-modal .submit-btn { background: var(--lanes-accent); border-color: var(--lanes-accent); color: var(--lanes-on-accent); font-weight: 650; flex: 1; }
 .lanes-mobile .security-modal .cancel-btn { background: transparent; color: var(--lanes-muted); border-color: var(--lanes-border); }
 @media (orientation: landscape) and (max-height: 500px) {
   html.lanes-mobile { --lanes-head: calc(48px + var(--lanes-safe-top)); --lanes-dock: calc(48px + var(--lanes-safe-bottom)); }
-  html.lanes-keyboard { --lanes-dock: 48px; }
   .lanes-context { height: 46px; }
   .lanes-dock { padding-top: 0; }
   .lanes-dock .lanes-button { flex-direction: row; gap: 8px; min-height: 44px; }
-  .lanes-dock .lanes-button span { font-size: 12px; }
   .lanes-terminal-input { height: 44px; }
   .lanes-input-label { flex-direction: row; gap: 8px; }
-  .lanes-input-label span { font-size: 12px; }
   .lanes-sheet-panel { padding-top: 12px; }
   .lanes-sheet-head { margin-bottom: 8px; }
   .lanes-workspaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@@ -314,20 +180,9 @@ html.lanes-keyboard {
   .lanes-sheet-panel { animation: lanes-sheet-in 150ms ease-out; }
   @keyframes lanes-sheet-in { from {transform: translateY(20px); opacity: .4;} to {transform: translateY(0); opacity: 1;} }
 }
-
-/* Lane filter bar — visible in the dock when the ☰ picker tab is active */
-.lanes-filter-bar {
-  display: flex; align-items: center; gap: 8px;
-  flex: 1 1 auto; min-width: 0;
-  padding: 0 12px; height: 44px;
-  background: var(--lanes-chip); border: 1px solid var(--lanes-border); border-radius: 12px;
-}
-.lanes-filter-bar[hidden] { display: none; }
+/* Lane filter bar (☰ picker tab) */
+.lanes-filter-bar { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; padding: 0 12px; height: 44px; background: var(--lanes-chip); border: 1px solid var(--lanes-border); border-radius: 12px; }
 .lanes-filter-bar > svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--lanes-muted); }
-.lanes-filter-bar input {
-  flex: 1 1 auto; min-width: 0;
-  background: transparent; border: 0; outline: none;
-  color: var(--lanes-text); font-size: 16px; caret-color: var(--lanes-accent);
-}
+.lanes-filter-bar input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; color: var(--lanes-text); font-size: 16px; caret-color: var(--lanes-accent); }
 .lanes-filter-bar input::placeholder { color: var(--lanes-muted); }
 .lanes-filter-bar input::-webkit-search-cancel-button { -webkit-appearance: none; }

package/payload/lanes/web/mobile.js

@@ -1,5 +1,4 @@
-/* Lanes browser shell over the pinned Zellij 0.45.1 client's window hooks; auth, input, rendering and transport
- * stay upstream. LNS-31: phone (today's rule or a coarse landscape phone), tablet (other touch), desktop. */
+/* Lanes browser shell; see web/README.md, Code notes */
 function laneShellMode({userAgent, coarse, width, height} = {}) {
   if (/iPhone|iPod|Android.*Mobile/i.test(userAgent) || (coarse && (width <= 600 || height <= 500))) return 'phone';
   return coarse ? 'tablet' : 'desktop';
@@ -11,8 +10,11 @@ if (typeof module === 'object') module.exports = {laneShellMode};
   const mode = laneShellMode({userAgent: navigator.userAgent, coarse: matchMedia('(pointer: coarse)').matches,
     width: innerWidth, height: innerHeight});
   const root = document.documentElement;
-  root.dataset.lanesShell = mode;   // web/browser.js: the desktop bar and the tablet's full rendering
-  if (mode !== 'phone') {   // laptop/tablet extras: a phone never fetches them
+  // BEGIN lanes tokens (generated by libexec/tokens.py --js; do not edit by hand)
+  const LANES_ANSI = {dark: ['#7d8896', '#f28b7d', '#6fd39a', '#e5b84a', '#7fb3f2', '#c9a6ff', '#6fd6d0', '#9ca7b5', '#8a95a3', '#ff9d96', '#8fe0a3', '#f7cf7f', '#a5cbff', '#dcc6ff', '#9ae6e0', '#edf1f5'], light: ['#3b4a42', '#b7322a', '#1b7142', '#8a5a00', '#2456a8', '#7a3fb8', '#0f7b7b', '#56616d', '#5f6d66', '#c2332a', '#1b7a38', '#8f5a00', '#2860c4', '#8a4dc8', '#0f7272', '#17241b']};
+  // END lanes tokens
+  root.dataset.lanesShell = mode;
+  if (mode !== 'phone') {
     const add = (tag, props) => document.head.append(Object.assign(document.createElement(tag), props));
     add('link', {rel: 'stylesheet', href: '/lanes-assets/browser.css'});
     add('script', {src: '/lanes-assets/browser.js'});
@@ -20,14 +22,10 @@ if (typeof module === 'object') module.exports = {laneShellMode};
   if (mode === 'desktop') return;
   root.classList.add('lanes-mobile');
   if (mode === 'tablet') {
-    // iPad Safari's UA is desktop: ask for the mobile UI (a stored 'off' stays).
     root.classList.add('lanes-tablet');
     try {localStorage.getItem('zellij:mobile-ui') || localStorage.setItem('zellij:mobile-ui', 'on');} catch (_) {}
   }
 
-  // Only a browser's native tap/focus on an input may summon the keyboard. Zellij
-  // otherwise refocuses a hidden input on touchstart, touchend, click and server
-  // SetSoftKeyboard messages. Install before its first terminal or login modal.
   const elementFocus = HTMLElement.prototype.focus;
   HTMLElement.prototype.focus = function(...args) {
     const textInput = this instanceof HTMLInputElement &&
@@ -35,11 +33,7 @@ if (typeof module === 'object') module.exports = {laneShellMode};
     if (textInput || this instanceof HTMLTextAreaElement || this.isContentEditable) return;
     return elementFocus.apply(this, args);
   };
-  Object.defineProperty(window, '__zjSoftKbdEnabled', {
-    configurable: false,
-    get: () => false,
-    set: () => {},
-  });
+  Object.defineProperty(window, '__zjSoftKbdEnabled', {configurable: false, get: () => false, set: () => {}});
   try {
     const theme = localStorage.getItem('zellij:mobile-theme') || 'dark';
     localStorage.setItem('zellij:mobile-theme', theme);
@@ -73,7 +67,7 @@ if (typeof module === 'object') module.exports = {laneShellMode};
     el.addEventListener('click', action);
     return el;
   };
-  let shell, heading, subtitle, dock, sheet, list, search, count, lanesButton, typingField;
+  let shell, heading, subtitle, dock, sheet, list, search, count, lanesButton, typingField, quickRow, quickOn;
   let laneFilterBar, laneFilterInput, laneFilterPrev = '';
   let api, term, previousCards = '', sheetOpen = false, returnFocus;
   let fontSize = 16;
@@ -92,9 +86,7 @@ if (typeof module === 'object') module.exports = {laneShellMode};
     root.style.setProperty('--lanes-vw', `${vv?.width ?? innerWidth}px`);
     root.style.setProperty('--lanes-offset-top', `${vv?.offsetTop ?? 0}px`);
     root.style.setProperty('--lanes-offset-left', `${vv?.offsetLeft ?? 0}px`);
-    // Browser toolbars alone must not put the UI into keyboard mode.
     const occluded = !!vv && innerHeight - vv.height - vv.offsetTop > 120;
-    // Zellij's keyboard input lives in a closed shadow root, so activeElement is its host.
     const focused = window.__zjSoftKbdCapture?.isFocused || document.activeElement?.matches('input, textarea');
     setKeyboard(occluded && focused);
   }
@@ -114,19 +106,14 @@ if (typeof module === 'object') module.exports = {laneShellMode};
     label.innerHTML = svg('keyboard');
     label.append(make('span', '', 'Type here'));
     label.setAttribute('aria-hidden', 'true');
-    // Keep the original input and its event handlers inside its closed shadow
-    // root (including its protection from password-manager extensions). Make it
-    // a real, tappable field instead of a 1px invisible focus target. Keystrokes
-    // appear in the terminal; its internal padding/history stays invisible.
     host.removeAttribute('aria-hidden');
     host.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;opacity:1;pointer-events:auto;';
     capture.removeAttribute('aria-hidden');
     capture.setAttribute('aria-label', 'Type in terminal');
     capture.tabIndex = 0;
-    capture.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;' +
-      'font-size:16px;border:0;border-radius:12px;padding:0;margin:0;opacity:1;' +
-      'background:transparent;color:transparent;caret-color:transparent;outline:none;' +
-      'pointer-events:auto;user-select:text;-webkit-user-select:text;';
+    capture.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;font-size:16px;' +
+      'border:0;border-radius:12px;padding:0;margin:0;opacity:1;background:transparent;color:transparent;' +
+      'caret-color:transparent;outline:none;pointer-events:auto;user-select:text;-webkit-user-select:text;';
     field.append(label, host);
     capture.addEventListener('focus', () => field.classList.add('is-typing'));
     capture.addEventListener('blur', () => field.classList.remove('is-typing'));
@@ -141,6 +128,20 @@ if (typeof module === 'object') module.exports = {laneShellMode};
   function currentTab() {
     return data()?.tabs.find(t => t.position === data()?.active_pane?.tab_position);
   }
+  const GLYPHS = '◆◇▸✓', TONES = ['urgent', 'attention', 'working', 'done'];
+  function parseCounts(title) {
+    const c = {approval: 0, input: 0, working: 0, done: 0}, keys = Object.keys(c);
+    let found = 0;
+    for (const [, g, n] of String(title || '').matchAll(/([◆◇▸✓])(\d+)/g)) { c[keys[GLYPHS.indexOf(g)]] = +n; found = 1; }
+    return found ? c : null;
+  }
+  window.__lanesParseCounts = parseCounts;
+  const countParts = c => c ? Object.values(c).map((n, i) => [GLYPHS[i], n, TONES[i]]).filter(p => p[1]) : [];
+  const pickerTab = name => data()?.tabs.find(t => t.name === `${name} ☰`);
+  function pickerTitle(name) {
+    const picker = pickerTab(name);
+    return picker ? data()?.panes.find(p => p.tab_position === picker.position && !p.is_plugin)?.title || '' : '';
+  }
   function workspaces() {
     const tabs = data()?.tabs || [];
     const pickers = tabs.filter(t => t.name.endsWith(' ☰'));
@@ -176,12 +177,14 @@ if (typeof module === 'object') module.exports = {laneShellMode};
     const items = workspaces();
     const activeName = (currentTab()?.name || '').replace(/ ☰$/, '');
     const query = search.value.trim().toLocaleLowerCase();
-    const signature = JSON.stringify([items, activeName, query]);
+    const titles = items.map(w => w.picker ? pickerTitle(w.name) : '');
+    const signature = JSON.stringify([items, titles, activeName, query]);
     if (signature === previousCards) return;
     previousCards = signature;
     list.replaceChildren();
     text(count, `${items.length} workspaces`);
-    for (const item of items.filter(w => w.name.toLocaleLowerCase().includes(query))) {
+    for (const [index, item] of items.entries()) {
+      if (!item.name.toLocaleLowerCase().includes(query)) continue;
       const active = item.name === activeName;
       const card = make('button', `lanes-workspace${active ? ' is-current' : ''}`);
       card.type = 'button';
@@ -189,7 +192,10 @@ if (typeof module === 'object') module.exports = {laneShellMode};
       if (active) card.setAttribute('aria-current', 'true');
       const monogram = make('span', 'lanes-monogram', Array.from(item.name)[0]?.toUpperCase() || 'L');
       const copy = make('span', 'lanes-workspace-copy');
-      copy.append(make('strong', '', item.name), make('small', '', item.picker ? 'Choose a lane' : 'Open workspace'));
+      const small = make('small'), parts = countParts(parseCounts(titles[index]));
+      parts.forEach(([g, n, tone], i) => small.append(i ? ' · ' : '', make('span', `lanes-tone-${tone}`, `${g} ${n}`)));
+      if (!parts.length) small.textContent = item.picker ? 'Choose a lane' : 'Open workspace';
+      copy.append(make('strong', '', item.name), small);
       const arrow = make('span', 'lanes-workspace-arrow');
       arrow.innerHTML = svg(active ? 'check' : 'arrow');
       card.append(monogram, copy, arrow);
@@ -214,8 +220,7 @@ if (typeof module === 'object') module.exports = {laneShellMode};
     dock = make('nav', 'lanes-dock'); dock.setAttribute('aria-label', 'Workspace controls');
     const spaces = button('Workspaces', 'workspaces', openSheet);
     lanesButton = button('Lanes', 'lanes', () => {
-      const name = (currentTab()?.name || '').replace(/ ☰$/, '');
-      const picker = data()?.tabs.find(t => t.name === `${name} ☰`);
+      const picker = pickerTab((currentTab()?.name || '').replace(/ ☰$/, ''));
       if (picker) focusTab(picker); else openSheet();
     });
     const panes = button('Panes', 'panes', () => nativeClick('.zj-pane'));
@@ -250,12 +255,10 @@ if (typeof module === 'object') module.exports = {laneShellMode};
       if (ev.shiftKey && document.activeElement === first) {ev.preventDefault(); last.focus();}
       else if (!ev.shiftKey && document.activeElement === last) {ev.preventDefault(); first.focus();}
     });
-    shell.append(header, dock, sheet); document.body.append(shell);
+    quickRow = buildQuickRow();
+    shell.append(header, quickRow, dock, sheet); document.body.append(shell);
     if (mode === 'tablet') more.before(dock);
     root.classList.add('lanes-ready');
-    // Upstream cancels pointerdown on extra keys, which also suppresses their
-    // touch click in Safari. Cancel mousedown instead: keep typing focus while
-    // allowing the native click to activate CTRL, arrows, and the other keys.
     for (const key of document.querySelectorAll('.zj-mobile-modbar button')) {
       key.addEventListener('pointerdown', ev => ev.stopImmediatePropagation(), true);
       key.addEventListener('mousedown', ev => ev.preventDefault());
@@ -264,31 +267,39 @@ if (typeof module === 'object') module.exports = {laneShellMode};
     resize();
   }
   function sendToTerminal(bytes) {
-    // Inject bytes into the active Zellij terminal. Try the control API first,
-    // then fall back to the keyboard capture element.
-    if (window.__zjSendControl) {
-      try { window.__zjSendControl({type: 'Write', bytes}); return; } catch (_) {}
-    }
-    const el = window.__zjSoftKbdCapture?.element;
-    if (!el) return;
-    const text = String.fromCharCode(...bytes);
-    el.focus({preventScroll: true});
-    try { document.execCommand('insertText', false, text); } catch (_) {}
+    try { window.__zjSendControl?.({type: 'Write', bytes}); } catch (_) {}
   }
   function applyLaneFilter(query) {
-    const esc = [0x1b], slash = [0x2f];
-    const bytes = [...esc, ...slash, ...Array.from(query).map(c => c.charCodeAt(0) & 0x7f).filter(b => b >= 0x20)];
-    sendToTerminal(bytes);
+    const bytes = [...new TextEncoder().encode(query)].filter(b => b >= 0x20 && b !== 0x7f);
+    sendToTerminal([0x1b, 0x2f, ...bytes]);
+  }
+  function buildQuickRow() {
+    const row = make('div', 'lanes-quick');
+    row.hidden = true;
+    for (const [label, bytes, name, hold] of [['⏎', [13], 'Enter'], ['y', [121]], ['n', [110], 0, 1], ['Esc', [27]],
+      ['^C', [3], 'Control C', 1], ['↑', [27, 91, 65], 'Up'], ['↓', [27, 91, 66], 'Down']]) {
+      const key = make('button', hold ? 'is-destructive' : '', label);
+      let down = -1;
+      key.type = 'button'; if (name) key.setAttribute('aria-label', name);
+      key.addEventListener('mousedown', ev => ev.preventDefault());
+      key.addEventListener('pointerdown', ev => { down = ev.timeStamp; });
+      key.addEventListener('pointerup', ev => {
+        if (!hold || (down >= 0 && ev.timeStamp - down >= 400)) sendToTerminal(bytes); else text(subtitle, 'Hold to send');
+        down = -1;
+      });
+      row.append(key);
+    }
+    return row;
   }
   function clearLaneFilter() {
-    sendToTerminal([0x1b]);   // Esc clears the sidebar's filter mode
+    sendToTerminal([0x1b]);
     laneFilterPrev = '';
     if (laneFilterInput) laneFilterInput.value = '';
   }
   function buildLaneFilterBar() {
     const bar = make('div', 'lanes-filter-bar');
     bar.setAttribute('aria-label', 'Filter lanes');
-    bar.setAttribute('hidden', '');
+    bar.hidden = true;
     bar.innerHTML = svg('search');
     laneFilterInput = make('input');
     laneFilterInput.type = 'search'; laneFilterInput.placeholder = 'Filter lanes';
@@ -317,6 +328,17 @@ if (typeof module === 'object') module.exports = {laneShellMode};
     text(document.getElementById('lanes-font-value'), `${fontSize} px`);
     resize();
   }
+  function lanesTheme() {
+    const css = getComputedStyle(root), v = p => css.getPropertyValue(p).trim();
+    const t = {background: v('--lanes-surface'), foreground: v('--lanes-ink'), cursor: v('--lanes-accent'),
+      selectionBackground: v('--lanes-accent-wash'), selectionForeground: v('--lanes-ink')};
+    LANES_ANSI[root.dataset.zjTheme === 'light' ? 'light' : 'dark'].forEach((c, i) => {
+      const k = 'Black Red Green Yellow Blue Magenta Cyan White'.split(' ')[i % 8];
+      t[i < 8 ? k.toLowerCase() : 'bright' + k] = c;
+    });
+    return t;
+  }
+  const applyTheme = () => { if (term) term.options.theme = lanesTheme(); };
   function installFontControls() {
     const row = make('div', 'lanes-font-controls');
     row.append(make('span', '', 'Text size'));
@@ -338,20 +360,32 @@ if (typeof module === 'object') module.exports = {laneShellMode};
     const name = tab?.name.replace(/ ☰$/, '') || 'Lanes';
     const picker = tab?.name.endsWith(' ☰');
     const pane = data()?.panes.find(p => p.pane_id === data()?.active_pane?.pane_id && !p.is_plugin);
+    const counts = parseCounts(pickerTitle(name));
+    const chips = countParts(counts).map(([glyph, n]) => glyph + n).join(' ');
     text(heading, name);
-    text(subtitle, picker ? 'Choose a lane to continue' : pane?.title || 'Your workspace');
+    text(subtitle, picker ? chips || 'Choose a lane to continue' : pane?.title || 'Your workspace');
     lanesButton.setAttribute('aria-pressed', String(!!picker));
+    const needs = counts ? counts.approval + counts.input : 0;
+    if (needs) lanesButton.dataset.count = String(needs); else delete lanesButton.dataset.count;
     updateLaneFilterBar(picker);
-    document.title = `${name} · Lanes`;
+    const quick = active && !picker;
+    if (quick !== quickOn) {
+      quickOn = quick;
+      quickRow.hidden = !quick;
+      root.style.setProperty('--lanes-quick', quick ? '48px' : '0px');
+      resize();
+    }
+    document.title = `${chips ? chips + ' · ' : ''}${name} · Lanes`;
     renderCards();
   }
   function connect() {
     if (api || !window.__zjMobileUi || !window.term || !window.__zjSoftKbdCapture?.element) return;
-    // Wait for server state: resizing before the control socket opens makes 0.45.1
-    // throw InvalidStateError and leaves the server with the old terminal size.
     if (!window.__zjMobileUi.getState()?.data?.tabs?.length) return;
     api = window.__zjMobileUi; term = window.term;
-    build(); applyFont();
+    build(); applyFont(); applyTheme();
+    const sync = window.__zjSyncInactiveCursorStyle;
+    window.__zjSyncInactiveCursorStyle = () => { sync?.(); applyTheme(); };
+    new MutationObserver(applyTheme).observe(root, {attributes: true, attributeFilter: ['data-zj-theme']});
     const setData = api.setData;
     api.setData = function(value) {setData.call(api, value); refresh();};
     const nativeRoot = document.getElementById('zj-mobile-root');
@@ -372,14 +406,12 @@ if (typeof module === 'object') module.exports = {laneShellMode};
   window.visualViewport?.addEventListener('scroll', viewport);
   window.addEventListener('zellij:soft-keyboard-visibility', () => {
     viewport();
-    // A rotation also shrinks the viewport. Correct upstream's height-only keyboard heuristic.
     requestAnimationFrame(() => window.__zjSendControl?.({
       type: 'SoftKeyboardVisibilityChanged', visible: root.classList.contains('lanes-keyboard'),
     }));
   });
   document.addEventListener('focusout', () => requestAnimationFrame(viewport));
   new MutationObserver(() => {styleLogin(); connect();}).observe(document.body, {childList: true});
-  // The upstream window hooks are installed just after it appends its mobile root.
   const awaitingClient = setInterval(() => {connect(); if (api) clearInterval(awaitingClient);}, 200);
   styleLogin(); connect();
 })();