/* /Components/Availability/AvailabilityLabel.razor.rz.scp.css */
/* Availability wording. Tokens only, and no media query of its own: the label
   is one line of text at every width, so it has nothing to say about
   breakpoints (Story 1.4). Tone is carried by colour *and* by the wording
   itself — colour alone would leave the claim unreadable to a shopper who
   cannot distinguish it.

   Relocated from Odel.Web alongside AvailabilityLabel.razor itself (Story
   16.10) — unchanged otherwise. A referenced project's scoped CSS is NOT
   folded into the referencing project's own bundle: it compiles into its
   OWN bundle, Odel.Web.Client.styles.css, which App.razor must link
   separately (review finding #1 — the first version of this comment
   claimed otherwise and was wrong, which is exactly how this rule shipped
   unstyled everywhere for a review round). See App.razor's own link and
   comment for where that bundle is actually served from. */

.availability[b-wz0wirbbh5] {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--text-0-72);
  line-height: var(--leading-1-3);
  font-weight: 600;
  color: var(--text-muted);
}

.availability.purchasable[b-wz0wirbbh5] {
  color: var(--success);
}

/* Purchasable, but with something the shopper needs to read before buying. */
.availability.attention[b-wz0wirbbh5] {
  color: var(--gold-dark);
}

.availability.unavailable[b-wz0wirbbh5] {
  color: var(--danger);
}