/* Layout * Page scaffolding that did not exist in the prototype. * * Everything the prototype already styled — the header, the stat row, the * wheel, the charts — lives in its own component file next to this one, * lifted unchanged. This file is only for what the rewrite added: the * background canvas, the stacking context it needs, and the development * banner. * * Every colour resolves through a token in tokens.css. */ /* ---------- background canvas ---------- */ /* Sits behind all content and never takes a click. Stays hidden unless background-canvas.js selects a mode, so the CSS star field on shows through untouched — that field is the original design, not a fallback. */ .bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .bg-canvas[hidden] { display: none; } /* Content stacks above the canvas. The sticky header sets its own z-index. */ .page { position: relative; z-index: 1; } /* ---------- page shell ---------- */ .wrap { max-width: 900px; margin: 0 auto; padding: 0 18px; } /* ---------- development banner ---------- */ /* Only ever rendered when the server runs with SEVENF_DEV=1. Deliberately loud: if this is visible in production, something is wrong with the build. */ .devbanner { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 50; display: none; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--ink); color: var(--surface); font-size: 13.5px; box-shadow: var(--shadow-card); } .devbanner.show { display: inline-flex; }