/* ===========================================================================
   NextMaps listing badges
   ---------------------------------------------------------------------------
   Shared by every surface that shows a marketplace listing: the /map browse
   panel and detail modal, the map popup, and the public listing pages, which
   do not load styles.css. Requires assets/brand/design-tokens.css.

   The markup comes from renderListingBadges() in
   js/features/marketplace-rendering.js. Read that file first: it explains what
   each role means and which badges were removed.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   LISTING BADGE SYSTEM
   Four roles, four colours, and colour means nothing else anywhere in a listing
   card. See renderListingBadges() in js/features/marketplace-rendering.js for
   what each role is for and what was removed.

   Every colour here derives from the brand tokens. The badges this replaces
   hardcoded a #667eea/#764ba2 purple gradient, a #10b981 green and a #ef4444
   red, none of which exist in the palette - design-tokens.css says in as many
   words to use the status tokens "not one-off greens/ambers/reds".
   --------------------------------------------------------------------------- */
/* align-self stops the row stretching to full width when its parent happens to
   be a flex COLUMN, which is how the marketplace hub card is built. Without it
   a lone "Application" pill spanned the whole card. Inert in a block parent. */
.nm-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; align-self: flex-start; }

.nm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--nm-radius-pill);
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.55;
  white-space: nowrap;
}

.nm-badges--large .nm-badge { font-size: 12px; padding: 4px 11px; }

/* What the tenure IS. The default case, and the quietest thing in the row. */
.nm-badge--ground {
  background: rgba(var(--nm-blue-rgb), 0.10);
  border-color: rgba(var(--nm-blue-rgb), 0.22);
  color: var(--nm-text-muted);
}

/* Reserved for "this ground is not granted", and used for nothing else. It
   previously shared its amber with the sale state, so a pending APPLICATION and
   a listing UNDER OFFER read as one idea when they describe different things. */
.nm-badge--attention {
  background: rgba(var(--nm-warning-rgb), 0.16);
  border-color: rgba(var(--nm-warning-rgb), 0.45);
  color: var(--nm-warning);
}

/* The state of the sale. */
.nm-badge--deal {
  background: rgba(var(--nm-blue-rgb), 0.24);
  border-color: rgba(var(--nm-blue-rgb), 0.55);
  color: var(--nm-text);
}

/* Something we checked ourselves. One per listing, the highest earned. */
.nm-badge--trust {
  background: rgba(var(--nm-success-rgb), 0.18);
  border-color: rgba(var(--nm-success-rgb), 0.50);
  color: var(--nm-success);
  color: color-mix(in srgb, var(--nm-success) 50%, #ffffff);
}
.nm-badge--trust::before { content: "\2713"; font-weight: 700; }

/* Viewer state (yours, unlocked). A fact about the reader, not the listing, so
   it gets an outline rather than a hue of its own. */
.nm-badge--viewer {
  background: transparent;
  border-color: var(--nm-border-strong);
  color: var(--nm-text-dim);
}

/* Attributes that used to be pills: stage, compliance, transaction type. They
   are read after someone is already interested, so they read as data. */
.nm-listing-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--nm-text-muted);
}
/* Only when it actually follows the badge row, so a meta line used on its own
   does not carry a stray gap. */
.nm-badges + .nm-listing-meta { margin-top: 7px; }
.nm-meta-sep { opacity: 0.45; }

/* Recency, stated once, in place of the NEW pill and the bare date. */
.nm-fresh { color: var(--nm-accent); font-weight: 600; }

/* Commodity chips. Squared off so they read as a taxonomy rather than as more
   status badges - they were previously identical in shape to the pills above. */
.nm-commodity {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--nm-radius-sm);
  background: rgba(var(--nm-blue-rgb), 0.14);
  border: 1px solid rgba(var(--nm-blue-rgb), 0.28);
  color: var(--nm-accent);
  font-size: 11px;
  font-weight: 600;
}
.nm-commodity-more { color: var(--nm-text-faint); font-size: 11px; }