/* * Nalar Platform — Primitive component styles. * Must be loaded AFTER nalar-tokens.css. All colors/spacings reference * CSS vars from tokens file — never raw hex. * * Dark surface text rule (important): * `body.nx-shell h1|h2|h3` in tokens sets color: var(--nx-ink) (~black). * That selector beats a parent wrapper's `color: #fff` due to specificity, * so headings inside dark-gradient wrappers (.nx-hero, .nx-auth-showcase, * .nx-sidebar) would render as dark-on-dark. The rule below restores * white headings on ALL dark surfaces in one place. */ body.nx-shell .nx-hero h1, body.nx-shell .nx-hero h2, body.nx-shell .nx-hero h3, body.nx-shell .nx-auth-showcase h1, body.nx-shell .nx-auth-showcase h2, body.nx-shell .nx-auth-showcase h3, body.nx-shell .nx-sidebar h1, body.nx-shell .nx-sidebar h2, body.nx-shell .nx-sidebar h3, body.nx-shell .edge-page-hero h1, body.nx-shell .edge-page-hero h2, body.nx-shell .edge-page-hero h3 { color: inherit; /* wrapper sets #fff — inherit it instead of overriding */ } /* ── Shell layout: sidebar + topbar + content ────────────────────────── */ .nx-shell-root { --nx-sidebar-w: 248px; /* single source for sidebar width — toggle follows this via calc() */ display: grid; /* `minmax(0, 1fr)` — NOT bare `1fr` — is required. Grid's default min * is `auto` (content-based), so wide children (tables, toolbars) push * the column wider than viewport and the whole page scrolls * horizontally. `min 0` lets the column shrink so internal scroll * containers (`.table-responsive`, `overflow-x:auto` toolbars) can do * their job instead of bulging the layout. */ grid-template-columns: var(--nx-sidebar-w) minmax(0, 1fr); min-height: 100vh; position: relative; /* anchor for the sidebar-toggle that lives outside