feat(ui): ui-shell header with tool links, mobile side nav, Youreka logo

- header: Carbon ui-shell (cds-header) with the Youreka logo (from
  idid-enterprise-portal), Image Cropper / Fingerprint Agent nav items
  (aria-current on the active tool), the agent status tag on the wizard,
  and the operator chip + Sign out on desktop
- mobile: cds-side-nav (logo above the items, both tools, a divider, then
  Sign out) toggled by the ui-shell menu button; account actions move out
  of the header below 1056px, the nav is hidden at desktop widths
- the header is built once in server.js (appHeader) and injected into the
  landing, both tools and error pages — no per-page duplication
- removed my duplicate menu-button toggle: ui-shell coordinates the menu
  button and side nav itself (the duplicate cancelled it out)
- fixes: 'cds-header' was hidden by a selector-list typo
  (cds-header, cds-side-nav:not(:defined)); the collapsed side nav no
  longer captures taps

Tools banner logo asset added (public/assets/youreka-logo.png).

tools/public/assets/style.css

@@ -26,33 +26,33 @@ cds-toast:not(:defined), cds-toast-item:not(:defined), cds-progress-bar:not(:def
    a real box so grid columns and click targets work correctly. */
 cds-tile, cds-clickable-tile { display: block; }
 
-/* ── header (Carbon ui-shell look) ──────────────────────────────────────── */
-.nav {
-  background: #161616;
-  height: 48px;
-  padding: 0;
+/* ── header + side nav (Carbon ui-shell) ────────────────────────────────── */
+cds-header:not(:defined), cds-side-nav:not(:defined) { visibility: hidden; }
+.brand-logo { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cds-border-subtle, #e0e0e0); border-radius: 4px; padding: 2px; margin-right: 0.5rem; }
+.brand-logo img { display: block; }
+.brand-suffix { color: var(--cds-text-secondary, #525252); font-weight: 400; }
+.header-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; padding-right: 1rem; }
+.header-agent { margin-left: 1rem; }
+/* mobile: account actions live in the side nav, not the header */
+@media (max-width: 1055px) {
+  .header-right, .header-agent { display: none; }
 }
-.nav .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 100%; max-width: none; padding: 0 1rem; }
-.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; color: #f4f4f4; font-size: 14px; }
-.brand:hover { color: #f4f4f4; }
-.brand small { color: #c6c6c6; font-weight: 400; }
-.brand-mark {
-  width: 28px; height: 28px; border-radius: 4px;
-  background: #0f62fe; color: #fff;
-  display: inline-flex; align-items: center; justify-content: center;
-  flex: 0 0 auto;
-}
-.brand-mark svg { width: 16px; height: 16px; }
-.nav-right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
-.nav-right .linklike { color: #c6c6c6; font-size: 13px; padding: 0.4rem 0.6rem; }
-.nav-right .linklike:hover { color: #f4f4f4; background: #353535; }
-.user-chip { display: inline-flex; align-items: center; gap: 0.45rem; color: #c6c6c6; font-size: 13px; }
-.user-chip .avatar {
-  width: 26px; height: 26px; border-radius: 50%;
-  background: #0f62fe; color: #fff;
-  display: inline-flex; align-items: center; justify-content: center;
-  font-size: 11px; font-weight: 700;
+/* collapsed side nav must never swallow taps meant for the header */
+cds-side-nav { pointer-events: none; }
+cds-side-nav[expanded] { pointer-events: auto; }
+/* the side nav is a mobile affordance — desktop uses the header nav */
+@media (min-width: 1056px) {
+  cds-side-nav { display: none; }
 }
+.user-chip { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--cds-text-primary, #161616); font-size: 13px; }
+.user-chip .avatar { width: 26px; height: 26px; border-radius: 50%; background: #0f62fe; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
+.linklike { background: none; border: none; padding: 0; color: var(--cds-link-primary, #0f62fe); font-weight: 400; cursor: pointer; font-size: 13px; font-family: inherit; }
+.linklike:hover { color: var(--cds-link-primary-hover, #0043ce); text-decoration: underline; }
+.linklike[disabled] { color: var(--cds-text-disabled, #c6c6c6); cursor: default; }
+
+/* logo above the mobile side-nav items */
+.side-nav-brand { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; color: var(--cds-text-primary, #161616); font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--cds-border-subtle, #e0e0e0); }
+.side-nav-brand img { border: 1px solid var(--cds-border-subtle, #e0e0e0); border-radius: 6px; padding: 2px; display: block; }
 
 /* ── layout ─────────────────────────────────────────────────────────────── */
 .container { width: 100%; max-width: 1136px; margin: 0 auto; padding: 0 1.5rem; }
@@ -127,8 +127,6 @@ textarea.form-control { height: auto; padding: 0.6rem 0.75rem; }
 .btn-danger-ghost { background: transparent; border: none; color: var(--cds-button-danger-primary, #da1e28); }
 .btn[disabled], .btn.disabled { opacity: 0.5; pointer-events: none; }
 .btn-block { display: flex; width: 100%; align-items: center; justify-content: center; }
-.linklike { background: none; border: none; padding: 0; color: var(--cds-link, #0f62fe); font-weight: 400; cursor: pointer; font-size: 13px; font-family: inherit; }
-.linklike[disabled] { color: var(--cds-text-disabled, #c6c6c6); cursor: default; }
 
 /* cds-button inside flex rows */
 cds-button { min-width: 0; }