style(app-shell): tighten header and nav surface treatment

- drop the semi-transparent bg-panel/50 on the top nav so the page
  background stops bleeding through
- simplify the header separator to after:border-b with a single
  bottom inset
- raise the page title from text-lg/6 to text-xl for room to breathe
- add isolate to the root so Headless UI portals don't fight the
  header's stacking context

Leaves the demo-mode beaker toggle visible in real mode as a
follow-up; gating it cleanly needs a new feature flag.

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

apps/fabro-web/app/layouts/app-shell.tsx

@@ -70,8 +70,8 @@ export default function AppShell({ loaderData }: any) {
 
   return (
     <DemoModeProvider value={demoMode}>
-    <div className="min-h-full">
-      <Disclosure as="nav" className="bg-panel/50">
+    <div className="isolate min-h-full">
+      <Disclosure as="nav" className="bg-panel">
         <div className="px-4 sm:px-6 lg:px-8">
           <div className="flex h-16 items-center justify-between">
             <div className="flex items-center">
@@ -255,10 +255,12 @@ export default function AppShell({ loaderData }: any) {
       </Disclosure>
 
       {!hideHeader && (
-        <header className="relative bg-panel after:pointer-events-none after:absolute after:inset-x-0 after:inset-y-0 after:bottom-0 after:border-y after:border-line-strong">
+        <header className="relative bg-panel after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:border-b after:border-line-strong">
           <div className={`mx-auto ${maxWidth} px-4 py-4 sm:px-6 lg:px-8`}>
             <div className="flex items-center">
-              <h1 className="text-lg/6 font-semibold text-fg">{title}</h1>
+              <h1 className="text-xl font-semibold tracking-tight text-fg">
+                {title}
+              </h1>
               {headerExtra && <div className="ml-auto">{headerExtra}</div>}
             </div>
           </div>