/* Cascade order, declared once. Specificity wars become structurally
   impossible: anything in a later layer beats anything in an earlier one,
   whatever the selectors say. Nothing else belongs in this file. */
@layer reset, base, layout, components, overrides;

/* Unlayered on purpose: custom properties only, no selectors to lose. */
@import url("tokens.css");

@import url("reset.css") layer(reset);
@import url("base.css") layer(base);
@import url("layout.css") layer(layout);

/* One block per component. Components consume tokens only -- never a hardcoded
   value -- and never set their own outer spacing; that belongs to the layout
   parent. This list grows forever; its length measures feature count.

   All of it lands in the one `components` layer, so within it the ordinary
   rules still apply: specificity first, then source order -- and source order
   here is this list. That makes the order below load-bearing, which is the
   price of splitting the file at all, and it is the same contract the single
   file had. `primitives` must come first because everything else restates its
   classes to win; the feature files after it do not overlap and could be in
   any order, but leave them alphabetical-by-nothing and grouped as they are.

   Sub-layers (`components.feed`, `components.chat`, ...) would pin the order
   structurally and are the obvious next step. They are NOT a no-op: a later
   sub-layer beats an earlier one whatever the selectors say, so any place an
   earlier file currently wins on specificity would silently flip. Worth doing
   with a pass through the app in a browser, not as part of a file move. */
@import url("components/primitives.css") layer(components);
@import url("components/chrome.css") layer(components);
@import url("components/feed.css") layer(components);
@import url("components/post.css") layer(components);
@import url("components/thread.css") layer(components);
@import url("components/pods.css") layer(components);
@import url("components/notifications.css") layer(components);
@import url("components/phone.css") layer(components);
@import url("components/overlay.css") layer(components);
@import url("components/pod-card.css") layer(components);
@import url("components/forms.css") layer(components);
/* After post.css and thread.css, and that ordering is load-bearing in the way
   the note above warns about: this file restates `.prose` descendants that
   post.css also styles, and restates `.md-bar` inside `.composer-actions`,
   which thread.css lays out. Same specificity in both cases, so source order
   is what decides, and source order is this list. */
@import url("components/markdown.css") layer(components);
@import url("components/chat.css") layer(components);
@import url("components/mod.css") layer(components);