/* The screen's own figures, beside its name. The bar itself is the shared one
 * now (`components/screen-bar.js`, D168), so it needs no rules here. */
.k-purchases__figures {
  margin: 0 0 12px;
  color: var(--text-muted);
}

/* A list this module shows -- every purchase, and every payee. It comes down
 * while a form is open and comes straight back when it closes. Both screens use
 * this one name rather than each having its own (D21). */
.k-purchases__list {
  display: block;
  min-width: 0;
}

.k-purchases__form {
  min-width: 0;
}

/* ------------------------------------------------------------- the form */

/* **THE PARTS OF THIS FORM SIT CLOSER TOGETHER THAN A FORM'S PARTS USUALLY DO.**
 * His instruction, 2026-09-03: *"there is a lot of difference between that line,
 * then Add a line, then Additional costs -- can you reduce this distance?"*
 *
 * A form is a column with 16px between its parts, which is right for a form of
 * six boxes. This one has a bill's worth: header, lines, the button that adds
 * one, four charge cards, what was paid, notes and seven totals -- and at 16px
 * apiece the seller scrolls past empty room between things that belong
 * together. It is set HERE rather than on `.k-form`, because it is a fact about
 * this form's size and not about forms. */
.k-purchase-form {
  gap: 8px;
}

/* **CLOSER TO WHAT IT HEADS.** */
.k-purchase-form__heading {
  margin: 12px 0 6px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

/* THREE ACROSS ON A DESKTOP, ONE UNDER ANOTHER ON A PHONE. `auto-fit` with a
 * minimum rather than a media query, so the shape follows the space the form
 * actually has rather than the width of the window -- which is not the same
 * thing once the shell's own panel is beside it. */
.k-purchase-form__header,
.k-purchase-form__charges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  min-width: 0;
}

/* A CHARGE AND WHO WAS PAID IT, TIED TOGETHER.
 *
 * Both of these classes were used by the form and had NO RULE BEHIND THEM, so
 * they drew as bare browser defaults: the "Paid to" box floated as its own grid
 * cell with nothing saying which charge it belonged to, and the row went ragged
 * beside the single-height Packing cell. A class with no rule behind it is
 * invisible to every check there is -- this file's own header says so, and it
 * has already cost this product one undo button. */
.k-purchase-charges__pair {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  /* THE TWO READ AS ONE THING, which is the whole point: the amount and who
   * received it are one fact about one charge. */
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.k-purchase-charges__who {
  min-width: 0;
}

/* ------------------------------------------------------------ the lines */

.k-purchase-lines {
  display: block;
  min-width: 0;
}

/* The lines of a bill are the shared format now (`components/lines.js`) -- what
 * a line is, how wide each box is, where the words over a box go and when they
 * are shown all live there. What is left here is only what is true of THIS
 * screen's boxes. */
/* **IT IS DRAWN AS A BOX LIKE THE OTHERS ON THE LINE.** His instruction,
 * 2026-09-03: *"why is it coming differently? It should also have a box, like
 * the other columns have a box for each row."*
 *
 * **AND THE BOX SAYS IT IS NOT ONE TO TYPE IN**: no white behind it, and no
 * border you could mistake for a field waiting to be filled. It is a figure
 * worked out from the boxes beside it. */
.k-purchase-line__total {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--control-height);
  min-width: 92px;
  padding: 8px 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: right;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text);
}

/* THE LAST LINE CANNOT BE REMOVED, and it has to LOOK unavailable rather than
 * simply refusing when pressed. A button that looks live and does nothing reads
 * as the product being broken. */

.k-purchase-line__problem {
  margin: -4px 0 10px;
  padding: 0 10px;
}

/* ----------------------------------------------------------- the totals */

.k-purchase-totals {
  margin: 20px 0 0;
  padding: 14px 16px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 0;
}

/* **CLOSER TOGETHER THAN THEY WERE.** His instruction, 2026-09-03: *"the
 * summary at the bottom before save -- reduce the distance between one line and
 * the other."* The explanations used to sit under the figures and needed the
 * room; they are behind the `i` now, so the room was left over. */
