fix(mobile): tap targets, FAB clearance, landing hamburger scrim

Bundle of three jobagent mobile UX corrections from the 2026-05-27
mobile UI test against iPhone-width viewports. All scoped to
``@media (max-width: 900px)`` plus one landing-page selector outside
the block; desktop layout is untouched.

  * Tap targets ≥44 (Apple HIG). The test flagged step rail tabs at
    33×*, Search button at 318×30, Import 68×30, in-card actions
    Review/Open/Save at 30, Sort/Posted-within selects at 26,
    account-popover actions (Reload / Manage subscription / Sign
    out) at 321×30, assistant Send at 36×36. New @media block
    raises:
      - .b-rail-step → min-height: 44 (rides on top of the existing
        compact-padding mobile rule at ~7932 so the four-step pill
        still fits at 340px wide)
      - .rd-btn-sm → min-height: 44 (one rule covers every small
        button across cards, forms, popovers)
      - .rd-select → min-height: 44 (Sort + Posted-within selects)
      - .b-filter-popover summary → min-height: 44 (Source / Work
        mode / Type disclosure triggers)
      - .rd-assistant-send → 44×44 (icon button)
      - .b-skill-chip → min-height: 40 (JD review skill chips; kept
        slightly under 44 to preserve inline density on multi-row
        wraps)

  * FAB clearance. The floating "Open assistant" .rd-fab at
    bottom-right (50×50, z=30) was overlapping content in the
    bottom-right corner on long pages — visibly eating the last
    skill chip on Job Detail and clipping the right edge of the
    resume hint copy. Two-part fix:
      - .b-canvas → padding-bottom: 110px on mobile so end-of-
        scroll has clearance above the FAB.
      - .b-job-card:last-child .b-job-card-actions and
        .b-skill-chips → padding-right: 64px so the rightmost
        button in the last card and the last chip on a wrapped
        row don't sit under the FAB corner. 64px = FAB width +
        offset buffer.
    The FAB itself stays at bottom: 18; right: 18 — it's a known
    visual anchor; the surrounding layout makes room for it.

  * Landing hamburger menu scrim. ``.l-topbar-menu`` background was
    ``rgba(2, 4, 9, 0.97)``. The 3% alpha let hero copy bleed
    through behind nav links at iPhone width — the second "Enter
    workspace" CTA visibly ghosted under the menu items. Bumped to
    solid ``rgb(2, 4, 9)``; the existing backdrop-filter blur stays
    as a no-op fallback.

Deferred (NOT in this commit, tracked separately):
  * Mobile UI test M08 — "Assistant panel doesn't dock as a bottom-
    sheet on mobile". The panel currently expands inline and on a
    real iPhone the OS keyboard would cover ~50% of the streamed
    output. Converting to a bottom-anchored 80vh sheet is a bigger
    UX shift than the rest of this bundle; assessed as not
    launch-blocking (the panel IS reachable and the input is
    visible; keyboard coverage is a polish item). Will land in a
    follow-up.

tsc + eslint clean.

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

Author: LEANDERANTONY

frontend/src/app/globals.css

@@ -3173,7 +3173,15 @@ code {
   flex-direction: column;
   gap: 6px;
   padding: 14px;
-  background: rgba(2, 4, 9, 0.97);
+  /* Solid background — the previous rgba(2, 4, 9, 0.97) left ~3% of
+     the hero copy bleeding through the menu panel at iPhone width
+     (caught in the 2026-05-27 jobagent mobile UI test). On the
+     bright-on-dark hero, the second "Enter workspace" CTA visibly
+     ghosted under the nav links. Solid color eliminates the bleed;
+     the backdrop-filter blur underneath is now a no-op but stays as
+     a fallback for browsers that ignore the opaque rgb layer (costs
+     nothing when the layer above is fully opaque). */
+  background: rgb(2, 4, 9);
   backdrop-filter: blur(18px) saturate(140%);
   border: 1px solid var(--l-line-strong);
   border-radius: 14px;
@@ -8468,3 +8476,95 @@ code {
     animation: none;
   }
 }
