Widen the IWP screen and add a left work-package navigator

The Work Package form was capped at a 1000px column, which wasted most of a
desktop screen, and the only way to reach another package was to scroll to the
Saved table at the bottom.

- Put the form in a wide two-column shell (max 1760px); ctx-bar, mode-wrap and
  the release banner widened to match.
- Above 1200px the two-up field grids flow to 3-4 columns instead of stretching
  two fields across the whole card. Narrow layouts are unchanged.
- New sticky left rail listing every saved package, grouped by status in field
  order, with WP number, subject, readiness dot and type. Click to open it in
  the form; the package being edited is highlighted. Filter box, + New and
  Dashboard shortcuts, collapsible (state persisted), hidden under 1100px where
  the Saved table still covers navigation.
- The rail re-renders from renderSavedList(), so saves, deletes, splits,
  archive/restore and the project pull all keep it current.

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

html/wp-creation-styles.css

@@ -99,8 +99,11 @@
   .step-tab.done { color: var(--accent-green); background: var(--accent-green-dim); }
   .step-num { display: block; font-size: 9px; opacity: .65; margin-bottom: 2px; }
 
-  /* ── MAIN ── */
-  .main { max-width: 1000px; margin: 0 auto; padding: 28px 32px 64px; }
+  /* ── MAIN ──
+     The form sits in a wide two-column shell: a sticky work-package navigator on
+     the left and the form itself filling the rest of the screen. */
+  .wp-layout { display: flex; align-items: flex-start; gap: 0; max-width: 1760px; margin: 0 auto; }
+  .main { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; padding: 28px 32px 64px; }
 
   .section { display: none; }
   .section.active { display: block; animation: fade .25s ease; }
@@ -126,6 +129,11 @@
   .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
   .field-grid.col3 { grid-template-columns: 1fr 1fr 1fr; }
   .field-grid.col1 { grid-template-columns: 1fr; }
+  /* On a wide screen let the two-up grids flow into 3–4 columns instead of
+     stretching two fields across the whole card. */
+  @media (min-width: 1200px) {
+    .field-grid:not(.col1):not(.col3) { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
+  }
   .field { display: flex; flex-direction: column; gap: 6px; }
   .field.span2 { grid-column: span 2; }
 
@@ -427,7 +435,7 @@
     border-radius:var(--radius); padding:7px 10px; font-size:11px; }
 
   /* ── CREATION TOOL ───────────────────────────────────────────────── */
