/* * branding.css — the ONE stylesheet an app page includes. * ───────────────────────────────────────────────────────────────────────────── * * Before this, every page hand-listed its own stylesheets and they drifted: * `theme.css` documented itself as "loaded by every page" while six pages did not * load it, and `login.html` picked up the component kit without the polish layer * that is supposed to come with it. Nothing looked broken enough to notice, which * is exactly why it stayed wrong. * * An app page now includes this file and nothing else. The layers, in cascade * order: * * 1. brand-tokens.css the canonical colour, type, spacing, radius, elevation * and motion values, light and dark. Everything else reads * these; no file below may hard-code a colour or a size. * 2. theme.css shared polish that must not know about any page: thin * theme-aware scrollbars, smooth scrolling, text * rendering, focus visibility. * 3. responsive.css how every page behaves at every width: the five named * breakpoints, the container and action-row alias sets, * overflow hygiene and the touch-target floor. Last, * because it corrects layout the two layers above set up. * * The responsive rules were the tail end of theme.css until they grew a contract * of their own. They are the one part of the shell that has to outrank a page's * inline