Productionize WP Suite: auth, security hardening, sync, dashboard, PWA, email

Brings the Work Package Suite from a browser-local prototype to a
multi-tenant, SQL-backed deployment hardened for customer IP.

Auth & access control
- Local username/password login (bcrypt + JWT in an HttpOnly cookie),
  admin-managed users, per-project membership, and project-scoped API access.
- Admin console: change user roles, view the audit trail, manage settings.

Security hardening
- CSP / HSTS / X-Frame-Options / nosniff headers in nginx; Secure cookie via
  X-Forwarded-Proto; CSRF Origin check; attribute-safe output escaping.
- Login lockout, token_version session revocation, stronger password policy,
  fail-closed secret loading, encrypted (AES-256) database backups.

Persistence & schema
- SOPs and Work Packages are now DB-backed and shared across users, written
  through a durable client sync outbox that queues offline edits.
- Alembic migrations applied automatically on container start.

New capabilities
- Phase 2 dashboard (progress, gating, pagination, archive).
- Phase 3 PWA "Field View" with offline caching and auth fallback.
- WP owner assignment with OPTIONAL email notifications, OFF by default and
  toggled from the admin console. SMTP password is read only from the
  SMTP_PASSWORD env var (never stored); emails carry a WP number + deep link,
  never customer IP.

Also: IBM Carbon restyle, Help section, and DEPLOYMENT.md brought up to date.

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

html/work-package-suite.html

@@ -6,6 +6,8 @@
   <title>Work Package Suite</title>
   <script src="auth-guard.js"></script>
   <link rel="icon" href="favicon.ico" sizes="any">
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#161616">
   <link rel="stylesheet" href="theme-light.css">
   <link rel="stylesheet" href="work-package-suite-styles.css">
 </head>
@@ -15,9 +17,9 @@
     <div class="header">
       <div class="header-left">
         <a href="index.html" class="logo" title="Back to Home">
-          <img src="prime-controls-logo.jpg" alt="Prime Controls" style="height: 36px; width: auto;">
+          <img src="prime-controls-logo.jpg" alt="Prime Controls" style="height: 24px; width: auto;">
         </a>
-        <div>
+        <div style="min-width:0;overflow:hidden">
           <div class="header-title">Work Package Suite</div>
           <div class="header-subtitle" id="project-display"></div>
         </div>