-  .ctx-bar { max-width:1080px; margin:0 auto; padding:12px 28px; display:flex; align-items:center; gap:20px;
+  .ctx-bar { max-width:1760px; margin:0 auto; padding:12px 28px; display:flex; align-items:center; gap:20px;
     border-bottom:1px solid var(--border); background:var(--surface); flex-wrap:wrap; }
   .ctx-empty { color:var(--text-muted); font-size:13px; }
   .ctx-main .ctx-proj { font-weight:700; color:var(--text); font-size:14px; }
@@ -439,7 +447,7 @@
   .ctx-meta code { background:var(--surface2); padding:1px 6px; border-radius:3px; color:var(--accent); }
   .link-btn { background:none; border:none; color:var(--accent); cursor:pointer; font-size:inherit; padding:0; text-decoration:underline; }
 
-  .mode-wrap { max-width:1080px; margin:0 auto; padding:16px 28px 0; display:flex; align-items:center; gap:16px; }
+  .mode-wrap { max-width:1760px; margin:0 auto; padding:16px 28px 0; display:flex; align-items:center; gap:16px; }
   .mode-toggle { display:inline-flex; border:1px solid var(--border-strong); border-radius:6px; overflow:hidden; }
   .mode-btn { padding:8px 18px; font-family:var(--sans); font-size:13px; font-weight:600; border:none; background:var(--surface);
     color:var(--text-muted); cursor:pointer; }
@@ -463,7 +471,7 @@
 
   /* ── WORK PACKAGE FORM ───────────────────────────────────────────── */
   .sop-hint { color:var(--accent) !important; }
-  .release-banner { max-width:1080px; margin:0 auto; padding:0 28px; }
+  .release-banner { max-width:1760px; margin:0 auto; padding:0 28px; }
   .release-banner .rb-inner { margin-top:14px; border-radius:var(--radius); padding:11px 16px; font-size:13px; font-weight:600;
     display:flex; align-items:center; gap:10px; }
   .rb-ready { background:var(--accent-green-dim); color:var(--accent-green); border:1px solid #b6e3c6; }
@@ -580,6 +588,49 @@
     border:1px solid var(--border); border-radius:14px; padding:4px 11px; cursor:pointer; white-space:nowrap; }
   .sec-chip:hover{ border-color:var(--accent); color:var(--accent); }
 
+  /* ── WP NAVIGATOR (left rail) ─────────────────────────────────────────
+     Sticky list of every work package on the project. Click one to open it in
+     the form; the one being edited is highlighted. */
+  .wp-nav { flex:0 0 262px; width:262px; align-self:flex-start; position:sticky; top:var(--rail-top,0px);
+    height:calc(100vh - var(--rail-top,0px)); display:flex; flex-direction:column;
+    background:var(--surface); border-right:1px solid var(--border); }
+  .wp-nav-head { display:flex; align-items:center; gap:8px; padding:14px 14px 8px; }
+  .wp-nav-title { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
+  .wp-nav-count { color:var(--text-dim); font-weight:600; letter-spacing:0; }
+  .wp-nav-collapse, .wp-nav-reopen { background:transparent; border:1px solid var(--border); border-radius:4px;
+    color:var(--text-muted); cursor:pointer; font-size:14px; line-height:1; padding:2px 7px; margin-left:auto; }
+  .wp-nav-collapse:hover, .wp-nav-reopen:hover { border-color:var(--accent); color:var(--accent); }
+  .wp-nav-search { margin:0 14px 10px; padding:6px 9px; font-size:12px; font-family:inherit;
+    border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); }
+  .wp-nav-search:focus { outline:none; border-color:var(--accent); }
+  .wp-nav-list { flex:1 1 auto; overflow-y:auto; padding:0 8px 8px; }
+  .wp-nav-group { font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
+    color:var(--text-dim); padding:10px 6px 5px; }
+  .wp-nav-item { display:block; width:100%; text-align:left; background:transparent; border:0;
+    border-left:3px solid transparent; border-radius:4px; padding:6px 8px; cursor:pointer;
+    font-family:inherit; color:var(--text); }
+  .wp-nav-item:hover { background:var(--surface2); }
+  .wp-nav-item.active { background:var(--accent-dim); border-left-color:var(--accent); }
+  .wp-nav-num { display:block; font-family:var(--mono); font-size:11px; font-weight:600; color:var(--accent); }
+  .wp-nav-subj { display:block; font-size:12px; color:var(--text-muted); line-height:1.35;
+    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .wp-nav-meta { display:flex; align-items:center; gap:6px; margin-top:3px; font-size:10px; color:var(--text-dim); }
+  .wp-nav-dot { width:7px; height:7px; border-radius:50%; background:var(--text-dim); flex:0 0 auto; }
+  .wp-nav-dot.ok { background:var(--accent-green); }
+  .wp-nav-dot.open { background:var(--accent-amber); }
+  .wp-nav-dot.hold { background:var(--red); }
+  .wp-nav-empty { padding:12px 8px; font-size:12px; color:var(--text-dim); }
+  .wp-nav-foot { border-top:1px solid var(--border); padding:9px 12px; display:flex; gap:8px; flex-wrap:wrap; }
+  .wp-nav-reopen { display:none; position:sticky; top:var(--rail-top,0px); margin:10px 0 0 8px; align-self:flex-start; z-index:20; }
+  /* Keep the rail's footer clear of the fixed save bar. */
+  body.has-sticky-save .wp-nav { height:calc(100vh - var(--rail-top,0px) - 56px); }
+  body.wp-nav-collapsed .wp-nav { display:none; }
+  body.wp-nav-collapsed .wp-nav-reopen { display:block; }
+  @media (max-width: 1100px) {
+    .wp-nav { display:none; }
+    .wp-nav-reopen { display:none !important; }
+  }
+
   /* Sticky save bar */
   .sticky-save{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; align-items:center;
     justify-content:space-between; gap:14px; padding:10px 20px; background:#fff;