Fix the WP navigator and the squeezed embedded layout; add per-project permissions

Layout — the reported "skinny scrolling windows"
- .content-area capped the whole suite at 1000px, so on a 1920 screen the embedded
  Work Package Creator ran in a ~930px column with its own scrollbar inside the
  page's. The wizard now caps at 1700px and the Creator/Dashboard tab goes
  full-bleed: the iframe fills the window below the app chrome and owns the only
  scrollbar. Needed `flex: none` on the content area — as a `flex: 1` item its
  flex-basis overrode `height`, leaving the used height indefinite so the child's
  `height: 100%` collapsed the iframe to its 150px default.
- The SOP wizard's fields were one per row; they now flow into ~340px columns.

Navigator — now an auto-hiding drawer
- It was a fixed 262px column that stole width from the form AND was hidden below
  1100px, so embedded (the normal path) it never appeared at all — that's the
  "broken side menu". It's now an overlay drawer behind a slim always-visible edge
  handle: hover or tap to open, move away / Escape / pick a package to close, or pin
  it to keep it open (pinned shifts the form and the page chrome across, and is
  remembered). A gutter keeps the handle off the section-nav chips.

Bugs found while checking the site over
- collectStepData() still read the SOP team fields as text inputs, but wave 1 made
  them account pickers — so it wrote a user ID into state.team.pm where the display
  NAME belongs, and the SOP would print `user_ab12…` as the PM. Now synced properly
  from the pickers.
- loadSampleData() set .value on those selects with fictional names; setting an
  unmatched value on a <select> silently does nothing, so the sample lost its team.
  It now stores them as names without an account, which the picker shows as
  "(no account)".
- My earlier CSS block replacement had deleted the SOP-chip, people-picker and
  critical-tag styles. Restored.

Same picker everywhere the SOP names someone
- Sign-off roles (step 3, required and optional) are account pickers now, storing
  userId alongside the name, so a signature belongs to an account that can be
  notified. Titles stay free text.

Per-project permissions (asked for: "change project permissions for individual users")
- project_members.role overrides the account's role on that project, so a PM on one
  job can be a Project User on another. Empty = inherit; app admin is admin
  everywhere. effective_role() feeds require_project_admin, so WP delete, completed-
  SOP edits and project delete are all judged per project.
