/* VarnaOps — full-width app shell (LAYOUT EXPERIMENT, 2026-09-03) ============================================================================ WHY THIS IS A SEPARATE FILE, AND WHAT IT IS ALLOWED TO DO The site is one 860px column on every page, so a 1920px screen is about half empty. This file is the alternative the owner asked to SEE before deciding: it changes only WHERE things sit, never what they look like. No new colours, no new type scale, no new components — every rule below reuses the tokens and classes `styles.css` already defines. It is a separate file, linked AFTER styles.css, for two reasons: - reversibility. Deleting this file plus the body class on each page restores the current site exactly; nothing in styles.css is edited. - merge safety. Other writers are editing page COPY in the same tree, and a layout change appended into styles.css would collide with them. TWO PAGE TYPES, ONE CHROME .app-shell — index only since 2026-09-03 (runs and account moved to .page-wide the same day, owner: "centred exactly like the legal pages"). Full width, persistent left sidebar at >=1100px. .page-wide — the text pages (terms, dpa, privacy, methods, ...), login, runs and account. The prose column stays ~72ch because that is a READING measure and widening it would be a regression; only the header and the footer stretch, so both page types read as one product. Everything here is scoped under one of those two body classes. An unscoped rule would change pages that never opted in, including the generated attribution-standalone.html, which inlines styles.css and not this file. ========================================================================== */ :root { /* The gutter the chrome and the app content share, so the brand, the sidebar edge and the first card all line up on one vertical. */ --shell-pad: clamp(20px, 2.6vw, 44px); --shell-side: 236px; /* The header's real height: 14px padding x2 + the 42px brand lockup + 1px border. The sidebar is fixed, so it needs the number rather than a layout relationship. Below 1100px the sidebar is gone, which is also where the brand shrinks, so the two never disagree. */ --shell-head: 71px; /* App content cap. Wide enough for a runs table and a four-across card grid, short of the "text stretched across a billboard" failure. */ --shell-max: 1480px; } /* ---- 1. chrome spans the viewport ---------------------------------------- */ /* The top bar spans the viewport on both page types. The footer does so only on app pages, whose content is full width too; on a text page it follows the reading column, otherwise the copyright line starts at the viewport edge while the text it sits under is centred (owner, 2026-09-03, seen on the contact page). */ .app-shell .nav .wrap, .page-wide .nav .wrap, .app-shell > footer .wrap { max-width: none; padding-left: var(--shell-pad); padding-right: var(--shell-pad); } /* The top bar follows the reader. It carries the brand, the two site dropdowns and the account avatar, which is the one control whose menu is injected by nav.js — so it stays exactly where that script expects to find it. */ .app-shell .nav, .page-wide .nav { position: sticky; top: 0; z-index: 50; background: var(--bg); } /* THE PRODUCT LINE, IN THE TOP BAR (owner, 2026-09-03). It is the sentence that used to sit above the stepper as `.app-head h2`, MOVED and not copied: index.html has one copy of it and every other page now has one too. Muted and one line, because it is a label for the mark beside it and not a headline — a second bold sentence in a header is two brands. It goes below 1024px rather than wrapping. At that width the nav's own links are already competing for the row, and a tagline that pushes them onto a second line costs more than it says. `white-space: nowrap` is what makes the breakpoint the only place it can disappear: without it the sentence would wrap silently at some width in between and the header would grow a line nobody chose. */ .app-shell .nav-tag, .page-wide .nav-tag { /* BOLD, still muted (owner, iteration 4). The weight is what was asked for; the colour stays var(--muted) because bold AND var(--text) beside the wordmark is a second lockup rather than a label on the first one, and the point of the line is that it reads as secondary. */ color: var(--muted); font-size: 0.86rem; font-weight: 600; line-height: 1; white-space: nowrap; padding-left: 14px; margin-left: 2px; border-left: 1px solid var(--line); } @media (max-width: 1024px) { .nav-tag { display: none; } } /* A sticky header hides whatever an in-page anchor scrolls to. The legal pages are all deep links, so every heading keeps a landing margin. */ .page-wide .prose h2, .page-wide .prose h3, .page-wide [id] { scroll-margin-top: calc(var(--shell-head) + 14px); } /* ---- 2. the rail IS the stepper (index.html only) ----------------------- The first version put a hand-written