/* ────────────────────────────────────────────────────────────────────
   FX tab — currency tabs × bank heatmap (reuses .rates-* primitives)
   ──────────────────────────────────────────────────────────────────── */

.fx-page .rates-tabs {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 100%;
  max-width: 100%;
  row-gap: 4px;
}

.fx-page .rates-toolbar {
  flex-direction: column;
  align-items: stretch;
}

.fx-page .rates-toolbar__hint {
  align-self: flex-end;
  margin-top: 4px;
}

.fx-overview {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.fx-page .commodity-hero__stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fx-page .hero-stat em {
  display: block;
  margin: 4px 0 0;
  font-size: 0.74rem;
  color: rgba(244, 240, 234, 0.5);
}

/* Different intensity hint for "low is good" columns (sell_*).
   We keep the gradient but make it visually clear via the stat labels. */

.rates-matrix tbody td.is-min {
  font-weight: 700;
  color: var(--c-red);
}