/* =========================================================================
   Component — the development fixture bar
   -------------------------------------------------------------------------
   Shown when `?fixture=<state>` drives a page from `assets/js/dev/fixtures.js`
   instead of the API, which `config.js` must opt into. It is a warning, not
   chrome: a page in fixture mode is showing canned data, and that has to be
   impossible to miss in a screenshot.

   It lived in `pages/dashboard.css` until U-702, when the pricing page became
   the second page to render it. Two pages sharing markup makes it a component
   (guideline §2, audit rule D-6) — a shared block kept in a file named after
   one page is how the next page ends up linking that page's stylesheet.

   The `[hidden]` pairing is not optional and not cosmetic: `.fixture-bar` sets
   `display`, and a class that sets `display` has the same specificity as the
   `[hidden]` rule in base.css, so whichever stylesheet loads last wins. Without
   its own `[hidden]` rule the bar renders on every load of every page that
   carries it (LEARNING_FRONTEND.md L-FE-11).
   ========================================================================= */

.fixture-bar[hidden] {
  display: none;
}

.fixture-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  margin-bottom: 24px;
  font-size: 13px;
  border: 1px dashed var(--sd-warning-bd);
  border-radius: var(--radius);
  background: var(--sd-warning-bg);
  color: var(--sd-text);
}