*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 14px; min-height: 100vh; line-height: 1.6; /* Defense in depth: a single un-wrapped flex row anywhere in the app (e.g. a toolbar button group on a narrow phone) can otherwise push the whole page into horizontal scroll instead of just clipping locally. .landing-page already sets this for itself; this covers every other route, which had no such safety net. */ overflow-x: hidden; /* Pins the footer to the bottom of the viewport on short-content pages (e.g. an empty dashboard) instead of it floating right under the content with a gap of bare background below — #app-root is the one flex item that grows to fill whatever space header+footer don't need. On tall pages this has no effect: #app-root just grows past 100vh like a block element normally would, and the footer follows it down. */ display: flex; flex-direction: column; } h1, h2, h3 { font-family: 'DM Serif Display', serif; font-weight: 400; } a { color: inherit; } button { font-family: inherit; } /* HEADER */ /* Scoped to the shared chrome (a direct child of , alongside
) rather than a bare `header` tag selector, because views render their own markup inside #app-root and some use their own semantic
/