/*
 * app.css: the app stylesheet app.html links (beside the unlayered
 * /fonts/inter.css, which holds only @font-face rules). It holds the
 * cascade-layer order and the imports, nothing else.
 *
 *   harmony-important  the !important declarations of the harmony layer.
 *                      For !important the EARLIER layer wins, so these beat
 *                      the legacy !important declarations.
 *   legacy             public/styles.css (frozen) and then
 *                      public/src/design-system.css (the tokens plus the
 *                      legacy design-system rules and keyframes), in the
 *                      order app.html linked them before, so their own
 *                      cascade is unchanged.
 *   harmony            the component grammar (docs/DESIGN-RULES.md). For
 *                      normal declarations the LATER layer wins, so harmony
 *                      beats legacy whatever the specificity.
 *
 * harmony.css is imported WITHOUT layer(): the file carries its own
 * top-level @layer harmony {} and @layer harmony-important {} blocks.
 * Imported into a layer, those blocks would nest (harmony.harmony-important)
 * and their !important would lose to the legacy !important.
 *
 * An unlayered rule beats every layer for normal declarations, so a style
 * the app injects at runtime is wrapped in @layer legacy {} (lint-views.js).
 *
 * app.html links this file and /fonts/inter.css and does not preload the
 * three imports: WebKit reuses a preloaded stylesheet on reload and on a
 * same-tab navigation without revalidating it, so a tab left open across a
 * deploy would keep the old CSS (measured 2026-10-08, pinned by
 * tests/cascade-layers-structure.test.js). The cost is one round trip for
 * this small file before the three imports start in parallel.
 */
@layer harmony-important, legacy, harmony;
@import url('/styles.css') layer(legacy);
@import url('/src/design-system.css') layer(legacy);
@import url('/src/harmony.css');