+
+/* ─────────────────────────────────────────────────────────────────────
+   Mobile tap-target + FAB-clearance pass — 2026-05-27 launch readiness
+   ─────────────────────────────────────────────────────────────────────
+   The mobile UI test caught most-touched controls violating Apple HIG
+   (≥44px) at iPhone width: step rail tabs 33px, Search 30, Import 30,
+   in-card actions Review/Open/Save 30, Sort/Posted-within selects 26,
+   account-popover action buttons 30, assistant Send 36. It also
+   flagged the floating "Open assistant" FAB at bottom-right
+   overlapping content in the bottom-right ~50px corner on long pages.
+
+   Three patterns below, each isolated for safe revert:
+
+     1. Tap-target bumps — min-height: 44 (and min-width for icon-
+        only buttons). Scoped to ``@media (max-width: 900px)`` so
+        desktop layout is untouched.
+     2. FAB clearance — bottom padding bump on .b-canvas + right-edge
+        safe zone on the trailing content rows (.b-job-card-actions,
+        .b-skill-chips) so important chips/buttons don't sit under
+        the FAB corner. The FAB itself stays where it is (the visual
+        anchor is a known affordance); the surrounding layout makes
+        room for it.
+     3. Locked-tab CTA chip already inherits the rail bump.
+*/
+@media (max-width: 900px) {
+  /* Step rail tabs — bumped from ~33 to ≥44. The earlier mobile
+     block (line ~7932) tightens internal padding/font so the four
+     chips fit at 340px; the min-height here is on top of that so
+     the chip still hits the tap-target spec without growing the
+     fixed-grid pill. */
+  .b-shell .b-rail-step {
+    min-height: 44px;
+  }
+
+  /* All ``rd-btn-sm`` buttons used in cards, forms, and popovers.
+     Single rule catches Search, Import, Review, Open, Save,
+     Reload-saved-workspace, Manage-subscription, Sign-out. */
+  .b-shell .rd-btn-sm {
+    min-height: 44px;
+  }
+
+  /* Form selects (Sort + Posted-within) — currently 26 / 28. The
+     visual layout (a label + tight select chip) stays; only the
+     tap height grows. */
+  .b-shell .rd-select {
+    min-height: 44px;
+  }
+
+  /* Filter-popover triggers (Source / Work mode / Type) — the
+     <summary> element renders as a chip-styled disclosure. Bump its
+     min-height so the chip is comfortably tappable. */
+  .b-shell .b-filter-popover summary {
+    min-height: 44px;
+  }
+
+  /* Assistant Send icon-button — 36×36 → 44×44. Width also bumps
+     so the icon stays centered. */
+  .b-shell .rd-assistant-send {
+    width: 44px;
+    height: 44px;
+  }
+
+  /* JD skill chips — 34 → 40. The report called these "visually
+     fine" at 34 but they were under 40; bump to 40 (just under 44
+     to keep inline density on multi-row chip lists). Combined with
+     the right-side safe zone below this is still comfortably
+     tappable on the multi-row wrap. */
+  .b-shell .b-skill-chip {
+    min-height: 40px;
+  }
+
+  /* FAB clearance — extend canvas bottom padding so end-of-scroll
+     has room above the FAB, and reserve a right-edge safe zone on
+     the rows most likely to collide with the FAB corner
+     (per-card actions, skill chip lists). The FAB itself stays at
+     its existing bottom: 18; right: 18 position — it's a known
+     visual anchor, just one with a known overlap zone we now
+     account for in the surrounding layout. */
+  .b-shell .b-canvas {
+    padding-bottom: 110px;
+  }
+  /* Right-edge safe zone for content rows that wrap to the FAB
+     corner. Without this, the last skill chip on a wrapped row OR
+     the rightmost in-card action button (Save) can sit under the
+     50×50 FAB at 18px from the corner. 64px = FAB width + offset
+     buffer. */
+  .b-shell .b-job-card:last-child .b-job-card-actions,
+  .b-shell .b-skill-chips {
+    padding-right: 64px;
+  }
+}
+