create-pmos 0.76.0 → 0.78.0

package/workspace/public/pm/mobile.css

@@ -202,43 +202,57 @@
   }
   .ctrlbar .lbl { font-size: 11px; letter-spacing: .04em; }
 
-  /* Six destinations, one per column, 64px tall — the prototype's bottom nav, with Docs (the desktop bar's order). */
-  .mobnav { display: grid; grid-template-columns: repeat(6, 1fr); min-width: 0; }
+  /* Five tabs, one per column: an icon over a short word, the bar most phone apps draw (workspace-phone-scroll-layout).
+   * The tab on screen is drawn in the foreground ink, with a heavier icon stroke and a 2px rule along its top edge. The
+   * Agenda tab carries the count of what needs the PM beside its icon. */
+  .mobnav { display: grid; grid-template-columns: repeat(5, 1fr); min-width: 0; }
   .mobnav-b {
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 3px;
+    gap: 4px;
     min-width: 0;
-    min-height: 64px;
-    padding: 0 2px;
+    min-height: 60px;
+    padding: 6px 2px 4px;
     color: var(--muted-foreground);
+    font-family: var(--sans);
   }
-  .mobnav-b .g { font-size: 17px; line-height: 1; }
-  .mobnav-b .l { font-size: 10px; line-height: 1; }
+  .mobnav-b .mobnav-i { width: 22px; height: 22px; stroke-width: 1.75; }
+  .mobnav-b .l { font-size: 11px; line-height: 1; font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .mobnav-b[aria-current="page"] { color: var(--foreground); }
-  /* The tabs are words (the frame's five tabs); the Today tab carries the count of what needs the PM. */
-  .mobnav-b { font-family: var(--sans); }
-  .mobnav-b .l { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
-  .mobnav-b[aria-current="page"] .l { text-decoration: underline; text-underline-offset: 4px; }
-  .mobnav-n { font-family: var(--mono); font-size: 11px; line-height: 1; }
+  .mobnav-b[aria-current="page"] .mobnav-i { stroke-width: 2.25; }
+  .mobnav-b[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: var(--foreground); }
+  .mobnav-n {
+    position: absolute;
+    top: 6px;
+    left: calc(50% + 8px);
+    min-width: 18px;
+    padding: 2px 4px;
+    font-family: var(--mono);
+    font-size: 11px;
+    line-height: 1;
+    text-align: center;
+    background: var(--destructive);
+    color: var(--background);
+  }
 
   /* ── one job per screen, one card at a time ────────────────────────────────────────────────────
-   * A phone is not a small desktop. At a tab's root the tab's cards are a deck, one card on the screen at a time
-   * (pm/phone-deck.js), and the deck head above them says which card of how many it is. The controls that serve desk
-   * work are not drawn. Nothing below removes a capability: each hidden control is a desktop one, or the deck head's
+   * A phone is not a small desktop. At a tab's root the tab's list runs top to bottom and only the list scrolls; the
+   * head above it (pm/phone-deck.js) says how many things it holds and switches the tab's second view. The controls that
+   * serve desk work are not drawn. Nothing below removes a capability: each hidden control is a desktop one, or the head's
    * view switch, the bar's Repository menu or ⌘K (the bar's search) reaches the same act. The nodes stay in the DOM,
    * so the renderers are the desktop's, unchanged (see pm/mobile.js, "ONE renderer, two shells").
    *
-   *   Today        the Today cards. The count is in the deck head; the scope is the bar's Repository menu (it has
-   *                All repositories). Day, the deck head's second view, is the day section: goals, calendar, jobs.
+   *   Today        the Today cards. The count is in the head; the scope is the bar's Repository menu (it has
+   *                All repositories). My day, the head's second view, is the day section: goals, calendar, jobs.
    *   Initiatives  the Roadmap's cards. No title, view switch, New initiative, count line, hint or drag grips: the
-   *                deck head's All is the List, ⌘K has New initiative, and a card's ⋯ moves it.
+   *                head's All is the List, ⌘K has New initiative, and a card's ⋯ moves it.
    *   Board        the picked initiative's cards in the column on screen: Active or Mine, the initiative picker and
    *                the column switch stay. No count, and not a second "no item" note above the column's own.
    *   Reports      read a report, or draft one: no title (the tab names it) and no schedule set-up.
-   *   Docs         the copies that need you, one card each. All, the deck head's second view, lists every copy and
+   *   Docs         the copies that need you, one row each. All, the head's second view, lists every copy and
    *                has the search.
    *   An initiative (the sheet)  act on its next step: the stepper and the waiting line lead. The Breakdown tab shows
    *                the Tree only (the Board tab is the board) and not the starter list, which is authoring. */
@@ -261,95 +275,65 @@
   [data-in-sheet] .bd-head > [data-bd-view],
   [data-in-sheet] [data-bd-starters] { display: none !important; }
 
-  /* ── the deck head and the pager (pm/phone-deck.js) ─────────────────────────────────────────── */
-
+  /* ── the list head (pm/phone-deck.js) ───────────────────────────────────────────────────────────
+   * One line above the list: how many things it holds, then the tab's two views as a segmented switch, each button an
+   * icon and a word. It sits in the phone's top block, so it stays put while the list scrolls under it. */
   .mob-deck {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 10px;
-    min-height: 48px;
-    padding: 0 14px;
+    gap: 12px;
+    min-height: 52px;
+    padding: 0 12px 0 16px;
     background: var(--background);
     border-bottom: 1px solid var(--border);
-    font-family: var(--mono);
-    font-size: 11px;
-    letter-spacing: .06em;
-    text-transform: uppercase;
-    color: var(--muted-foreground);
+    font-family: var(--sans);
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--foreground);
   }
   .mob-deck__where { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .mob-deck__views { display: inline-flex; flex: none; border: 1px solid var(--border); }
+  .mob-deck__views { display: inline-flex; flex: none; gap: 2px; padding: 2px; background: var(--muted); }
   .mob-deck__view {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
     min-width: 44px;
     min-height: 44px;
     padding: 0 12px;
-    font: inherit;
-    letter-spacing: inherit;
-    text-transform: inherit;
+    font-family: var(--sans);
+    font-size: 14px;
+    font-weight: 500;
     color: var(--muted-foreground);
   }
-  .mob-deck__view[aria-pressed="true"] { background: var(--foreground); color: var(--background); }
-
-  .mob-pager { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; border-bottom: 1px solid var(--border); }
-  .mob-pager__b { display: grid; place-items: center; min-width: 48px; min-height: 44px; color: var(--foreground); }
-  .mob-pager__b:disabled { opacity: .3; }
-  .mob-pager__track { height: 3px; background: var(--border); }
-  .mob-pager__fill { display: block; height: 100%; width: var(--fr-deck-fill, 0); background: var(--foreground); transition: width .2s ease-out; }
+  .mob-deck__view .mob-deck__i { width: 16px; height: 16px; }
+  .mob-deck__view[aria-pressed="true"] { background: var(--card); color: var(--foreground); }
 
-  /* The deck: the tab's own list, laid side by side, one card per screen width, snapping to each. The card's height is
-   * the screen between the deck head and the pager (--fr-deck-h, measured by pm/phone-deck.js). */
-  body[data-ph-view="cards"] .ph-deck {
-    display: flex !important;
-    flex-direction: row !important;
-    flex-wrap: nowrap !important;
-    gap: 0 !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    overflow-x: auto;
-    overflow-y: hidden;
-    scroll-snap-type: x mandatory;
-    overscroll-behavior-x: contain;
-    scrollbar-width: none;
-  }
-  body[data-ph-view="cards"] .ph-deck::-webkit-scrollbar { display: none; }
-  /* The Roadmap's three columns and the Docs' groups hand their cards to the one deck. */
-  body[data-ph-view="cards"] .ph-deck .in-col,
-  body[data-ph-view="cards"] .ph-deck .in-list,
-  body[data-ph-view="cards"] .ph-deck .rp-docs-group,
-  body[data-ph-view="cards"] .ph-deck .rp-docs-group > [role="list"] { display: contents !important; }
-  body[data-ph-view="cards"] .ph-deck .in-col__head,
-  body[data-ph-view="cards"] .ph-deck .in-col__empty,
-  body[data-ph-view="cards"] .ph-deck .in-col > :not(.in-list),
-  body[data-ph-view="cards"] .ph-deck .in-list--dormant { display: none !important; }
-  body[data-ph-view="cards"] .ph-deck > .rp-section__empty { flex: 0 0 100%; }
-  body[data-ph-view="cards"] .ph-card {
-    flex: 0 0 100% !important;
-    width: 100% !important;
-    max-width: none !important;
-    height: var(--fr-deck-h, 60vh);
-    margin: 0 !important;
-    overflow-y: auto;
-    scroll-snap-align: start;
-    scroll-snap-stop: always;
-    display: flex !important;
-    flex-direction: column;
-    background: var(--card);
-    border: 1px solid var(--border);
+  /* ── the list: one scroller, rows sized to what they hold ───────────────────────────────────────
+   * The place is the only thing that scrolls. It does not hand a drag at its top or bottom to the page, so the bars never
+   * move and nothing empty is dragged along. Rows take the height of what they say, with one floor, so a short row and a
+   * long one line up as a column. */
+  [data-fr="main"] > .fr-dest { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
+  html, body { overscroll-behavior: none; }
+  [data-dest="today"] .td-board { gap: 8px; padding: 12px; }
+  [data-dest="today"] .td-card { min-height: 64px; padding: 14px; gap: 10px; }
+  [data-dest="today"] .td-card--host { padding: 0; }
+  [data-dest="today"] .td-card__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
+  [data-dest="today"] .td-card__cause { font-size: 16px; line-height: 1.3; font-weight: 600; align-items: flex-start; }
+  [data-dest="today"] .td-card__evidence {
+    padding-left: 0;
+    font-size: 14px;
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
   }
-  /* A Today card: the cause leads, the evidence wraps under it, the acts sit at the bottom at full width. */
-  body[data-ph-view="cards"] .ph-card.td-card { padding: 20px 18px; }
-  body[data-ph-view="cards"] .ph-card .td-card__top { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
-  body[data-ph-view="cards"] .ph-card .td-card__text { display: grid; gap: 12px; align-content: start; }
-  body[data-ph-view="cards"] .ph-card .td-card__cause { font-size: 20px; line-height: 1.3; font-weight: 600; }
-  body[data-ph-view="cards"] .ph-card .td-card__evidence { white-space: normal; overflow: visible; font-size: 14px; line-height: 1.45; }
-  body[data-ph-view="cards"] .ph-card .td-card__acts { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; width: 100%; margin: 0; }
-  body[data-ph-view="cards"] .ph-card .td-card__acts > :first-child { width: 100%; }
-  body[data-ph-view="cards"] .ph-card .td-card__acts > * { min-height: 48px; justify-content: center; }
-  body[data-ph-view="cards"] .ph-card.td-card--prep .td-card__acts { grid-template-columns: minmax(0, 1fr); }
-  /* An initiative or a Board item: a .pmc-card primitive, so its deck size lives in components.css (.pmc-card.ph-card). */
-  /* A copy that differs: the row's sentence and its one button. */
-  body[data-ph-view="cards"] .ph-card.rp-docs-row { padding: 6px 4px; }
+  [data-dest="today"] .td-card__acts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; width: 100%; margin: 0; }
+  [data-dest="today"] .td-card__acts > * { min-height: 44px; justify-content: center; }
+  [data-dest="today"] .td-card--prep .td-card__acts { grid-template-columns: minmax(0, 1fr); }
+  /* An initiative or a Board item is a .pmc-card primitive: its phone size lives in components.css's primitives section. */
+  [data-dest="docs"] .rp-docs-row { min-height: 56px; }
 
   /* ── the terminal takes the screen ────────────────────────────────────────────────────────────
    * The PM's word: entering a terminal switches the whole screen to it, because it is mostly output. The tabs are not
@@ -363,7 +347,7 @@
  * the thing this workspace refuses to ship. */
 .mob[hidden], .mobmenu[hidden], .mob-back[hidden], .mob-brand[hidden] { display: none !important; }
 .mob-repo[hidden], .mob-set[hidden], .mob-sync[hidden], .mob-theme[hidden], .mobnav-n[hidden] { display: none !important; }
-.mob-deck[hidden], .mob-pager[hidden], .mob-deck__views[hidden] { display: none !important; }
+.mob-deck[hidden], .mob-deck__views[hidden] { display: none !important; }
 
 /* ── a touch screen: the visible height, no page bounce, no zoom on focus ─────────────────────
  * pm/mobile.js sets `pm-vv` and `--fr-vvh` (the visual viewport's height) on a touch screen. The

package/workspace/public/pm/mobile.js

@@ -387,7 +387,9 @@ export function applyMobile() {
   }
 
   const buttons = menu ? menu.querySelectorAll('#mobNav [data-dest]') : [];
-  for (const b of buttons) b.setAttribute('aria-current', b.dataset.dest === nav.dest ? 'page' : 'false');
+  // Reports has no tab of its own: it is the Board tab's second view, so Board stays lit (lib/mobile-nav.js TAB_OF).
+  const lit = typeof NAV.tabOf === 'function' ? NAV.tabOf(nav.dest) : nav.dest;
+  for (const b of buttons) b.setAttribute('aria-current', b.dataset.dest === lit ? 'page' : 'false');
 
   if (s.kind !== 'terminal' && s.kind !== 'agent' && ctrlArmed) setCtrlArmed(false);
 
@@ -544,8 +546,9 @@ export function mountMobile(context) {
   document.addEventListener('click', onChromeClick);
 
   if (window.visualViewport) {
+    // resize only. A visualViewport `scroll` fires on every pan of the page, and answering it with scrollTo(0, 0) and a
+    // refit undid the PM's own scroll in one jump (workspace-phone-scroll-layout). The height changes only on a resize.
     window.visualViewport.addEventListener('resize', fitViewport);
-    window.visualViewport.addEventListener('scroll', fitViewport);
   }
   if (TOUCH.addEventListener) TOUCH.addEventListener('change', fitViewport);
   window.addEventListener('orientationchange', () => setTimeout(() => { fitViewport(); refit(); }, 250));
@@ -567,6 +570,7 @@ export function mountMobile(context) {
 
   mountDeck({
     rerender: () => setState({}),
+    go: (dest) => setDest(dest),
     apply: () => { if (isMobile() && nav) applyDeck(frameOn(), NAV.current(nav)); },
     place: () => ctx.bodyGrid.querySelector('[data-fr="main"]'),
   });

package/workspace/public/pm/phone-deck.js

@@ -1,51 +1,57 @@
-/* pm/phone-deck.js — a phone tab shows its cards one at a time (initiative workspace-phone-one-job, the PM's card model).
+/* pm/phone-deck.js — the head above a phone tab's list (initiative workspace-phone-scroll-layout).
  *
- * At a tab's root on a phone (≤760px), the list the tab's place already draws becomes a DECK: each card fills the screen,
- * a swipe or the pager's arrows bring the next one, and the deck head says which card of how many is on screen. The PM's
- * words: "I can't really focus on one thing at a time" with a list on every screen.
+ * At a tab's root on a phone (≤760px), the tab's place draws its own list, top to bottom, and only that list scrolls. This
+ * module draws the line above it (#mobDeck): how many things the list holds and, where the tab has a second view, a
+ * two-button switch to it, each button an icon and a short word.
  *
- * ONE RENDERER. Nothing here draws a card. The destinations draw exactly what they draw on a desktop (pm/mobile.js, "ONE
- * renderer, two shells"); this module marks the tab's own list as the deck's scroller and its own cards as the deck's
- * cards, and pm/mobile.css lays them out side by side with scroll snapping. A card's buttons are the card's own buttons.
+ * WHY NOT A DECK ANY MORE. Until 2026-10-07 this module turned the list into a deck of full-screen cards, side by side with
+ * scroll snapping (initiative workspace-phone-one-job). The PM reported that scrolling down a card "pages up" by itself,
+ * and that the empty space scrolls with the content. Both came from the deck: each card was a fixed-height box with its own
+ * vertical scroller inside a horizontal snap scroller, the deck re-snapped to "the card on screen" on every window resize
+ * (and a soft keyboard or Safari's toolbar resizes the window), and a short card left empty space that still scrolled. The
+ * PM chose one vertical list from a clickable mockup (its link is in the initiative record). Nothing here
+ * moves a scroll position.
  *
- *   Today        the Today cards (dest-today.js); the first card prepares the day while the day is not prepared.
- *                Second view: Day, the day section (today-day.js) with the goals, the calendar and the jobs.
- *   Initiatives  the Roadmap's cards, Now then Next then Later. Second view: All, the List.
- *   Board        the cards of the column on screen; the initiative picker and the column switch stay above them.
- *   Docs         the copies that need you. Second view: All, every copy.
- *   Reports and Agent have no deck: the report reads as a page, and Agent is the dock with its sessions.
+ * ONE RENDERER. Nothing here draws a row. The destinations draw exactly what they draw on a desktop (pm/mobile.js, "ONE
+ * renderer, two shells"); pm/mobile.css only sizes them for a thumb.
  *
- * The view a tab shows (Cards or its second view) lives in memory for this page only, so a phone never changes what a
- * desktop opens on. The card on screen is remembered by its key, so a destination that rebuilds its list (a poll, an
- * act on the card) keeps the PM where they were, or on the card that took the place of the one they acted on.
+ *   Agenda       Needs you (the Today cards) or My day (today-day.js: the goals, the calendar and the jobs).
+ *   Initiatives  Roadmap (Now, then Next, then Later) or All (the List).
+ *   Board        Board or Reports. Reports is a destination of its own with no tab (lib/mobile-nav.js TAB_OF), so this
+ *                switch changes the destination, and the Board tab stays lit.
+ *   Docs         Out of sync (the copies that need you) or All (every copy).
+ *   Agent has no head: it is the dock with its sessions.
+ *
+ * The view a tab shows lives in memory for this page only, so a phone never changes what a desktop opens on.
  */
 
 import { setDayForced } from './today-day.js';
-
-const DECKS = {
-  today: { views: [['cards', 'Cards'], ['day', 'Day']], scroller: '[data-today="needs"]', item: '[data-today-id]', key: 'data-today-id',
-    where: (i, n) => n ? `${i + 1} of ${n}` : 'Nothing needs you', second: 'Your day' },
-  initiatives: { views: [['cards', 'Cards'], ['all', 'All']], scroller: '[data-in-cols]', item: '[data-in-card], [data-in-unrecorded-card]', key: 'data-in-card',
-    where: (i, n, it) => n ? `${i + 1} of ${n}${it && it.getAttribute('data-horizon') ? ' · ' + label(it.getAttribute('data-horizon')) : ''}` : 'No initiatives', second: 'All initiatives' },
-  board: { scroller: '.bd-col--shown .bd-col__list', item: '[data-item]', key: 'data-item',
-    where: (i, n) => n ? `${i + 1} of ${n}` : 'No item here' },
-  docs: { views: [['cards', 'Cards'], ['all', 'All']], scroller: '.rp-docs-body', item: '.rp-docs-row', key: 'data-docs-doc',
-    where: (i, n) => n ? `${i + 1} of ${n} differ` : 'Every copy is the same', second: 'Every copy' },
+import { icon } from './icons.js';
+
+/* views: [id, word, icon]. A view whose id is a destination (Board's) switches the destination instead of the view. */
+const HEADS = {
+  today: { views: [['cards', 'Needs you', 'circle-alert'], ['day', 'My day', 'calendar']], scroller: '[data-today="needs"]', item: '[data-today-id]',
+    where: (n) => (n ? `${n} need${n === 1 ? 's' : ''} you` : 'Nothing needs you'), second: 'Your day' },
+  initiatives: { views: [['cards', 'Roadmap', 'target'], ['all', 'All', 'list']], scroller: '[data-in-cols]', item: '[data-in-card], [data-in-unrecorded-card]',
+    where: (n) => (n ? `${n} initiative${n === 1 ? '' : 's'}` : 'No initiatives'), second: 'All initiatives' },
+  board: { views: [['board', 'Board', 'square-kanban'], ['reports', 'Reports', 'chart-column']], dests: true, scroller: '.bd-col--shown .bd-col__list', item: '[data-item]',
+    where: (n) => (n ? `${n} item${n === 1 ? '' : 's'}` : 'No item here') },
+  reports: { views: [['board', 'Board', 'square-kanban'], ['reports', 'Reports', 'chart-column']], dests: true,
+    where: () => 'Reports' },
+  docs: { views: [['cards', 'Out of sync', 'circle-alert'], ['all', 'All', 'list']], scroller: '.rp-docs-body', item: '.rp-docs-row',
+    where: (n) => (n ? `${n} differ` : 'Every copy is the same'), second: 'Every copy' },
 };
-const label = (h) => h.charAt(0).toUpperCase() + h.slice(1);
 
 const view = { today: 'cards', initiatives: 'cards', docs: 'cards' };
-const at = {};          // dest -> { key, i }: the card on screen, by its key and its place
-let live = null;        // { dest, scroller } the deck being shown
+let shown = null;       // the destination whose head is drawn
 let wasOn = false;
-let ctx = null;         // { rerender, place: () => the place panel }
+let ctx = null;         // { rerender, apply, go(dest), place: () => the place panel }
 let observer = null;
 let queued = false;
 
 const $ = (id) => document.getElementById(id);
 
-/** The view a tab shows on a phone: 'cards' or its second view. Initiatives and Docs say it themselves (the List, or the
- * All filter, however it was reached: the switch, ⌘K or the desktop's saved choice); Today's lives here. */
+/** The view a tab shows. Initiatives and Docs read their own switch, so a change made in the place itself is honoured. */
 export function phoneView(dest) {
   if (dest === 'initiatives') {
     const body = document.querySelector('[data-dest="initiatives"] [data-in-body]');
@@ -55,12 +61,13 @@ export function phoneView(dest) {
     const on = document.querySelector('[data-dest="docs"] [data-docs-filter] [aria-selected="true"]');
     return on && on.getAttribute('data-tab') === 'all' ? 'all' : 'cards';
   }
+  if (dest === 'board' || dest === 'reports') return dest;
   return view[dest] || 'cards';
 }
 
-/* Put the destination in the view the PM chose. Only in-memory state is touched: the desktop's saved choices (the
- * Initiatives view in localStorage, the day's fold) are left as they are. */
 function setView(dest, v) {
+  const cfg = HEADS[dest];
+  if (cfg && cfg.dests) { if (v !== dest && ctx && ctx.go) ctx.go(v); return; }
   if (phoneView(dest) === v) return;
   view[dest] = v;
   if (dest === 'today') setDayForced(v === 'day');
@@ -73,143 +80,73 @@ function setView(dest, v) {
   refresh();
 }
 
-function items(cfg, scroller) { return [...scroller.querySelectorAll(cfg.item)].filter((n) => !n.closest('[hidden]')); }
-function keyOf(cfg, n, k) { return (n && n.getAttribute(cfg.key)) || 'i:' + k; }
-function indexNow(scroller) { const w = scroller.clientWidth || 1; return Math.max(0, Math.round(scroller.scrollLeft / w)); }
+function count(dest, cfg) {
+  if (!cfg.scroller) return 0;
+  const host = document.querySelector(`[data-fr-host="${dest}"]`);
+  const scroller = host && host.querySelector(cfg.scroller);
+  return scroller ? [...scroller.querySelectorAll(cfg.item)].filter((n) => !n.closest('[hidden]')).length : 0;
+}
 
-/* The head and the pager say where the PM is. Drawn from the scroller's own position, so a swipe and an arrow agree. */
-function paint(dest, cfg, scroller) {
-  const list = scroller ? items(cfg, scroller) : [];
-  const n = list.length;
-  const i = scroller ? Math.min(indexNow(scroller), Math.max(0, n - 1)) : 0;
+function paint(dest, cfg) {
+  const v = phoneView(dest);
+  const first = !cfg.views || cfg.dests || v === cfg.views[0][0];
+  const text = first ? cfg.where(count(dest, cfg)) : (cfg.second || '');
   const where = $('mobDeckWhere');
-  const deck = !!scroller;
-  if (where) where.textContent = deck ? cfg.where(i, n, list[i]) : (cfg.second || '');
-  const pager = $('mobPager');
-  if (pager) pager.hidden = !deck || n < 2;
-  const prev = $('mobPrev'); const next = $('mobNext'); const fill = $('mobPagerFill');
-  if (prev) prev.disabled = i <= 0;
-  if (next) next.disabled = i >= n - 1;
-  if (fill) fill.style.setProperty('--fr-deck-fill', n ? ((i + 1) / n * 100).toFixed(2) + '%' : '0');
-  list.forEach((node, k) => { const v = k === i ? 'true' : 'false'; if (node.getAttribute('data-ph-on') !== v) node.setAttribute('data-ph-on', v); });
-  if (n) at[dest] = { key: keyOf(cfg, list[i], i), i };
+  if (where && where.textContent !== text) where.textContent = text;
 }
 
 function views(dest, cfg) {
   const box = $('mobDeckViews');
   if (!box) return;
-  const want = (cfg.views || []).map(([id, l]) => id + ':' + l + ':' + (phoneView(dest) === id)).join('|');
+  const list = cfg.views || [];
+  const want = list.map(([id, l]) => id + ':' + l + ':' + (phoneView(dest) === id)).join('|');
   if (box.dataset.sig === dest + want) return;
   box.dataset.sig = dest + want;
-  box.replaceChildren(...(cfg.views || []).map(([id, l]) => {
+  box.replaceChildren(...list.map(([id, l, ic]) => {
     const b = document.createElement('button');
     b.type = 'button';
     b.className = 'mob-deck__view';
-    b.textContent = l;
+    const g = icon(ic); g.classList.add('mob-deck__i'); b.append(g, document.createTextNode(l));
     b.setAttribute('aria-pressed', phoneView(dest) === id ? 'true' : 'false');
     b.dataset.view = id;
     b.dataset.phViewTo = dest;
     return b;
   }));
-  box.hidden = !(cfg.views || []).length;
-}
-
-/* The height a card gets: the screen between the top of the deck and the pager, so a card fills it and its own text
- * scrolls inside it when it is longer. */
-function fit(scroller) {
-  const top = scroller.getBoundingClientRect().top;
-  const menu = document.getElementById('mobMenu');
-  const bottom = menu ? menu.getBoundingClientRect().top : window.innerHeight;
-  const h = Math.max(220, Math.floor(bottom - top - 12));
-  if (scroller.style.getPropertyValue('--fr-deck-h') !== h + 'px') scroller.style.setProperty('--fr-deck-h', h + 'px');
-}
-
-function attach(dest, cfg, scroller) {
-  if (scroller.dataset.phDeck === dest) return false;
-  scroller.dataset.phDeck = dest;
-  let t = null;
-  scroller.addEventListener('scroll', () => {
-    if (t) cancelAnimationFrame(t);
-    t = requestAnimationFrame(() => { if (live && live.scroller === scroller) paint(dest, cfg, scroller); });
-  }, { passive: true });
-  return true;
-}
-
-/* Bring the remembered card back on screen after the list was drawn again. */
-function restore(dest, cfg, scroller) {
-  const list = items(cfg, scroller);
-  const was = at[dest];
-  // the first card stays first: a card that comes in at the front (the day's Prepare card, a new cause) is the one to see
-  let k = !was || was.i === 0 ? 0 : list.findIndex((n, j) => keyOf(cfg, n, j) === was.key);
-  if (k < 0) k = Math.min(was.i, Math.max(0, list.length - 1));
-  const left = k * scroller.clientWidth;
-  if (Math.abs(scroller.scrollLeft - left) > 2) scroller.scrollTo({ left, behavior: 'instant' });
-}
-
-function step(by) {
-  if (!live) return;
-  const { scroller } = live;
-  const w = scroller.clientWidth || 1;
-  scroller.scrollTo({ left: (indexNow(scroller) + by) * w, behavior: 'smooth' });
-}
-
-/* The deck's marks come off every node, so a primitive's deck size (components.css .pmc-card.ph-card) applies only
- * while a deck is on screen. */
-function strip() {
-  for (const n of document.querySelectorAll('.ph-deck')) n.classList.remove('ph-deck');
-  for (const n of document.querySelectorAll('.ph-card')) { n.classList.remove('ph-card'); n.removeAttribute('data-ph-on'); }
+  box.hidden = !list.length;
 }
 
 function off() {
-  strip();
   const shell = $('mobDeck'); if (shell) shell.hidden = true;
-  const pager = $('mobPager'); if (pager) pager.hidden = true;
   delete document.body.dataset.phDeck;
   delete document.body.dataset.phView;
-  live = null;
+  shown = null;
 }
 
-/**
- * Draw the deck for the screen on show. `screen` is the reducer's current screen; `on` is false above the breakpoint.
- * Called by pm/mobile.js at the end of every shell render, and again whenever the place's own list is drawn again.
- */
+/** Called by pm/mobile.js on every phone render, with whether the frame is up and the screen on top. */
 export function applyDeck(on, screen) {
-  // Above the breakpoint nothing here runs: the desktop's own fold applies, the marks come off once, and the place is
-  // not watched (a subtree observer on the desktop's place, terminals included, costs every render).
   if (!on) { if (wasOn) { wasOn = false; setDayForced(null); off(); if (observer) { observer.disconnect(); observer = null; } } return; }
   wasOn = true;
   watch();
   const dest = screen && screen.kind === 'dest' ? screen.id : null;
-  const cfg = dest ? DECKS[dest] : null;
+  const cfg = dest ? HEADS[dest] : null;
   if (!cfg) { off(); return; }
   if (dest === 'today') setDayForced(view.today === 'day');
   document.body.dataset.phDeck = dest;
   document.body.dataset.phView = phoneView(dest);
   const shell = $('mobDeck'); if (shell) shell.hidden = false;
+  shown = dest;
   views(dest, cfg);
-  const host = document.querySelector(`[data-fr-host="${dest}"]`);
-  const scroller = phoneView(dest) === 'cards' && host ? host.querySelector(cfg.scroller) : null;
-  if (!scroller) { strip(); live = null; paint(dest, cfg, null); return; }
-  scroller.classList.add('ph-deck');
-  for (const n of items(cfg, scroller)) n.classList.add('ph-card');
-  const fresh = attach(dest, cfg, scroller) || !live || live.scroller !== scroller;
-  live = { dest, scroller };
-  fit(scroller);
-  if (fresh || scroller.dataset.phCount !== String(items(cfg, scroller).length)) restore(dest, cfg, scroller);
-  scroller.dataset.phCount = String(items(cfg, scroller).length);
-  paint(dest, cfg, scroller);
+  paint(dest, cfg);
 }
 
-/* A destination that draws on its own (the Roadmap's read, the Board's poll) changes the place without a shell render:
- * draw the deck again on the next frame. Only child lists are watched, and the deck writes attributes, so it cannot
- * wake itself. */
 function refresh() {
   if (queued) return;
   queued = true;
   requestAnimationFrame(() => { queued = false; if (ctx && ctx.apply) ctx.apply(); });
 }
 
-/* The place's host is made by app.js; it is watched from the first deck on. */
+/* The place rebuilds its list on a poll; the count in the head follows it. A recount reads the DOM and writes one text
+ * node, and never touches a scroll position. */
 function watch() {
   if (observer || !ctx || !ctx.place || !('MutationObserver' in window)) return;
   const place = ctx.place();
@@ -218,26 +155,13 @@ function watch() {
   observer.observe(place, { childList: true, subtree: true });
 }
 
-/** Wire the pager once, at boot. `context` is { rerender, apply, place }: apply() re-runs applyDeck with the current screen. */
 export function mountDeck(context) {
   ctx = context || null;
-  const prev = $('mobPrev'); const next = $('mobNext');
-  // one listener for the deck's own buttons (the view switch, the pager), read from their data attributes
   document.addEventListener('click', (e) => {
-    const t = e.target instanceof Element ? e.target.closest('#mobDeckViews [data-ph-view-to], #mobPrev, #mobNext') : null;
+    const t = e.target instanceof Element ? e.target.closest('#mobDeckViews [data-ph-view-to]') : null;
     if (!t || t.disabled) return;
-    if (t.id === 'mobPrev') step(-1);
-    else if (t.id === 'mobNext') step(1);
-    else setView(t.dataset.phViewTo, t.dataset.view);
-  });
-  window.addEventListener('resize', () => { if (live) { fit(live.scroller); restore(live.dest, DECKS[live.dest], live.scroller); } });
-  document.addEventListener('keydown', (e) => {
-    if (!live || e.altKey || e.metaKey || e.ctrlKey) return;
-    const t = e.target;
-    if (t && t.closest && t.closest('input, textarea, select, [contenteditable="true"], .xterm')) return;
-    if (e.key === 'ArrowRight') { e.preventDefault(); step(1); } else if (e.key === 'ArrowLeft') { e.preventDefault(); step(-1); }
+    setView(t.dataset.phViewTo, t.dataset.view);
   });
 }
 
-/* For the browser suites: where the deck is, and the view switch. */
-window.pmDeck = { phoneView, setView, live: () => (live ? { dest: live.dest, index: indexNow(live.scroller), count: items(DECKS[live.dest], live.scroller).length } : null) };
+window.pmDeck = { phoneView, setView, live: () => (shown ? { dest: shown, view: phoneView(shown), count: HEADS[shown] ? count(shown, HEADS[shown]) : 0 } : null) };