/* A form you fill in line by line -- the one format, for every screen that does.
 *
 * EVERY COLOUR AND EVERY CORNER COMES FROM A TOKEN (D25). What is set here is
 * the SHAPE: what a line is, what a box is, where the words over a box go, and
 * when they are shown.
 */

/* **NO MORE ROOM THAN IT NEEDS.** His instruction, 2026-09-03: the gap between
 * the last line, the button that adds another and whatever comes next was far
 * bigger than anything it was separating. */
.k-lines {
  display: block;
  min-width: 0;
  margin: 4px 0 0;
}

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

/* ONE LINE. It WRAPS rather than scrolling sideways, so on a phone the boxes
 * stack instead of the last one being unreachable. */
/* **EVERY NAME ON ONE LINE, EVERY BOX ON ANOTHER.** His instruction,
 * 2026-09-03: *"line total should be a column label"* -- it sat lower than the
 * names beside it, because a cell holding words is shorter than one holding a
 * box and they were lined up by their bottoms. Stretched instead, with the
 * boxes pushed to the bottom of their cell, the names read as the headings of
 * columns however tall the cells are. */
.k-lines__line {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  padding: 10px;
  margin: 0 0 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 0;
}

/* ONE BOX AND THE WORDS OVER IT, as one thing. What used to sit in a line was
 * the bare control, so three boxes in a row read as three boxes rather than as
 * three questions. */
.k-lines__box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* The widths, named for what they hold rather than in numbers at each point of
 * use -- a name a screen can pick without knowing what the number should be. */
.k-lines__box--wide {
  flex: 3 1 200px;
}

/* It GROWS to take up the slack, so a row is filled rather than ragged. */
.k-lines__box--medium {
  flex: 1 1 120px;
}

/* Wide enough for the words over it as well as what goes in it -- "How many
 * arrived" is the longest of them. */
.k-lines__box--narrow {
  /* **IT DOES NOT GROW.** A box for a figure stretched across the slack left
   * over on a wrapped row reads as the most important thing on the line, which
   * a tax percentage is not. The wide ones take the slack. */
  flex: 0 1 110px;
}

/* **A BOX FOR A SMALL NUMBER.** His instruction, 2026-09-03, looking at a bill
 * line: *"these boxes are coming in two rows, that should not happen -- it
 * should fit into a single row itself."* Eleven boxes on one line only fit if
 * the ones holding two or three digits are sized for two or three digits. */
.k-lines__box--tiny {
  flex: 0 1 76px;
}

.k-lines__box--auto {
  flex: 0 0 auto;
}

/* **THE WORDS WRAP INSIDE THEIR OWN BOX.** Held on one line they run past the
 * edge of a narrow box and into the words beside them -- which is what a bill's
 * nine boxes looked like at the width of a laptop. A label two lines deep is
 * ordinary; two labels touching is not. */
.k-lines__label {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-muted);
}

/* **AT THE DESK THE WORDS APPEAR ONCE, over the first line, so they read as the
 * headings of columns.** Repeated down ten lines they are noise; taken away
 * altogether the boxes are unnamed again, which is what he was looking at.
 *
 * On a phone every line keeps them: a line there is a stack of boxes with
 * nothing above it to read the meaning off. */
@media (min-width: 700px) {
  /* **HIDDEN TO THE EYE, STILL THERE TO BE READ OUT.** `visibility: hidden` and
   * `display: none` both take an element out of what a screen reader can see --
   * so the words on every line but the first would be lost to the one person
   * who most needs them. This is the way that hides a thing and keeps it
   * readable. */
  .k-lines__line:not(:first-child) .k-lines__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* WHAT IS IN A CELL SITS AT THE BOTTOM OF IT, under the name at the top. */
.k-lines__box > :not(.k-lines__label) {
  margin-top: auto;
}

/* THE WAY TO TAKE A LINE OFF lines up with the boxes, not with the words above
 * them -- a button centred on the line floats between a label and its box. */
.k-lines__drop {
  flex: 0 0 auto;
  align-self: end;
}

/* WHAT IS WRONG WITH A LINE SAYS SO UNDER THAT LINE, not at the save button. It
 * is drawn in the same red the rest of the product uses for a refusal, so one
 * look means one thing. */
.k-lines__problem {
  margin: -4px 0 12px;
  padding: 0 10px;
  color: var(--danger);
  font-size: 0.9rem;
}

/* **A BUTTON THAT ADDS A LINE IS A BUTTON, not a bar.** A form is a column, so a
 * button placed straight into one stretches the whole width of it -- which is
 * how "Add another thing" came to be drawn as a full-width band while every
 * other button in the product is its own width. */
.k-lines__add {
  align-self: flex-start;
}