/*
    THE SITE'S SUPPLY AND WHAT A SCREEN MEASURED AGAINST IT, AS ONE SURFACE.

    Components/Shared/SupplyStrip.razor is the component and this is its stylesheet. Two screens wear
    it - Compliance and Storage - and it is here rather than in either of their files for the reason
    every shared component's rules are: a rule under one screen's heading is edited by somebody who
    believes they are editing that page.

    WHAT IT DOES NOT OWN, WHICH IS NEARLY ALL OF IT. The surface and the band are
    `.sv-card sv-card--flush` and `.sv-card__band`; the joined row of figures, the pinned caption,
    the unit's size and the four ways a cell is marked are `.sv-grid--kpi-flush` and the
    `.sv-kpi--*` markings beside it. All of those are utilities.css's, because the pipeline strip on
    Projects draws the same object out of the same parts. `.sv-kpi` is KpiTile's and `.sv-supply` is
    SiteSupplyReadout's. This composes them and copies none - that is the dual-presence defect
    wearing a tidy name, and it is what put a filled band on two screens and an unfilled one on the
    third.

    ONE RULE IS LEFT, and it is the one thing about this component nothing else can state.
*/

/* THE HEADING OUT-WEIGHS THE FACTS BESIDE IT. `.sv-label` is a 10px uppercase chip, which is right
   for the labels in the run - MUNICIPALITY, BLOCK, TARIFF - and wrong for the words that say what
   the whole strip is about: set the same as its own facts, the heading read as a fourth one.

   THE ONE PLACE THE BAND'S HEADING FACE IS STATED TWICE, and the other is `.sv-card__band`'s own
   rule in utilities.css, which this matches deliberately. Every other band heading is CardHeader's
   h2; this one is a `.sv-label` a host promotes, and a rule in utilities.css may not name the
   `.sv-supply` family because site-supply-readout.css owns it.

   THE INK IS THE READOUT'S, NOT THE PAGE'S. This band only ever renders inside `ReadoutStrip`,
   whose ground is a warm near-black in both themes - `--sv-text` is the paper value and would draw
   the heading in near-black on it. The h2 the same rule matches gets this from utilities.css; a
   promoted label has to say it, for the same reason it has to say the face. */
.sv-supplystrip__band .sv-supply > .sv-label {
  font: 700 13.5px/1.3 var(--sv-font-sans);
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--sv-readout-ink);
  white-space: nowrap;
}