feat(monitor/frontend): dashboard 3-col grid layout (320 / 1fr / 320, no body scroll)

Replaces the demolition scaffold with the structural grid that Tasks 8-21
fill in. Root is a 4-row grid (topstrip / alertbanner / main / bottomticker)
with named grid-areas; the main row contains a 3-col sub-grid (left aside /
center section / right aside) at fixed 320px / 1fr / 320px. 100dvh, no body
scroll, ethos custom properties only — no template SCSS variables touched.

Adds --col-panel-width: 320px to the ethos token block (no magic number in
the layout module). index.tsx becomes a one-line re-export of Dashboard so
the lazy-route contract in routers.tsx stays unchanged.

No placeholder components. The empty <aside>/<section> elements are the
column containers themselves; subsequent tasks add real children inside
them rather than swap stub components.

Verified in browser at 1920x1080: rgb(10,10,10) bg, 320/1247/320 col rects,
1px var(--fg-4) rules between columns, body has no scroll. All 5 Plan 5
Task 7 Design QA boxes checked.

PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.module.scss

@@ -0,0 +1,43 @@
+// ©AngelaMos | 2026
+// Dashboard.module.scss
+
+.root {
+  display: grid;
+  grid-template-rows: auto auto 1fr auto;
+  grid-template-areas:
+    'topstrip'
+    'alertbanner'
+    'main'
+    'bottomticker';
+  height: 100dvh;
+  width: 100vw;
+  background: var(--bg);
+  color: var(--fg-1);
+  overflow: hidden;
+}
+
+.grid {
+  grid-area: main;
+  display: grid;
+  grid-template-columns: var(--col-panel-width) 1fr var(--col-panel-width);
+  min-height: 0;
+}
+
+.left {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  border-right: 1px solid var(--fg-4);
+}
+
+.center {
+  position: relative;
+  overflow: hidden;
+}
+
+.right {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  border-left: 1px solid var(--fg-4);
+}

PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.tsx

@@ -0,0 +1,18 @@
+// ©AngelaMos | 2026
+// Dashboard.tsx
+
+import styles from './Dashboard.module.scss'
+
+export function Dashboard(): React.ReactElement {
+  return (
+    <div className={styles.root}>
+      <main className={styles.grid}>
+        <aside className={styles.left} />
+        <section className={styles.center} />
+        <aside className={styles.right} />
+      </main>
+    </div>
+  )
+}
+
+Dashboard.displayName = 'Dashboard'

PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/dashboard.module.scss

@@ -1,19 +0,0 @@
-// ©AngelaMos | 2026
-// dashboard.module.scss
-
-.scaffold {
-  height: 100dvh;
-  width: 100%;
-  background: var(--bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.label {
-  font-family: var(--font-sans);
-  font-size: var(--type-label);
-  letter-spacing: var(--letter-spacing-label);
-  text-transform: uppercase;
-  color: var(--fg-3);
-}

PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/index.tsx

@@ -1,14 +1,4 @@
 // ©AngelaMos | 2026
 // index.tsx
 
-import styles from './dashboard.module.scss'
+export { Dashboard as Component } from './Dashboard'
-
-export function Component(): React.ReactElement {
-  return (
-    <div className={styles.scaffold}>
-      <span className={styles.label}>MONITOR THE SITUATION · SCAFFOLD</span>
-    </div>
-  )
-}
-
-Component.displayName = 'Dashboard'

PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/styles/_tokens.scss

@@ -208,4 +208,7 @@ $container-full: 100%;
   --type-label:  11px;   // UPPERCASE labels
   --type-num-l:  20px;   // KPI numbers
   --type-num-xl: 28px;   // hero KPI numbers (rare; only top-of-panel)
+
+  // Layout — fixed panel column width (spec §11.1)
+  --col-panel-width: 320px;
 }