fix(layout): keep sticky content below the environment banner

src/components/EnvironmentBanner.tsx

@@ -28,7 +28,8 @@ const EnvironmentBanner: React.FC = () => {
 
   return (
     <div
-      className={`${bgColor} text-white text-center py-1 text-sm font-medium sticky top-0 z-50`}
+      data-env-banner
+      className={`${bgColor} text-white h-(--env-banner-height) flex items-center justify-center text-sm font-medium sticky top-0 z-50`}
     >
       {mode.toUpperCase()} Environment
     </div>

src/components/OnPageIndex.tsx

@@ -143,7 +143,8 @@ const OnPageIndex: React.FC<OnPageIndexProps> = ({ containerRef }) => {
         if (topmost) setActiveId(topmost);
       },
       // The top inset must stay below the landing offset headings scroll to
-      // (`scroll-mt-8`/the sticky nav's `top-8`, 32px) — otherwise a heading
+      // (`scroll-mt-8`/the sticky nav's `top-8`, 32px, plus the environment
+      // banner's height when there is one) — otherwise a heading
       // that has just been scrolled to sits *above* the observed band and
       // is never marked intersecting, letting the next heading down (which
       // has already entered the band) incorrectly take over as active.
@@ -219,7 +220,7 @@ const OnPageIndex: React.FC<OnPageIndexProps> = ({ containerRef }) => {
   return (
     <nav
       aria-label="On this page"
-      className="hidden xl:block xl:sticky xl:top-8 self-start z-10"
+      className="hidden xl:block xl:sticky xl:top-[calc(2rem+var(--env-banner-height))] self-start z-10"
     >
       <p className="text-xs font-semibold uppercase tracking-[0.18em] text-rmiblue-800">
         On this page

src/index.css

@@ -75,3 +75,15 @@
   --color-rmigray-700: #2a2a2b;
   --color-rmigray-800: #231f20;
 }
+
+/* Height of EnvironmentBanner, which only non-production builds show. Things
+   that stick to the top of the screen sit below it. */
+:root {
+  --env-banner-height: 0px;
+}
+:root:has([data-env-banner]) {
+  --env-banner-height: 1.75rem;
+}
+html {
+  scroll-padding-top: var(--env-banner-height);
+}

src/pages/ComparisonPage.tsx

@@ -307,7 +307,7 @@ const ComparisonPage: React.FC = () => {
       </Link>
 
       {/* ── Pathway summary cards ── */}
-      <div className={`${colClass} sticky top-0 z-20`}>
+      <div className={`${colClass} sticky top-(--env-banner-height) z-20`}>
         {pathways.map((p) => (
           <PathwaySummaryCard
             key={p.id}

src/pages/PathwaySearch.tsx

@@ -103,7 +103,7 @@ const PathwaySearch: React.FC = () => {
       <div className="border-t border-slate-200"></div>
       <div
         ref={searchSectionRef}
-        className={`sticky rounded-lg top-0 z-10 bg-gray-50 inset-x-0 transition-shadow duration-200 ${isSticky ? "shadow-md" : ""}`}
+        className={`sticky rounded-lg top-(--env-banner-height) z-10 bg-gray-50 inset-x-0 transition-shadow duration-200 ${isSticky ? "shadow-md" : ""}`}
         style={{ margin: "0 calc(-50vw + 50%)" }}
       >
         <div className="container mx-auto px-4">