/* Page-scoped design CSS, served from /public and ed by PageShell for the ACTIVE LOCALE ONLY. HAND-MAINTAINED. Edit THIS file: there is no generator and no pipeline to re-run. The banner this replaces said "GENERATED from src/styles/vega-design/pages/.css -- edit that, not this", and both halves were false. Nothing imported that copy (app/globals.css imports only the five shared sheets), its bytes had already diverged from the ones the browser gets, and the regeneration it named -- tools/slice_pages.py plus tools/emit_components.py -- predates every change made on import and would flatten them. It has been deleted. See docs/frontend/VEGA_DESIGN_INTEGRATION.md. Living under /public puts these sheets OUTSIDE the bundler, on purpose. They are copied to the response byte for byte: unhashed, unminified, and NOT fingerprinted, so an edit ships under the URL the previous version already holds and you must bust the cache yourself when a change has to land now. That is a standing, deliberate exception rather than an oversight -- the sheet is chosen per locale at request time by a , which a static `import` compiled into a JS chunk cannot do. These sheets cannot both be loaded: about.css and about-en.css share 32 of their selectors and give them different values (FAQs.html sets line-height:1.28!important on .faqpage__h1, FAQs-en.html deliberately omits it). Whichever loaded second would win for BOTH languages. Upstream this is why the design ships two root layouts; this app serves one URL per page, so PageShell links exactly one sheet instead. The @layer statement below is repeated verbatim from app/globals.css, and it has to be -- as does the `@layer vega-design { ... }` wrapper around every rule in this file. Tailwind 4 emits its utilities into a REAL `@layer utilities`, and unlayered CSS outranks every layer no matter where it sits in the document; unwrapping these rules would therefore not reorder the cascade, it would invert the one the design was built against, with each page rule beating every Tailwind utility on the page. The statement is the other half: layer PRIORITY is fixed by where a layer name is first seen in the document, and React hoists a without guaranteeing it lands after the global sheet. If this file were parsed first and said only `@layer vega-design {}`, vega-design would be declared before `theme` and `base` and would therefore lose to Tailwind's preflight -- the page would load its own CSS and be visibly restyled by the reset. Naming the full order here makes the file self-anchoring: whichever sheet the browser sees first establishes the same order, and the second is a no-op. */ @layer theme, base, vega-design, components, utilities; @layer vega-design { /* Originally lifted from the inline