/* The Sales screen.
 *
 * EVERY COLOUR AND EVERY CORNER COMES FROM A TOKEN (D25), and every class this
 * screen uses has a rule here -- a class with no rule behind it draws as a bare
 * browser default and no check can see it.
 */

/* THE TWO SECTIONS. What is waiting on him comes first, above everything, so
 * D51's mandatory step cannot be buried among five thousand counted sales. */
.k-orders__section {
  margin: 20px 0 4px;
  font-size: 1.1rem;
}

.k-orders__section:first-of-type {
  margin-top: 0;
}

.k-orders__explain,
.k-orders__worth {
  margin: 0 0 12px;
  color: var(--text-muted);
}

/* Where the "which product is this SKU" form appears, above the list it was
 * opened from. Nothing is drawn when no form is open. */
.k-orders__form {
  display: block;
  min-width: 0;
}

/* **THE BUTTON AND THE NAME OF THE LIST BELOW IT, ON ONE ROW.**
 *
 * His instruction, 2026-09-02: *"make this counted and not counted come side by
 * side. Currently it comes one below the other. It's not good."*
 *
 * The button that opens what is NOT counted, the name of what IS, and the
 * figures that list adds up to. The table cannot join them -- it is a table --
 * so what shares the row is everything that is not one.
 *
 * `baseline`, like every other row of this shape in the product: the name is
 * 20px and the figures 13px, and centred the small text floats in the middle of
 * the big text instead of sitting on the line with it. */
.k-orders__topline {
  display: flex;
  /* **NOWRAP, and that is the whole of it.** Left to wrap, the heading row is
     as wide as its own figures -- seven blocks of them -- so it never fits
     beside the button and drops to the line below, which is exactly what he
     asked to be rid of. It shrinks instead (`min-width: 0` below), and the
     figures wrap among themselves inside it. */
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 12px;
}

/* The bar gives up the margin it carries on its own. */
.k-orders__topline .k-items__bar {
  flex: 0 0 auto;
  margin: 0;
}

/* And the heading row takes whatever is left, so the figures run on from the
   name rather than wrapping under the button. */
.k-orders__topline .k-screen__headline {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

/* **THE NAME OF THE LIST SHOWING, beside the buttons.** Whichever of the two is
   on, its name and what it adds up to sit on the same row as the buttons -- so
   the row reads as one thing rather than a bar and a heading under it.

   The uncounted list carries its Refresh button here too: it acts on that list
   and nothing else, so it belongs with its name rather than in the screen's
   bar, where it would read as something the whole screen does. */
.k-orders__head-held {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.k-orders__head-held .k-orders__section {
  margin: 0;
}

/* The name of the counted list, on the same row, with no margin of its own --
   the row owns the spacing. */
.k-orders__head-counted .k-orders__section {
  margin: 0;
}