/* The panel a seller sees when they upload a file (D141).

 * It covers the screen, because it is the only thing that matters while it is
 * open: nothing has gone in, and the seller has to settle every row before
 * anything will. A panel tucked into a corner of the page reads as a report of
 * something that already happened.
 */
.k-bring {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--overlay);
}

.k-bring__box {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* **WIDE ENOUGH FOR A WHOLE ROW ON ONE LINE.** It was 900px, which fitted the
   * words but not the boxes -- so what was wrong with a row and how to put it
   * right always sat one above the other, and he asked for one line. Three
   * pickers, a button and the reason need about 1,000px between them.
   * `max-width: 100%` is what keeps a phone unaffected. */
  width: 1200px;
  max-width: 100%;
  max-height: 100%;
  padding: 20px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px var(--shadow);
}

.k-bring__title {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.k-bring__summary {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
}

/* **SAID PLAINLY AND ALWAYS, not only when something is wrong.** A seller who
 * does not know nothing has happened yet will close this believing their file
 * went in. */
.k-bring__promise {
  margin: 0;
  padding: 10px 12px;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface-raised);
  border-radius: var(--radius);
}

/* **THEY WRAP.** Three buttons fitted a phone while the counts were single
 * digits; at `Not accepted (60)` the last one ran past the edge of the panel and
 * `All` was clipped -- so the view holding the whole file was the one a seller
 * could not read the name of. */
.k-bring__views {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


.k-bring__view--on {
  color: var(--on-brand);
  background: var(--brand);
  border-color: var(--brand);
}

.k-bring__list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
}

/* The heading row above the list is laid out by this same rule -- see the
 * wide-screen block below. Two things laid out by two rules line up only until
 * one of them is touched. */
.k-bring__row,
.k-bring__headings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* A row in the seller's way is marked, so scrolling past it is not possible
 * without noticing. */
.k-bring__row--stuck {
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

/* One left out on purpose is quiet rather than alarming -- it is settled. */
.k-bring__row--out {
  color: var(--text-muted);
  opacity: 0.7;
}

.k-bring__line {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.k-bring__name {
  flex: 0 0 auto;
  font-weight: 700;
}

/* The short word and its mark, side by side. */
.k-bring__wording {
  display: flex;
  align-items: center;
  gap: 4px;
}

.k-bring__words {
  font-weight: 700;
}

/* What the row reads as, and under it any note. A column, so a note never
 * pushes the pickers on to a line of their own. */
.k-bring__says {
  display: flex;
  flex: 1 1 140px;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* **QUIETER THAN THE ROW IT SITS ON.** It is worth reading and not worth
 * stopping for, and drawn at the same weight as the reason a row is refused it
 * would read as one. */
.k-bring__note {
  color: var(--text-muted);
  font-size: 12px;
}

/* **ONE ROW, NOT TWO.** His instruction, 2026-09-01: *"when it is coming to
 * confirmation, it is coming in two rows. Instead of two rows, it should come
 * in single row."*
 *
 * It was `1 1 100%`, which is an instruction to take a whole line of its own --
 * so what was wrong with a row and how to put it right always sat one above the
 * other, and a screenful showed half as many rows as it could. Given a width to
 * aim for instead, it sits beside the words on a laptop and drops below them on
 * a phone, which is the only place there is no room for both. */
.k-bring__fixing {
  display: flex;
  flex: 3 1 700px;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

/* **THE PICKERS SHARE WHAT IS LEFT AFTER THE BUTTON, rather than each taking
 * whatever its own contents want.** Left to size themselves they used the whole
 * line between them and pushed "Leave this row out" onto a line of its own --
 * which is the second row he asked to be rid of. */
.k-bring__field {
  display: flex;
  flex: 0 1 180px;
  /* Without this a picker cannot be made narrower than its longest option, so
   * the three of them pushed the button onto a line of its own again. */
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

/* **THE CONTROL ITSELF IS `k-pick` NOW, and everything about how it looks lives
 * beside `.k-control`.** What is left here is how wide one may go, which is the
 * one thing about it that really is this panel's business. */
.k-bring__fixing .k-pick {
  min-width: 0;
}

/* Its own width, never a share of the line -- a button that stretches to fill
 * a gap is a different size on every row. */
.k-bring__drop {
  flex: 0 0 auto;
}


/* **THE PAGER**, under the list and above the button that writes. Same shape as
 * the table's footer, because it is the same job: how many, where you are, and
 * the two ways to move. */
.k-bring__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-muted);
}

.k-bring__counted {
  flex: 1 1 auto;
  min-width: 0;
}

.k-bring__size {
  display: flex;
  align-items: center;
  gap: 8px;
}

.k-bring__size-choice {
  min-width: 0;
  width: auto;
}

/* **THE HEADING ROW, and the per-box labels, are a WIDE-SCREEN pair.**
 *
 * His decision, 2026-09-01. Neither happens on a phone: below this width the
 * boxes stack, so a heading row would sit above whatever wrapped first -- and a
 * label pointing at the wrong box is worse than the same label said three times.
 *
 * **THE TWO RULES ARE IN ONE BLOCK ON PURPOSE.** Written apart, one screen width
 * would show the headings AND the labels, and another would show neither. */
.k-bring__headings {
  display: none;
}

@media (min-width: 1200px) {
  .k-bring__headings {
    display: flex;
    padding-bottom: 0;
    font-size: 12px;
    color: var(--text-muted);
    background: none;
    border-color: transparent;
  }

  /* AND THE HEADINGS ARE NOT DRAWN AS FIELD LABELS -- the rule below hides
   * those, and these are the same class. Said here so it is not hidden by its
   * own kind. */
  .k-bring__headings .k-bring__field {
    color: var(--text-muted);
  }

  /* Said once above, so not again on every box. */
  .k-bring__list .k-bring__field-label {
    display: none;
  }

  /* **THE LEFT OF EVERY ROW IS THE SAME WIDTH, or the boxes start at a
   * different place on each one and the headings point at nothing.** Left to
   * size themselves, `Line 2` and a long SKU push the boxes along by however
   * many letters that row happens to carry. */
  .k-bring__line {
    flex: 0 0 52px;
  }

  .k-bring__name {
    flex: 0 0 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .k-bring__says {
    flex: 0 0 130px;
  }

  /* The gap where the button is on a real row. It is a span, never a button:
   * something the keyboard can reach and nobody can use is a trap. */
  .k-bring__gap {
    flex: 0 0 auto;
    visibility: hidden;
  }
}

.k-bring__none {
  margin: 0;
  padding: 16px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.k-bring__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


/* **DEAD UNTIL THE WHOLE FILE CAN GO IN**, and it looks dead. A button that is
 * disabled but looks pressable is a seller pressing it and learning nothing. */
.k-bring__go:disabled {
  color: var(--text-muted);
  background: var(--surface-raised);
  border-color: var(--border);
  cursor: default;
}