/*
 * Fee rate chip — the small tinted pill that sits beside each fee amount on a Fee
 * Revenue Breakdown table (Platform Fees, ISD Pay Fees, Extended Payable, Early
 * Withdrawal, Instant Transfer), stating what that amount came to as a percentage
 * of the month's PTR and colouring it against the month before.
 *
 * ISH-480. Two pages draw that table and they are deliberately kept identical
 * (see js/analytics.js's renderFeeBreakdownTable() and js/broker-detail.js's,
 * plus .docs/AGENT_GUIDE.md §H): analytics.html shows every filtered broker,
 * broker.html shows one. Both hosts carry their own copy of every other .analytics-table
 * rule, so a third private copy of these five rules would have been the path of
 * least resistance — but the colour thresholds are the whole point of the chip
 * and two copies of a threshold drift silently. Hence a shared file, per the
 * repo's one-stylesheet-per-shared-component convention.
 *
 * Host variables used: --border-light, and nothing else. Both hosts define it.
 * Every text colour here is literal on purpose — the hosts' own tokens all fail
 * against these tints, and each failure would land on only one of the two pages:
 *
 *   --green  #28a745 on the green tint          3.11:1   (needs 4.5:1)
 *   --text-label #777 (analytics) on the grey   4.07:1
 *   --text-label #999 (broker) on the grey      2.59:1
 *
 * The literals below measure 4.57:1 (green), 6.30:1 (red) and 6.37:1 (grey), the
 * same on both pages. Don't "simplify" them back to var(--green)/var(--text-label).
 *
 * The Fee % column next to Total Fees is deliberately NOT a chip: it is already that
 * percentage for the total, printed as plain text.
 *
 * ⚠️ CORRECTION (ISH-683). This comment used to end "...and the five chips on a row sum
 * to it." THEY DO NOT, and cannot: the five fees are two levels of a hierarchy, not five
 * peers. The glossary has it as
 *
 *     Total Fees  = Platform Fees + ISD Pay Fees
 *     ISD Pay Fees = Extended Payable + Early Withdrawal + Instant Transfer
 *
 * so Platform + ISDPay + Extended + Early + Instant counts ISD Pay's contribution twice.
 * Settled against live dev data rather than by reading: across 330 non-empty broker-months
 * from info_hub, `totalFee == platformFee + isdPayFee` held on 325 (271 exactly, 54 inside
 * half a cent of float noise), and ISD Pay Fees is 62% of Total across the window — so the
 * five-way sum would need the three components to be ~0, which they are not. The five
 * chips sum to roughly 162% of the Fee % column.
 *
 * Nothing about the CHIPS is wrong — each is genuinely its own fee's share of that month's
 * PTR, which is the useful reading and the one ISH-480 asked for. What was wrong was the
 * claim that they add up. Neither table asserts additivity on screen, and neither should
 * start: the subtitle on broker.html's copy says what a pill is and stops there.
 *
 * (The 5 rows that did not reconcile are a warehouse question, not a UI one — the largest
 * was a current, still-open month where Total ran $24k above Platform + ISD Pay. Worth a
 * look if it persists once the month closes; it does not change the hierarchy above.)
 *
 * There is no ▲/▼ glyph in the chip, by explicit direction (ISH-480) and for a
 * good reason: the number inside it is this month's share of PTR, not a change
 * against last month, so an arrow beside it would read as though 1.79% were the
 * movement. The consequence is that hue is the only channel carrying the
 * comparison, which a red/green-blind reader can't separate — the figures
 * themselves are still legible, the month-over-month verdict is what they lose,
 * and the Report Definitions tab states the rule in words. If that ever needs
 * fixing, the fix is a second channel that isn't a direction glyph (a border
 * weight, a dot, a text suffix), not a re-added arrow.
 */

/* Wraps a fee cell's amount and its chip. The cell is right-aligned, so without a
   fixed slot for the chip the dollar amounts would each be pushed left by however
   wide their own chip happened to be — "0.22%" against "12.34%" is a visible step.
   Laying the pair out as a flex row with a fixed-width chip slot keeps the five
   dollar columns aligned down the table, which is the whole reason they are
   right-aligned in the first place. */
.fee-amount-with-chip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.fee-rate-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  /* The fixed slot .fee-amount-with-chip's comment describes. 6ch covers the
     widest real content ("12.34%") and is font-relative, so it holds if the
     table's font size changes. Content is centred within it, so a short figure
     doesn't sit visibly off-centre next to its neighbours. */
  min-width: 6ch;
  justify-content: center;
}

/* Held or improved against the previous month — "similar to last month or more".
   The tolerance band that decides which class is applied lives in the two render
   functions (FEE_RATE_DROP_TOLERANCE), not here. */
.fee-rate-chip.is-holding {
  background: #eaf6ee;
  border-color: #bfe2cb;
  color: #1a7f37;
}

/* Fell further than the tolerance band allows. */
.fee-rate-chip.is-down {
  background: #fbeded;
  border-color: #edc7c7;
  color: #a62626;
}

/* Oldest row on the table, or a previous month with no rate to compare against
   (zero PTR). There is nothing to be green or red about, so the chip carries the
   figure and no verdict — rendering it as "holding" would invent a comparison.

   The text colour is NOT var(--text-label), which is what a muted chip wants to
   reach for and what the first draft of this file used — see the contrast table
   in the header for why that made the same chip unreadable on broker.html and
   merely marginal on analytics.html. */
.fee-rate-chip.is-baseline {
  background: #f4f4f4;
  border-color: var(--border-light);
  color: #595959;
}