Consolidate suite into two tools; restore Rev 0 features

- Home page: two cards (SOP Configuration / Work Package Creator);
  SOP card turns green + "Review" once complete (persisted to localStorage),
  WP card locked until SOP is done
- Header: white background with dark text; remove duplicate title next to logo
- Move Step Comments toggle into the header; restore Usage Logs analytics
- Load Sample: project MICRON_PH1_CUP_HPM_FMCS INSTALL, PM Mariano Sanchez
- Team tab: add Assistant Project Manager + repeatable "Add Team Member"
- Sign-Offs: add Assistant Project Manager to additional roles
- Sequencing: restore Rev 0 pre-sequenced drag-and-drop (gates, arrows)
- Sources: restore Rev 0 pre-loaded list; defaults are deletable + addable
- WP Creator: replace broken stub with the real creator embedded in the WP
  tab, auto-loading the completed SOP from localStorage
- Remove duplicate standalone SOP tool (sop-config-*)

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

work-package-suite-styles.css

@@ -30,17 +30,18 @@ body {
 
 /* HEADER */
 .header {
-  background: linear-gradient(135deg, var(--primary) 0%, #1e40af 100%);
-  color: white;
+  background: #ffffff;
+  color: var(--text);
   padding: 1.5rem 2rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow);
+  border-bottom: 1px solid var(--border);
 }
 
-.header-left { 
-  flex: 1; 
+.header-left {
+  flex: 1;
   display: flex;
   align-items: center;
   gap: 1.5rem;
@@ -51,18 +52,18 @@ body {
   align-items: center;
   gap: 0.5rem;
   text-decoration: none;
-  color: white;
+  color: var(--text);
   font-weight: 700;
   font-size: 14px;
   transition: opacity 0.2s;
 }
 
-.logo:hover { opacity: 0.9; }
+.logo:hover { opacity: 0.7; }
 
 .logo-icon {
   width: 36px;
   height: 36px;
-  background: rgba(255,255,255,0.2);
+  background: var(--primary-light);
   border-radius: 6px;
   display: flex;
   align-items: center;
@@ -71,22 +72,16 @@ body {
   font-weight: 700;
 }
 
-.logo-text {
-  display: flex;
-  flex-direction: column;
-  line-height: 1;
-  font-size: 12px;
-}
-
 .header-title {
   font-size: 24px;
   font-weight: 700;
   margin-bottom: 0;
+  color: var(--text);
 }
 
 .header-subtitle {
   font-size: 13px;
-  opacity: 0.9;
+  color: var(--text-light);
   min-height: 20px;
 }
 
@@ -98,9 +93,9 @@ body {
 
 .header-button {
   padding: 0.5rem 1rem;
-  background: rgba(255,255,255,0.2);
-  color: white;
-  border: 1px solid rgba(255,255,255,0.4);
+  background: var(--bg);
+  color: var(--primary);
+  border: 1px solid var(--border);
   border-radius: 6px;
   cursor: pointer;
   font-size: 13px;
@@ -109,12 +104,14 @@ body {
 }
 
 .header-button:hover {
-  background: rgba(255,255,255,0.3);
-  border-color: white;
+  background: var(--primary-light);
+  border-color: var(--primary);
 }
 
 .step-counter {
-  background: rgba(255,255,255,0.2);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text-light);
   padding: 0.4rem 0.8rem;
   border-radius: 20px;
   font-size: 12px;
@@ -397,6 +394,71 @@ body {
 
 .comments-toggle:hover { background: var(--primary); color: white; }
 
+/* CONSTRUCTION SEQUENCE (drag & drop) */
+#sequence-list { display: flex; flex-direction: column; gap: 8px; }
+.seq-step {
+  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
+  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
+  box-shadow: var(--shadow); transition: border-color .12s, box-shadow .12s, opacity .12s;
+}
+.seq-step:hover { border-color: var(--primary); }
+.seq-step.dragging { opacity: .35; border-style: dashed; }
+.seq-step.drag-over { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
+.seq-handle { cursor: grab; color: var(--text-dim); font-size: 16px; line-height: 1; user-select: none; flex-shrink: 0; }
+.seq-handle:active { cursor: grabbing; }
+.seq-num {
+  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--primary-light); color: var(--primary);
+  font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center;
+}
+.seq-step input.seq-label {
+  border: 1px solid transparent; background: transparent; font-size: 14px; padding: 5px 8px; color: var(--text); flex: 1; border-radius: 4px;
+}
+.seq-step input.seq-label:focus { background: var(--bg); border-color: var(--primary); outline: none; }
+.seq-del {
+  background: var(--danger); color: white; border: none; border-radius: 4px;
+  width: 28px; height: 28px; cursor: pointer; font-weight: 600; flex-shrink: 0;
+}
+.seq-arrow { text-align: center; color: var(--text-dim); font-size: 13px; line-height: .4; margin: -2px 0; }
+.seq-step.gate { border-color: var(--warning); background: #fff7ed; border-style: dashed; }
+.seq-step.gate .seq-label { color: var(--warning); font-weight: 500; }
+.seq-gate-badge {
+  flex-shrink: 0; padding: 3px 9px; border-radius: 20px; background: var(--warning); color: #fff;
+  font-size: 9px; font-weight: 600; letter-spacing: .08em; white-space: nowrap;
+}
+
+/* STEP COMMENTS DROPDOWN */
+.comments-dropdown {
+  position: fixed;
+  top: 80px;
+  right: 2rem;
+  width: 360px;
+  max-width: calc(100vw - 2rem);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: var(--shadow-lg);
+  padding: 1.25rem;
+  z-index: 1200;
+}
+
+.comments-dropdown-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.comments-dropdown-close {
+  background: none;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+  color: var(--text-light);
+  line-height: 1;
+}
+
+.comments-dropdown-close:hover { color: var(--text); }
+
 /* MODAL */
 .modal {
   position: fixed;