/* The split form, which is two forms: a payment divided on its way into the
   ledger (#161) and a cost taken apart after it was booked (#551).

   Its own stylesheet since #551. It lived in `07-menue-combo-split.css`, which
   is three unrelated concerns in one file and was the one the split grew in —
   two lanes adding to it in the same round brought it within six lines of the
   500 the build enforces. The menu and the combo stay where they were; this is
   the part that grows.

   Linked directly after `07`, so nothing about the cascade moves: no rule in
   either file selects anything the other does. */

/* --- Splitting a payment, and splitting a cost already booked (#161, #551) ---

   A part reads as one line in a ledger rather than as a form. It was seven
   labelled fields, each on its own full-width line: the rule was written for the
   27 rem sheet and every field that mattered had to claim the whole of it. At
   52 rem that produced fourteen labels for two parts, the second part below the
   fold, and the remainder below that — so nothing could be compared with
   anything.

   Three things carry the layout now. The four fields that say what a part *is*
   share a row. The Art and the Leistungszeitraum are optional — left empty a
   line falls back to the payment date, which is #427's documented behaviour — so
   they fold away behind a control that states them, and cost a line instead of
   three fields. And the labels are written once, over the first part. */
.split {
  display: grid;
  gap: 1rem;
}

/* Two parts are two things. Without a boundary `Entfernen` was followed
   immediately by `HAUS` again and the form read as one endless list. */
.split__part {
  display: grid;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.split__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* The row number the refusal already speaks in: `Es fehlt noch: Konto (2)` named
   a row nothing on screen identified. */
.split__number {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Where an inherited house came from. In the head rather than under the field it
   is about: inside the wrapper it made that wrapper taller than its three
   neighbours, and the row aligns wrappers, so the Haus control sat 26 px above
   the line on every part after the first. */
.split__origin {
  font-size: 0.78rem;
  color: var(--text-faint);
}

/* The window's own control says what the window is, so a part that has one is
   legible without being unfolded. Pushed to the far end with the removal, since
   the number and what the line is for are what read first. */
.split__toggle {
  margin-left: auto;
}

.split__toggle--set {
  color: var(--brass);
}

/* Haus, Konto, Betrag — what every part answers, and the only three it always
   does. The account is given the room because it is the field that decides
   where the money lands, and because it is the longest: the longest label in
   the portfolio is `4304 Sonst. Kosten (Laub, Müllbeh.management)` at 341 px of
   text, against 202 px for the longest street and 70 px for the largest cost
   ever booked. Four controls could not give it that at any ratio.

   One column where the sheet is narrow, so nothing is cut there either and the
   tab order is the reading order. */
.split__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  align-items: end;
}

/* 16 rem is the longest street plus the select's own indicator; 6.25 rem is the
   largest cost ever booked; 4,5 rem holds `100,00`, which is the longest a
   percentage gets. The account takes the rest.

   The percentage costs the account 81 px, measured in Chromium at the 52 rem
   panel: 380 px before #752 and 299 px after, against the 337 px the longest
   label in the portfolio needs — `4304 Sonst. Kosten (Laub, Müllbeh.management)`,
   which is now cut by five characters in the shut combo. It is the lesser of the
   two: the control is a text input over the whole chart, so the list opens on the
   full label and the chosen one scrolls in the box, where a percentage below the
   fold would not be typed at all.

   Tied to the wide sheet, so reverting that slice leaves the one-column form
   above rather than four columns nothing fits in. */
.sheet__panel--wide .split__row {
  grid-template-columns:
    minmax(0, 16rem) minmax(0, 1fr)
    minmax(0, 4.5rem) minmax(0, 6.25rem);
}

/* Below the panel's own full width the columns do not fit, and the account is
   what gives: at a 500 px window its column measured 50 px with three columns and
   0 px with four, where the label printed on top of the amount's — `A CMOUWNT`.
   One column per field instead.

   The breakpoint is the panel's width rather than a phone's, because that is when
   the row stops fitting: `--wide` is `min(52rem, 100%)`, so under 52 rem the sheet
   is the window and the four columns are being squeezed. It was 30 rem and left
   every window between a phone and a laptop cramped. */
@media (max-width: 52rem) {
  .sheet__panel--wide .split__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A grid and a flex child both refuse to shrink below their content without it,
   and an account name is long enough to push a column open. */
.split__field--building,
.split__field--account,
.split__field--percent,
.split__field--amount,
.split__field--unit {
  min-width: 0;
}

/* Seven concepts, not fourteen labels. Written once over the first part, where
   the fields below line up under them — and handed to whichever part is first
   once that one is removed. */
.split__part:not(:first-of-type) .split__row > .field > span:first-child {
  display: none;
}

/* What defaults, and what the head says when it has been answered: the flat
   (#371), the kind and the two ends of the window (#427). */
.split__fold {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: end;
}

.split__fold > .field {
  flex: 1 1 8rem;
  min-width: 0;
}

/* A line of its own: a unit is `1. OG links ehemals Maisonette` under a number,
   and 97 of the portfolio's 270 were cut in a shared column. It costs nothing —
   the fold is already a deliberate expansion. */
.split__fold > .split__field--unit {
  flex: 1 1 100%;
}

/* A note is a sentence — `5 weitere Rechnungen, noch aufzuteilen` — and it takes
   a line of its own for the reason the unit does: at 8rem it is cut exactly where
   the sentence starts saying something (#664). */
.split__fold > .split__field--notiz {
  flex: 1 1 100%;
}

/* The two ends of one service window, side by side and never wrapped apart. A
   range whose halves sit on different rows reads as two unrelated dates. */
.split__fold > .split__zeitraum {
  flex: 2 1 15rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  align-items: end;
}

/* The remainder is the whole point of the form, so it stays in view while the
   amounts that move it are typed. It sat under every field of every part, which
   at two parts meant reading it by memory. */
.split__foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: grid;
  gap: 0.35rem;
  padding-bottom: 0.5rem;
  background: var(--surface);
}

.split__rest {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  justify-content: flex-end;
  font-weight: 600;
  padding: 0.5rem 0;
  border-top: 1px solid var(--line);
}

.split__rest--open {
  color: var(--text);
}

/* The same shortfall in the other unit, beside the money and quieter than it.
   The amount is what the form refuses over; the percentage is what the clerk was
   typing in (#752). */
.split__distributed {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* The name the purpose line gave a share, or the note that a part keeps the
   Belege. It sits in the part's head beside its number — the name is what makes
   the pattern transferable, since the amounts belong to one payment and it does
   not. */
.split__name {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--brass);
}

/* A select whose options carry padded columns rather than one run-on string.
   An <option> takes no markup, so the columns are spaces and only a monospace
   face holds them — which is why this is a class and not the default. */
.select--spalten {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}