fix(design-v2): show top nav at mobile/tablet (slim brand bar)

v1 hides TopNav below 960px; v2 was inheriting that, so mobile + tablet
had zero header chrome — frame card sat at viewport top, no WeVisto
wordmark, no page subtitle. Visible gap from the mockup.

Now in v2:
- Mobile/tablet: TopNav renders as a 52px slim sticky top bar with
  mark + WeVisto wordmark + italic '— home/library/settings' subtitle.
  Nav tabs are hidden (BottomNav handles routing at small sizes).
- Desktop: TopNav becomes the left side rail with full vertical nav.

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

frontend/src/styles/design-v2.scss

@@ -7,11 +7,27 @@
 // library/settings inner styling, theme swatches.
 
 [data-design="v2"] {
-  // ── TopNav restyled at desktop into a left side rail ───────────────
+  // ── TopNav: shown at ALL sizes in v2 (v1 hides it below 960px).
+  //    Mobile/tablet → slim horizontal top bar (~52px) with brand only.
+  //    Desktop      → left side rail (overrides below).
   .top-nav {
-    background: color-mix(in srgb, var(--color-bg) 95%, transparent);
+    display: flex !important;  // beat v1 scoped style's `display: none`
+    align-items: center;
+    gap: var(--space-3);
+    height: 52px;
+    padding: 0 var(--space-4);
+    padding-top: env(safe-area-inset-top);
+    background: color-mix(in srgb, var(--color-bg) 90%, transparent);
+    backdrop-filter: saturate(160%) blur(18px);
+    -webkit-backdrop-filter: saturate(160%) blur(18px);
     border-bottom-color: var(--color-border);
+
     &__wordmark { color: var(--color-text); font-family: var(--font-display-v2); font-weight: 400; }
+    &__sub { display: block !important; font-family: var(--font-accent-v2); }
+
+    // Hide the nav tabs at mobile/tablet — the bottom nav handles routing
+    &__tabs { display: none; }
+
     &__tab {
       color: var(--color-text-muted);
       &:hover { background: var(--color-surface); color: var(--color-text); }
@@ -19,6 +35,12 @@
     }
   }
 
+  // Push main content below the mobile/tablet top bar
+  @media (max-width: 959px) {
+    .top-nav { position: sticky; top: 0; z-index: 30; }
+    main { padding-top: var(--space-3); }
+  }
+
   @media (min-width: 960px) {
     .top-nav {
       position: fixed;
@@ -56,7 +78,8 @@
       }
 
       &__tabs {
-        flex: 0 0 auto !important;  // override v1's flex:1 so __foot can push to bottom
+        display: flex !important;  // re-show at desktop (mobile/tablet had display:none)
+        flex: 0 0 auto !important;
         flex-direction: column;
         gap: 4px;
         align-items: stretch;