- Project access is now its own column in the admin console (it was buried among the
  action buttons, which is why it couldn't be found), showing the project count per
  account; the dialog sets access plus the role on each project.
- The members endpoint reports each person's effective role on that project.

Verified: 157 API checks across five suites on clean databases (44 permissions +
22 password reset + 34 search/localization + 39 gates/notifications + 18 new
per-project permission checks), 16 drawer-behaviour + 4 pinned-mode UI checks driven
in headless Chrome, and probes confirming the team/sign-off pickers populate and no
longer corrupt state.team on step navigation. Screenshots reviewed at 1920x1080.

Service-worker cache bumped to v3 so browsers pick up the new shell.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

html/wp-creation-app.js

@@ -1322,9 +1322,10 @@ function buildSectionNav(){
 function positionSectionNav(){
   const nav=document.getElementById('section-nav'), hdr=document.querySelector('.header');
   if(nav && hdr) nav.style.top = hdr.offsetHeight + 'px';
-  // The WP navigator rail sticks below the header + section-nav chrome.
-  const top=(hdr?hdr.offsetHeight:0)+((nav && nav.style.display!=='none')?nav.offsetHeight:0);
-  document.documentElement.style.setProperty('--rail-top', top+'px');
+  // The navigator drawer + its handle hang below the page header. Deliberately NOT
+  // including the section-nav height: that bar is sticky, so at scroll 0 it sits
+  // further down the page and the handle would float over the chrome.
+  document.documentElement.style.setProperty('--rail-top', (hdr?hdr.offsetHeight:0)+'px');
 }
 let _snLastY=0, _snBound=false;
 function initSectionNavAutoHide(){
@@ -1377,14 +1378,85 @@ function viewPackage(i){ if(savedPackages[i]) renderPackage(savedPackages[i]); }
 // Every saved package on this project, grouped by status, filterable. Clicking a
 // row opens it in the form (same path as the Saved table's "edit").
 const WPNAV_ORDER=['Issue','In Progress','Issued','QC','Scheduled','Draft','Closed'];
+// ── drawer behaviour ─────────────────────────────────────────────────────────
+// Hover the edge handle to open, move the pointer away to close. Pinning keeps it
+// open and shifts the form across; the pin is remembered. Touch devices have no
+// hover, so tapping the handle opens it and it stays until you pick something,
+// tap outside, or press Escape.
+let _navCloseTimer = null;
+
+function openWpNav(){
+  clearTimeout(_navCloseTimer);
+  document.body.classList.add('wp-nav-open');
+  const h = document.getElementById('wp-nav-handle');
+  if(h) h.setAttribute('aria-expanded', 'true');
+}
+function closeWpNav(force){
+  clearTimeout(_navCloseTimer);
+  if(navPinned() && !force) return;      // pinned stays put unless explicitly closed
+  if(force) setNavPinned(false);
+  document.body.classList.remove('wp-nav-open');
+  const h = document.getElementById('wp-nav-handle');
+  if(h) h.setAttribute('aria-expanded', 'false');
+}
 function toggleWpNav(){
-  document.body.classList.toggle('wp-nav-collapsed');
-  try{ localStorage.setItem('wp_nav_collapsed', document.body.classList.contains('wp-nav-collapsed')?'1':''); }catch(e){}
+  if(document.body.classList.contains('wp-nav-open') || navPinned()) closeWpNav(true);
+  else openWpNav();
+}
+function navPinned(){ return document.body.classList.contains('wp-nav-pinned'); }
+function setNavPinned(on){
+  document.body.classList.toggle('wp-nav-pinned', !!on);
+  const btn = document.getElementById('wp-nav-pin');
+  if(btn){
+    btn.classList.toggle('is-on', !!on);
+    btn.title = on ? 'Unpin (let it hide again)' : 'Keep this list open';
+  }
+  try{ localStorage.setItem('wp_nav_pinned', on ? '1' : ''); }catch(e){}
+  positionSectionNav();     // pinned changes nothing about --rail-top, but keep them in step
+}
+function toggleWpNavPin(){
+  const on = !navPinned();
+  setNavPinned(on);
+  if(on) openWpNav(); else closeWpNav(true);
+  track(on ? 'wp_nav_pinned' : 'wp_nav_unpinned');
+}
+
+function initWpNavDrawer(){
+  const nav = document.getElementById('wp-nav');
+  const handle = document.getElementById('wp-nav-handle');
+  if(!nav || !handle || nav.dataset.bound) return;
+  nav.dataset.bound = '1';
+
+  // Hover in / out. A short close delay stops the drawer snapping shut while the
+  // pointer crosses the gap between handle and panel.
+  const armClose = () => {
+    clearTimeout(_navCloseTimer);
+    _navCloseTimer = setTimeout(() => closeWpNav(false), 350);
+  };
+  handle.addEventListener('mouseenter', openWpNav);
+  handle.addEventListener('mouseleave', armClose);
+  nav.addEventListener('mouseenter', () => clearTimeout(_navCloseTimer));
+  nav.addEventListener('mouseleave', armClose);
+  // Opening from the keyboard should work too.
+  handle.addEventListener('focus', openWpNav);
+
+  document.addEventListener('keydown', e => { if(e.key === 'Escape') closeWpNav(false); });
+  // Tap/click outside closes it (the touch path, where there's no mouseleave).
+  document.addEventListener('click', e => {
+    if(navPinned()) return;
+    if(!document.body.classList.contains('wp-nav-open')) return;
+    if(nav.contains(e.target) || handle.contains(e.target)) return;
+    closeWpNav(false);
+  });
+
+  try{ if(localStorage.getItem('wp_nav_pinned')) setNavPinned(true); }catch(e){}
 }
 function renderWpNav(){
   const list=document.getElementById('wp-nav-list'); if(!list) return;
   const cnt=document.getElementById('wp-nav-count');
   if(cnt) cnt.textContent = savedPackages.length ? '('+savedPackages.length+')' : '';
+  const badge=document.getElementById('wp-nav-handle-count');
+  if(badge) badge.textContent = savedPackages.length;
   const q=((document.getElementById('wp-nav-search')||{}).value||'').trim().toLowerCase();
   // Keep the original index — edit/view act on savedPackages by position.
   const rows=savedPackages.map((p,i)=>({p:p,i:i})).filter(r=>{
@@ -1422,6 +1494,7 @@ function renderWpNav(){
 }
 function wpNavOpen(i){
   const p=savedPackages[i]; if(!p) return;
+  closeWpNav(false);        // get out of the way once you've chosen (unless pinned)
   editingId=p.id;
   loadPackageIntoForm(p);     // ends in showForm(), so this also leaves the dashboard / package view
   renderWpNav();
@@ -1930,7 +2003,7 @@ function bootData(){
   bootSOP();
   setRadio('status','Draft');
   loadMembers();
-  try{ if(localStorage.getItem('wp_nav_collapsed')) document.body.classList.add('wp-nav-collapsed'); }catch(e){}
+  initWpNavDrawer();
   renderSavedList();
   positionSectionNav();
   cmtInit();