network flow: band vs. full-bleed KPI sparkline with a text scrim

CmkKpiStatCard was always full-bleed, with the value/delta sitting on
top of the sparkline and nothing protecting either from overlap. Add
a sparkHeightMode prop ('band' | 'full', default 'full'):

- band: column layout - the value row keeps its natural height, the
  sparkline gets whatever's left below it, so the two never overlap.
- full: the sparkline runs edge-to-edge behind the value row,
  protected by a card-colored scrim sized to the value row's own
  measured box (useResizeObserver + getBoundingClientRect): opaque
  behind the text, fading out past its right and bottom edges. The
  fade distance scales with the card (clamp, cqw/cqh) rather than a
  flat pixel amount, so it doesn't swamp the curve on small cards.

Also: the state badge moves to a single top-right position in every
variant, the value text switches to the card's neutral color (the
data color now belongs to the curve alone), and the network-flow KPI
card defaults to band mode.

CMK-38081

Change-Id: If5becea475938eddf5f35388ccb02cd2dff5210b