/*
 * Metric chips — a pill row that picks ONE metric for the panel below it (ISH-1148).
 *
 * Extracted from `broker-platform-utilization.html`, where ISH-1035 declared it inline as
 * `.but-chips` / `.but-chip` ("Broker Utilization Trends"). ISH-1148 puts the same control on
 * the Sales Report's Trends tab, and per AGENTS.md a component on a second page gets one
 * stylesheet rather than a second paste. Renamed off the `but-` prefix in the move: a shared
 * component named after the one page that happened to build it first is how the next reader
 * concludes it is not for them.
 *
 * Consumers: `broker-platform-utilization.html` (Trends tab, via
 * `js/broker-utilization-trends.js`) and `analytics.html` (Sales Report Trends, via
 * `js/analytics.js`).
 *
 * ── The markup contract ──────────────────────────────────────────────────────
 *
 *   .metric-chips                       role="group", aria-label naming what is being picked
 *     button.metric-chip                one per offerable metric
 *     button.metric-chip.is-on          the one currently driving the panel below
 *     button.metric-chip.is-disabled    offered but not pickable; see below
 *       span                            the short reason tag ("not yet")
 *
 * ⚠️ A metric that cannot be plotted is rendered DISABLED, not omitted. A metric nobody can
 * pick is indistinguishable on screen from a metric nobody thought of, so the chip stays, wears
 * a dashed border, and carries the reason in its `title`. `js/broker-utilization-trends.js`
 * relies on this for the overall-score chip, which needs a series it does not have yet.
 *
 * ── Why the chips and not a <select> ─────────────────────────────────────────
 *
 * The selector is the most important control on a trends panel — it decides what the chart is
 * of — and a `<select>` in a card header is the least prominent thing on screen. The trade is
 * width: ten chips need about 1,066px in a row and wrap to a second row below that, where a
 * `<select>` would not. Measured on ISH-1148's mock at the Sales Report's own content width.
 *
 * ── Tokens ───────────────────────────────────────────────────────────────────
 *
 * Every var() resolves on both hosts, audited per host: --red comes from css/tokens.css;
 * --border, --text and --text-secondary from each page's own :root. ⚠️ --text-label is NOT
 * used here on purpose — it is one of the four tokens css/kpi-card.css documents as genuinely
 * drifted per page, and the disabled tag's colour is pinned below rather than inherited so the
 * two hosts cannot render it differently.
 */

.metric-chips {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.metric-chip {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
}

.metric-chip.is-on {
  background: var(--text);
  border-color: var(--text);
  color: #ffffff;
}

/* A disabled chip, not a missing one: a metric nobody can pick is indistinguishable from a
   metric nobody thought of, and the title carries the reason. */
.metric-chip.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  border-style: dashed;
}

.metric-chip.is-disabled span {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  /* Pinned, not --text-label — see the header. */
  color: #9a4b06;
}

.metric-chip:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}