fix: align preview header controls

Author: Gabriel Jang

systems/web/src/App.tsx

@@ -295,7 +295,6 @@ export default function App() {
 
   return <div className="app-shell" style={workbench.shellStyle}>
     <header className="global-header">
-      <div className="brand-mark">FO</div>
       <div className="brand-copy"><strong>FabOps</strong><span>Decision intelligence for yield excursions</span></div>
       <div className="deployment-identity-strip" aria-label="Deployment identity">
         <div className="deployment-identity-strip__primary">

systems/web/src/design-system.css

@@ -138,7 +138,7 @@ button, textarea, input, select { font-size: var(--ds-type-control); }
 .global-header .brand-copy span { font-size: var(--ds-type-meta); }
 .mobile-status-ribbon span { font-size: var(--ds-type-meta); }
 .deployment-identity-strip {
-  margin-left: auto;
+  margin-left: var(--ds-space-4);
   min-width: 0;
   display: grid;
   grid-template-columns: minmax(190px, 1.25fr) minmax(118px, .7fr) minmax(180px, 1fr);

systems/web/src/styles.css

@@ -62,7 +62,7 @@ button:focus-visible, textarea:focus-visible, input:focus-visible, [tabindex]:fo
 
 .app-shell { display: grid; grid-template-columns: 246px minmax(0, 1fr) 318px; grid-template-rows: 52px 38px calc(100vh - 90px); min-height: 100vh; }
 .global-header { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--border); background: var(--surface); z-index: 3; }
-.global-header > div:nth-child(2) { display: flex; flex-direction: column; min-width: 260px; }
+.global-header .brand-copy { display: flex; flex-direction: column; min-width: 260px; }
 .global-header span { color: var(--ink-muted); font-size: 11px; }
 .brand-mark { width: 30px; height: 30px; display: grid; place-items: center; background: #173f70; color: white; font-size: 11px; font-weight: 800; border-radius: 4px; }
 .header-status { margin-left: auto; display: flex; gap: 8px; }