/**
 * Retreat landing — shared "accent bar" recipe.
 *
 * Hygiene pass (build-tracker.md §Hygiene, "stat-bar consolidation"): the
 * 4px decorative divider existed as five separate copies — hero.css
 * (.retreat-hero__stat::before), who-for.css (.retreat-who-for__note::before),
 * logistics.css (.retreat-logistics__stat::before), join.css
 * (.retreat-join__stat::before, white variant), and dev/style-proof.css
 * (.retreat-proof__stat-bar, a real element, not a pseudo). This file
 * consolidates the part that was byte-identical everywhere: box geometry
 * (display/width/flex-shrink) and the fill colour. Colour is exposed as
 * --retreat-bar-color (default var(--color-accent), the yellow) so
 * join.css's white divider can override it in one declaration instead of
 * duplicating the whole rule.
 *
 * `content: ""` is declared in a SEPARATE rule below, scoped to the 4
 * ::before selectors only (hygiene-pass kickback round 1, code-review
 * finding): .retreat-proof__stat-bar is a real element (a wp:html div),
 * not a pseudo-element. `content` on a real element isn't the harmless
 * no-op it is on most properties — Chromium treats it as CSS content
 * replacement (the box's rendered/a11y-tree content becomes the `content`
 * value, mutating the accessibility tree), while Firefox ignores it. That's
 * browser-divergent behaviour, not a no-op, so it must not be declared on
 * .retreat-proof__stat-bar at all.
 *
 * Deliberately NOT consolidated — left local to each call site, because it
 * genuinely differs and this pass is behavior-neutral:
 *  - border-radius: hero + style-proof declare var(--space-4xs) (4px);
 *    who-for, logistics, join declare var(--radius-pill) (100px). At this
 *    4px width both clamp to the same rendered capsule shape, but the
 *    DECLARED/computed value differs per site, so each keeps its own
 *    declaration rather than silently converging on one.
 *  - height / self-alignment: hero, who-for, logistics use
 *    align-self: stretch (bar fills its flex row). join.css's divider sets
 *    an explicit height instead (see join.css's own comment — it's a child
 *    of the shorter stat row, not the taller lockup row it visually spans).
 *    style-proof's bar relies on its parent's align-items: stretch.
 *
 * Load order doesn't matter here: this file and each call site's file
 * declare disjoint properties on the same selectors (no property is set in
 * both places), so there's nothing for cascade order to resolve.
 */
.retreat-hero__stat::before,
.retreat-who-for__note::before,
.retreat-logistics__stat::before,
.retreat-join__stat::before,
.retreat-style-proof .retreat-proof__stat-bar {
  display: block;
  width: var(--space-4xs); /* 4px, exact comp match at every call site */
  background: var(--retreat-bar-color, var(--color-accent));
  flex-shrink: 0;
}

/* Pseudo-only: see header note above re: why .retreat-proof__stat-bar
   (a real element) is excluded from this rule. */
.retreat-hero__stat::before,
.retreat-who-for__note::before,
.retreat-logistics__stat::before,
.retreat-join__stat::before {
  content: "";
}