style: enhance topbar consistency and responsiveness across guide and product pages

backend/app/guide.html

@@ -23,24 +23,33 @@
     margin: 0; background: var(--bg); color: var(--fg);
     font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   }
-  /* Shared top bar: same ink-and-teal brand as the app, links back to it. */
+  /* Topbar mirrors the app header EXACTLY (gradient, height, logo size,
+     tagline, link styles) so navigating app <-> docs doesn't jump. Update
+     styles.css .header alongside any change here. */
   .topbar {
-    background: var(--brand); color: #fff;
-    padding: 12px 1.25rem;
-    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
+    background: linear-gradient(180deg, #1b1b1c, var(--brand)); color: #fff;
+    padding: 14px 28px;
+    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
+    position: sticky; top: 0; z-index: 30;
+    border-bottom: 1px solid rgba(255,255,255,.07);
   }
-  .topbar .brand {
-    color: #fff; font-weight: 650; font-size: 1.02rem;
-    text-decoration: none; letter-spacing: .2px; white-space: nowrap;
-  }
-  .topbar .brand { display: inline-flex; align-items: center; gap: .6rem; }
-  .brand-logo { height: 26px; width: auto; display: block; }
-  .topbar .lab { color: rgba(255,255,255,.6); font-size: .82rem; }
+  .topbar .brand { display: inline-flex; align-items: center; text-decoration: none; }
+  .brand-logo { height: 28px; width: auto; display: block; }
   .topbar .brand:hover { opacity: .88; }
-  .topbar nav { margin-left: auto; display: flex; gap: 1.1rem; flex-wrap: wrap; }
-  .topbar nav a { color: rgba(255,255,255,.82); text-decoration: none; font-size: .88rem; }
+  .topbar .lab {
+    flex: 1 1 280px; min-width: 0; font-size: 12.5px; line-height: 1.5;
+    color: #fff; opacity: .85;
+  }
+  .topbar nav { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
+  .topbar nav a { color: rgba(255,255,255,.82); text-decoration: none; font-size: 13px; }
   .topbar nav a:hover { color: #fff; text-decoration: underline; }
   .topbar nav a.current { color: #fff; font-weight: 600; }
+  .topbar .topbar-btn {
+    background: rgba(255,255,255,.12); color: #fff;
+    border: 1px solid rgba(255,255,255,.45);
+    padding: 5px 14px; border-radius: 9px; font-size: 13px; text-decoration: none;
+  }
+  .topbar .topbar-btn:hover { background: rgba(255,255,255,.22); text-decoration: none; }
   main { max-width: 860px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
   h1 { font-size: 1.7rem; margin: 0 0 .25rem; }
   h2 { font-size: 1.25rem; margin: 2.2rem 0 .6rem; padding-top: .6rem; border-top: 1px solid var(--border); }
@@ -113,10 +122,10 @@
   </svg></a>
   <span class="lab">Psychological Text Analysis with Contextualized Construct Representation</span>
   <nav>
-    <a href="/">Dashboard</a>
     <a href="/welcome">About</a>
     <a href="/guide" class="current">Guide</a>
-    <a href="/product">How it works</a>
+    <a href="/product" id="nav-product" hidden>How it works</a>
+    <a class="topbar-btn" href="/">Open dashboard</a>
   </nav>
 </header>
 <main>
@@ -433,5 +442,14 @@ and what you saw; screenshots help. DMs to Deva work too, and email as a fallbac
   });
 })();
 </script>
+<script>
+  // Mirror the app header: the internal "How it works" link only shows for
+  // lab members and above (the server gates /product regardless).
+  fetch("/api/auth/me").then((r) => r.json()).then((me) => {
+    if (["lab", "maintainer", "pi"].includes(me.role)) {
+      document.getElementById("nav-product").hidden = false;
+    }
+  }).catch(() => {});
+</script>
 </body>
 </html>

backend/app/product.html

@@ -23,24 +23,33 @@
     margin: 0; background: var(--bg); color: var(--fg);
     font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   }
-  /* Shared top bar: same ink-and-teal brand as the app, links back to it. */
+  /* Topbar mirrors the app header EXACTLY (gradient, height, logo size,
+     tagline, link styles) so navigating app <-> docs doesn't jump. Update
+     styles.css .header alongside any change here. */
   .topbar {
-    background: var(--brand); color: #fff;
-    padding: 12px 1.25rem;
-    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
+    background: linear-gradient(180deg, #1b1b1c, var(--brand)); color: #fff;
+    padding: 14px 28px;
+    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
+    position: sticky; top: 0; z-index: 30;
+    border-bottom: 1px solid rgba(255,255,255,.07);
   }
-  .topbar .brand {
-    color: #fff; font-weight: 650; font-size: 1.02rem;
-    text-decoration: none; letter-spacing: .2px; white-space: nowrap;
-  }
-  .topbar .brand { display: inline-flex; align-items: center; gap: .6rem; }
-  .brand-logo { height: 26px; width: auto; display: block; }
-  .topbar .lab { color: rgba(255,255,255,.6); font-size: .82rem; }
+  .topbar .brand { display: inline-flex; align-items: center; text-decoration: none; }
+  .brand-logo { height: 28px; width: auto; display: block; }
   .topbar .brand:hover { opacity: .88; }
-  .topbar nav { margin-left: auto; display: flex; gap: 1.1rem; flex-wrap: wrap; }
-  .topbar nav a { color: rgba(255,255,255,.82); text-decoration: none; font-size: .88rem; }
+  .topbar .lab {
+    flex: 1 1 280px; min-width: 0; font-size: 12.5px; line-height: 1.5;
+    color: #fff; opacity: .85;
+  }
+  .topbar nav { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
+  .topbar nav a { color: rgba(255,255,255,.82); text-decoration: none; font-size: 13px; }
   .topbar nav a:hover { color: #fff; text-decoration: underline; }
   .topbar nav a.current { color: #fff; font-weight: 600; }
+  .topbar .topbar-btn {
+    background: rgba(255,255,255,.12); color: #fff;
+    border: 1px solid rgba(255,255,255,.45);
+    padding: 5px 14px; border-radius: 9px; font-size: 13px; text-decoration: none;
+  }
+  .topbar .topbar-btn:hover { background: rgba(255,255,255,.22); text-decoration: none; }
   main { max-width: 860px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
   h1 { font-size: 1.7rem; margin: 0 0 .25rem; }
   h2 { font-size: 1.25rem; margin: 2.2rem 0 .6rem; padding-top: .6rem; border-top: 1px solid var(--border); }
@@ -112,10 +121,10 @@
   </svg></a>
   <span class="lab">Psychological Text Analysis with Contextualized Construct Representation</span>
   <nav>
-    <a href="/">Dashboard</a>
     <a href="/welcome">About</a>
     <a href="/guide">Guide</a>
     <a href="/product" class="current">How it works</a>
+    <a class="topbar-btn" href="/">Open dashboard</a>
   </nav>
 </header>
 <main>