FIX - center Music playlist back action

Use the SkyNavbar-owned surface back control for playlist detail screens so the 44px circular action and chevron share the central navigation geometry. Add a contract that prevents the standalone back-link pattern from returning.

frontend/src/views/apps/MusicApp.navigation.contract.test.ts

@@ -9,6 +9,18 @@ const navigationSource = source.slice(
 )
 
 describe('MusicApp Sky pill navigation contract', () => {
+  it('uses the centered surface back action owned by SkyNavbar for playlists', () => {
+    const navbarTag = source.match(/<sky-navbar\b[^>]*>/is)?.[0]
+
+    expect(navbarTag).toBeDefined()
+    expect(navbarTag).toContain(':show-back="Boolean(activePlaylist)"')
+    expect(navbarTag).toContain('back-appearance="surface"')
+    expect(navbarTag).toContain('Apps.music.tabs.playlists')
+    expect(navbarTag).toContain('@back="closePlaylist"')
+    expect(source).not.toContain('SkyNavbarBackLink,')
+    expect(source).not.toContain('<sky-navbar-back-link')
+  })
+
   it('inherits the central safe areas for the iPhone header', () => {
     const appRuleStart = source.indexOf('.music-app {')
     const appRule = source.slice(

frontend/src/views/apps/MusicApp.vue

@@ -12,7 +12,6 @@ import {
   SkyField,
   SkyListItem,
   SkyNavbar,
-  SkyNavbarBackLink,
   SkyAppPage,
   SkyPillNavigation,
   SkySegmented,
@@ -674,13 +673,11 @@ onBeforeUnmount(() => {
       class="music-navbar"
       title-class="music-navbar-title"
       :title="activePlaylist ? activePlaylist.name : phone.t('Apps.music.name')"
+      :show-back="Boolean(activePlaylist)"
+      back-appearance="surface"
+      :back-label="phone.t('Apps.music.tabs.playlists')"
+      @back="closePlaylist"
     >
-      <template v-if="activePlaylist" #left>
-        <sky-navbar-back-link
-          :text="phone.t('Apps.music.tabs.playlists')"
-          @click="closePlaylist"
-        />
-      </template>
       <template #right>
         <sky-link
           v-if="activePlaylist"