, so the DS rule body.gc-app { display:flex; flex-direction:row } (gochat-mp.css) lays them out side-by-side and the direct-child selectors body.gc-app > .gc-content { ... } apply. React mounts into

, which sits BETWEEN and the rail/content. That extra element: 1. is the only flex child of body.gc-app (rail + content sit one level deeper as block boxes) → they stack vertically and the content drops below the full-height rail (the P0 "y=900" bug); 2. breaks every `body.gc-app > .gc-content` direct-child rule. Fix (minimal, DS-faithful): make #root transparent in the box tree with `display: contents` ONLY on app routes (scoped to body.gc-app). #root's in-flow children (NavRail + main.gc-content) then become the real flex children of body.gc-app, exactly as the prototype HTML — no DS token, selector, or component changes required. The other fragment siblings AppLayout renders are all out of flow, so display:contents does not affect the row layout: .gc-skip-link → position:absolute (off-screen until :focus) .gc-mobile-toggle → position:fixed .gc-mobile-backdrop → position:fixed (+ display:none until .show) Scoped to body.gc-app so non-app (Limitless) routes keep #root intact. ============================================================ */ body.gc-app > #root { display: contents; }