/* The Recipes screen.
 *
 * EVERY COLOUR, EVERY CORNER AND EVERY SIZE COMES FROM A TOKEN (D25). Nothing
 * here writes a colour out, so the whole screen follows the theme without
 * knowing it exists.
 *
 * 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 -- which has cost
 * this product an undo button once and a whole block of the purchase form once
 * more.
 */

/* How many still need one. Sits under the sentence explaining the screen, so it
 * reads as part of the same thought rather than as a heading of its own. */
.k-recipes__count {
  margin: 0 0 12px;
  color: var(--text-muted);
}

/* Where the form appears -- IN PLACE OF the list it was opened from, which
 * comes down while it is up. Nothing is drawn when there is no form, so it
 * collapses to nothing on its own. */
/* Everything a bill of material can be written for. It comes down while a form
 * is open and comes straight back when it closes. */
.k-recipes__list {
  display: block;
  min-width: 0;
}

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

.k-recipe-form {
  margin: 0 0 16px;
}

/* The lines of a bill of material 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. */
.k-recipe-line__qty {
  /* Figures line up down the column, so two amounts can be compared at a
   * glance. */
  text-align: right;
}