.k-purchase-totals__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 1px 0;
  min-width: 0;
}

/* WHAT EACH TOTAL MEANS IS BEHIND THE `i` BESIDE ITS NAME (his instruction,
 * 2026-09-03), so the name and its mark sit on one line together. */
.k-purchase-totals__label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 160px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-muted);
  min-width: 0;
}

.k-purchase-totals__value {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}

/* WHY PACKING HAS NO "PAID TO" BOX, in the space where the other four have one.
 * Left empty, the card reads as one somebody forgot to finish. */
.k-purchase-charges__said {
  margin: 0;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-subtle);
}

/* --------------------------------------------- what never arrived */

/* ITS OWN ROW, BENEATH THE LINE, and only there when there is a shortfall. Four
 * more boxes on every line of every bill, on a phone, for the case that hardly
 * ever happens is a form nobody can face -- so they appear the moment a
 * shortfall is typed and go again when it is not.
 *
 * MARKED OUT FROM THE LINE ABOVE by an indent and a warm background, because a
 * second row of boxes with nothing between them reads as more of the same line. */
.k-purchase-short {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 20px;
  margin: -6px 0 8px 12px;
  background: var(--warn-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 0;
}

.k-purchase-short__missing {
  flex: 0 0 auto;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.k-purchase-short .k-form__control {
  flex: 1 1 140px;
  min-width: 0;
}

.k-purchase-short__due,
.k-purchase-short__back {
  flex: 0 1 130px;
}

/* THE QUALITY CHECK SCREEN: two lists on one page, and the form that opens
 * above them.
 *
 * TWO HEADINGS THAT HAVE TO READ AS HEADINGS. A page with two tables and
 * nothing between them is two tables the seller has to work out the difference
 * between. There is no shared section-heading class in this product yet -- and a
 * class with no rule behind it draws as a bare browser default and no check can
 * see it, which has already cost this product one undo button (see screen.css).
 * So it is written here, inside the piece that needs it, and lifting it into a
 * shared one is its own job when a second screen wants it.
 */
.k-inspection__section {
  margin: 28px 0 0;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

/* The form sits ABOVE both lists rather than under the row that opened it,
 * because the row that opened it may be in either of them -- and a form that
 * moves about the page depending on which list was pressed is a form the seller
 * has to hunt for. `bringIntoView` scrolls to it, which is the shared way
 * anything revealed is made findable (D33). */
.k-inspection__form:not(:empty) {
  margin: 16px 0 0;
}

/* WHAT WENT RIGHT, AND IT MUST NOT LOOK LIKE WHAT WENT WRONG.
 *
 * `k-screen__said` is the failure line and its own stylesheet says so in as many
 * words: one look for one meaning, and anything merely informational gets its
 * own look elsewhere. Two different situations looking identical has been logged
 * against this project twice already (cycles 8 and 24) -- and a save that WORKED
 * drawn in a red box is the worst version of it, because the seller reads it as
 * something having gone wrong and does the work again.
 *
 * Found in a real browser with every check on both screens green.
 */
.k-purchases__done {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* THE FOUR FIGURES ABOVE THE SUMMARY (step 7).
 *
 * A class with no rule behind it draws as a bare browser default and no check
 * can see it -- that has already cost this product one undo button (see
 * screen.css), so these are written the moment the elements are.
 *
 * THEY WRAP RATHER THAN SCROLL. Four figures across a phone is two rows of two,
 * not a sideways scroll: a number nobody scrolls to is a number nobody reads.
 */
.k-inspection__headline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0 0;
  min-width: 0;
}

.k-inspection__figure {
  flex: 1 1 160px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 0;
}

.k-inspection__figure-label {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-subtle);
}

.k-inspection__figure-value {
  font-family: var(--font);
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  /* A long figure must not push the row sideways on a phone. */
  overflow-wrap: anywhere;
}

/* WHAT THE FIGURE DOES NOT SAY ON ITS OWN. A pass rate over half the work is
 * not the pass rate, and this is where that is admitted. */
.k-inspection__figure-note {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-subtle);
  overflow-wrap: anywhere;
}