/* ==========================================================================
   MKH - Bill of materials
   Visual language from the Claude Design project.
   Requires tokens.css, base.css, components.css and layout.css.

   The editor is the only form here built from repeating rows rather than a
   fixed run of fields, which is why it has a sheet of its own: a product
   picker, a quantity, and a way to take the row away, repeated as many times
   as the bill needs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   One line of a bill
   -------------------------------------------------------------------------- */

/* Grid rather than flex, so the quantity columns line up down the list. With
   flex each row would size itself to its own contents and the numbers would
   sit at a different place on every line, which is the layout that makes a
   column of figures hard to scan.

   The remove button is a fixed track so it stays put whether or not the row
   above it happens to be showing a note underneath. */
.bom-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 152px 34px;
  align-items: start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.bom-line:last-of-type { border-bottom: 0; }

/* The fields inside a line carry no bottom margin of their own; the row owns
   the spacing, so a row with a note under it stays the same height as one
   without. */
.bom-line .field { margin-bottom: 0; }

/* Aligned to the input rather than to the cell. The controls are 38px and this
   is 30px, so 4px centres it against the box next to it; without that it lines
   up with the unit note underneath and reads as belonging to the wrong thing. */
.bom-line__remove { margin-top: 4px; }

.bom-line__unit {
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--txt-3);
}

/* A link through to the bill of something made in-house. Kept quiet: it is a
   way onward, not a thing to read on every row. */
.bom-line__made {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--txt-3);
}
.bom-line__made svg { width: 12px; height: 12px; flex: none; color: var(--accent-graphic); }

.bom-lines { margin-bottom: var(--sp-3); }

.bom-lines__empty {
  padding: var(--sp-3) 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--txt-3);
}

/* Rendered only when there is something to say, so the gap between the last
   row and the add button does not carry an empty slot the rest of the time. */
.bom-lines__error { margin-bottom: var(--sp-3); }

/* --------------------------------------------------------------------------
   What a bill makes
   -------------------------------------------------------------------------- */

/* Wider than a line's quantity because this one carries a label above it. */
.bom-output {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: var(--sp-3) var(--sp-4);
  align-items: start;
}

/* --------------------------------------------------------------------------
   The listing
   -------------------------------------------------------------------------- */

/* Input names run long. Clamped to two lines so one bill with fifteen inputs
   cannot make its row four times the height of every other. */
.bom-from {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Narrowing
   -------------------------------------------------------------------------- */

/* Below this the three tracks stop fitting: the picker is squeezed to about
   the width of a product code, which is not enough to read what was chosen.
   The picker takes the full width and the quantity sits beside the remove
   button underneath it. */
@container content (max-width: 620px) {
  .bom-line {
    grid-template-columns: minmax(0, 1fr) 34px;
    row-gap: var(--sp-2);
  }
  .bom-line__product { grid-column: 1 / -1; }
  .bom-line__remove { margin-top: 0; align-self: center; }
  .bom-output { grid-template-columns: minmax(0, 1fr); }
}

@supports not (container-type: inline-size) {
  @media (max-width: 900px) {
    .bom-line {
      grid-template-columns: minmax(0, 1fr) 34px;
      row-gap: var(--sp-2);
    }
    .bom-line__product { grid-column: 1 / -1; }
    .bom-line__remove { margin-top: 0; align-self: center; }
    .bom-output { grid-template-columns: minmax(0, 1fr); }
  }
}