/* ── The site's supply, read ACROSS rather than down ──────────────────────────
   SiteSupplyReadout states what the connection was set to, on three screens that
   deliberately no longer ask: financials, storage and compliance. It is a
   restatement of settings the reader made themselves, so it earns a line and not
   a block - stacked as label-over-value pairs it took about 170 mm of vertical
   space on a screen where nothing was wrong, at the top of every visit.

   The consequence sentences below the row are the exception, and they are drawn
   only while there is something missing to have a consequence about. A site with
   nothing unresolved reads one line and moves on.
   ------------------------------------------------------------------------ */

.sv-supply {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;

  /* Wider between facts than within one, which is what makes the run parse as
     three pairs rather than six words. The vertical half is what a wrapped row
     needs and a single-line row never sees. */
  gap: var(--sv-space-2) var(--sv-space-4);
}

/* Baseline rather than centre: a 10px uppercase label and a 13px value have
   different box heights, and centring them leaves the label riding high enough
   to read as a superscript. */
.sv-supply__fact {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sv-space-2);

  /* A long schedule name is the one value here that can exceed its share of the
     row, and a flex item's default minimum is its content. Without this the
     panel pushes past the page edge instead of wrapping. */
  min-width: 0;
}

/* The link that says where the fields live sits at the end of the same run, and
   is pushed to the far edge only where the row has space for it - on a wrapped
   row it follows the last fact instead of stranding itself on a line of its own.

   THE WAY OUT OF A READOUT IS THE READOUT'S AMBER. This runs inside `ReadoutStrip`,
   whose ground `--sv-accent` measures under 3:1 against; `--sv-readout-link` is the
   same hue lifted to read on it, and is what `.sv-card__facts-link` takes on the two
   strips whose band is a `CardHeader` rather than this one. */
.sv-supply__where {
  margin-left: auto;
  color: var(--sv-readout-link);
}