fix(ui): one continuous chrome gradient across nav + sticky sub-headers (#1478)

The TopNav and each sticky sub-header pinned beneath it (Gallery's filter bar,
the Browse/Series/Settings/Subscriptions tabs bars) each painted their OWN
dark-to-transparent gradient (Gallery) or a solid surface band (the rest), so
the fade read as happening twice — dark, fade out, then dark again — instead of
one gradient flowing from the nav down through the sub-nav.

Operator asked to treat the sub-nav as part of the nav with a single gradient.
New shared .fc-chrome-continues primitive (app.css): the nav fades from opaque
to a shared --fc-chrome-seam alpha (on views flagged meta.stickyChrome), and the
sub-header continues from that exact seam alpha to transparent over its own
height. Both reference the same var so the alphas meet at the 64px boundary — no
re-darkening, no doubling. Percentage stops keep it spanning the filter bar's
expanding refine panel; the primitive's blur keeps tabs/controls legible where
the old solid bars had none. --fc-chrome-seam is the single tuning knob.

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

frontend/src/views/BrowseView.vue

@@ -7,7 +7,7 @@
          switcher and the search stay reachable no matter how far you scroll.
          Background uses the theme surface token so content scrolls cleanly
          under it (matches SettingsView's sticky tabs). -->
-    <div class="fc-browse__head">
+    <div class="fc-browse__head fc-chrome-continues">
       <v-container fluid class="py-0">
         <!-- Tabs and search share one row: the axis switcher on the left, the
              search field + active-scope chips on the right (operator-asked
@@ -156,7 +156,8 @@ function clearFilter(key) {
   position: sticky;
   top: 64px; /* directly under AppShell's 64px sticky TopNav */
   z-index: 4;
-  background: rgb(var(--v-theme-surface));
+  /* Background is the shared .fc-chrome-continues fade — it continues the nav's
+     gradient instead of a solid surface band (operator 2026-07-13). */
 }
 .fc-browse__bar {
   display: flex;

frontend/src/views/SeriesView.vue

@@ -4,7 +4,7 @@
          the 64px TopNav (operator-asked 2026-06-12), so the axis switcher and
          search/sort stay reachable on a long grid. The controls can't sit
          inside v-window (it clips sticky children), so they're hoisted here. -->
-    <div class="fc-series__head">
+    <div class="fc-series__head fc-chrome-continues">
       <v-tabs v-model="tab" density="compact">
         <v-tab value="browse">Browse</v-tab>
         <v-tab value="suggestions">
@@ -294,12 +294,13 @@ onMounted(() => {
 
 <style scoped>
 /* Sticky header (tabs + active-tab controls) pinned under the 64px TopNav, so
-   content scrolls cleanly beneath it. Surface bg matches SettingsView. */
+   content scrolls cleanly beneath it. Background is the shared
+   .fc-chrome-continues fade — continues the nav's gradient rather than a solid
+   band (operator 2026-07-13). */
 .fc-series__head {
   position: sticky;
   top: 64px;
   z-index: 4;
-  background: rgb(var(--v-theme-surface));
   padding-bottom: 12px;
 }
 .fc-series-browse__controls {

frontend/src/views/SettingsView.vue

@@ -7,13 +7,11 @@
     <!-- Sticky tabs: operator-flagged 2026-05-25 — long Import / Maintenance
          panels pushed the tab strip out of the viewport, forcing a scroll-
          to-top just to change tab. AppShell's TopNav is 64px sticky, so the
-         tab strip lives directly under it. Background uses the theme surface
-         token so it visually merges with the page rather than the
-         translucent v-tabs default. -->
+         tab strip lives directly under it. The .fc-chrome-continues fade
+         continues the nav's gradient across the strip (operator 2026-07-13). -->
     <v-tabs
-      v-model="tab" color="accent" class="mb-4"
-      style="position: sticky; top: 64px; z-index: 4;
-             background: rgb(var(--v-theme-surface));"
+      v-model="tab" color="accent" class="mb-4 fc-chrome-continues"
+      style="position: sticky; top: 64px; z-index: 4;"
     >
       <v-tab value="overview">Overview</v-tab>
       <v-tab value="activity">Activity</v-tab>

frontend/src/views/SubscriptionsView.vue

@@ -5,7 +5,7 @@
       align-tabs="start"
       color="accent"
       density="compact"
-      class="fc-subs-tabs"
+      class="fc-subs-tabs fc-chrome-continues"
     >
       <v-tab value="subscriptions">
         <v-icon start>mdi-account-multiple-check</v-icon>
@@ -63,7 +63,10 @@ const { tab } = useTabQuery(VALID_TABS, 'subscriptions')
 }
 .fc-subs-tabs {
   flex: 0 0 auto;
-  border-bottom: 1px solid rgb(var(--v-theme-on-surface-variant) / 0.18);
+  /* Cancel the shell's pt-2 so the tabs sit flush under the 64px nav, letting
+     the .fc-chrome-continues fade read as one gradient with it (operator
+     2026-07-13). The fade replaces the old border-bottom separator. */
+  margin-top: -8px;
 }
 .fc-subs-window {
   flex: 1 1 auto;