/* Styling for the shared fields (see form.js).
 *
 * Every COLOUR and TYPEFACE comes from a token, and the commit gate refuses one
 * written out (D25). Sizes and spacing do NOT: there is no size or spacing scale
 * in tokens.css yet, so every px below is written here and nothing checks it.
 * An earlier version of this said "nothing here is written literally, and the
 * commit gate refuses one that is" -- untrue twice over, and the sort of claim
 * the next reader trusts instead of looking. The corner comes from --radius.
 *
 * Two things this file is responsible for and nothing else can be:
 *
 *  - **Everything is at least 40px to press** (D67), which is met head on
 *    rather than assembled out of padding. A control whose height is padding
 *    plus a line of text changes size with the font and stops meeting the
 *    rule without anyone noticing.
 *  - **Nothing pushes the page sideways.** Every control is width:100% inside
 *    a column that can shrink, and a long line of text wraps rather than
 *    widening its row. The one thing every screen in this product is not
 *    allowed to do is scroll sideways.
 */

.k-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* A form is a panel of its own, so it reads as a separate thing from the
   * list it opened from. */
  padding: 16px;
  margin: 16px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* min-width: 0 is load-bearing, not tidying: inside a flex column a child
   * refuses to shrink below its content without it, so one long word in a
   * message would widen the whole panel and push the page sideways. */
  min-width: 0;
}

/* The heading holds its name and the mark that explains the form, so it is a
 * row -- a heading holding text and an element wraps the mark the moment the
 * words are long enough. */
.k-form__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  color: var(--brand);
}

/* ---------------------------------------------------------------- one field */

.k-form__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* **A FORM THAT IS REALLY A SMALL TABLE** -- one line per thing, the same
 * question asked of each, under two headings. His instruction, 2026-09-01: he
 * was shown a table and given a stack of labelled boxes.
 *
 * **ON A WIDE SCREEN ONLY.** Below this the two columns stack, and a heading row
 * would then sit above whatever wrapped first -- a heading pointing at the wrong
 * thing is worse than the same label said on every line. So the heading row and
 * the side-by-side layout appear together or not at all, in ONE block, exactly
 * as the bring-in panel's headings do. */
.k-form__headings {
  display: none;
}

@media (min-width: 700px) {
  .k-form--rows .k-form__row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  /* The label column is one width for every line, or the boxes start at a
   * different place on each and the headings point at nothing. */
  .k-form--rows .k-form__label-line {
    flex: 0 0 180px;
  }

  .k-form--rows .k-form__row > .k-control {
    flex: 1 1 200px;
    min-width: 0;
  }

  /* **WHAT IS WRONG WITH A LINE TAKES A LINE OF ITS OWN.** Beside the box it
   * would squeeze the box to nothing on the one occasion the seller most needs
   * to read what is in it. */
  .k-form--rows .k-form__field-problem {
    flex: 1 1 100%;
    margin-left: 192px;
  }

  .k-form__headings {
    display: flex;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
  }

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

/* A FIELD THE FORM HAS HIDDEN HAS TO ACTUALLY GO.
 *
 * `hidden` works by the browser's own `display: none`, and ANY rule that sets
 * display on a class beats it -- so the rule directly above put every dependent
 * field back on the page. The form believed it had hidden them, the controls
 * were correctly disabled, and the seller saw a row of empty boxes anyway.
 *
 * It cost more than it looks. Needs Review is built on one rule: a design and a
 * variation are CHOSEN from what is already in use, or added deliberately, and
 * "there is never a free-text box sitting open inviting a name that is nearly,
 * but not quite, one that already exists". Three of them were sitting open.
 * Item Master's "New category" box has been on screen the same way since it
 * shipped.
 *
 * NOTHING IN ANY CHECK COULD SEE THIS. The stand-in browser has no stylesheets
 * at all, so `hidden` is simply true there and every check about a dependent
 * field passes. Only opening the real thing shows it -- and this screen had
 * never been opened, because nothing in the app led to it until today. */
.k-form__row[hidden] {
  display: none;
}

/* The label and its "i" side by side. The "i" carries its own 40px target and
 * draws a 14px circle, so it sits in the line without enlarging it. */
.k-form__label-line {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}

.k-form__label {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* "needed" in a word rather than an asterisk. An asterisk means nothing
 * without a legend somewhere else on the screen, and the legend is always the
 * part that gets left out. */
.k-form__needed {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* **THE SHAPE COMES FROM `k-control` NOW (his review).** Everything that was
 * here -- the height, the padding, the font, the colours, the border and the
 * focus ring -- was one of four definitions of the same thing in this product.
 * The 16px that stops a phone zooming the page in on focus went with it, and is
 * written down there instead. All that is left is that a form field fills the
 * width it is given, which is about forms and not about controls. */
.k-form__control {
  width: 100%;
}

/* 16px above is deliberate and is not a style choice: a phone browser zooms
 * the whole page in when it focuses a field smaller than that, and the page
 * then sits scrolled sideways with no way back. It is the one place in this
 * product where the text size is doing a job other than being readable. */

/* Switched off because something it waits on has not been chosen yet. It looks
 * unavailable on purpose -- the message beside it says what to do. */
.k-form__control:disabled {
  color: var(--text-subtle);
  background: var(--surface-raised);
  cursor: not-allowed;
}

/* A field that is actually wrong. Said with a colour AND with words beside it,
 * never colour alone -- colour is not readable to everyone, and is invisible
 * to a screen reader. */
.k-form__control[aria-invalid='true'] {
  border-color: var(--danger);
}

textarea.k-form__control {
  /* Grows downward only. Left resizable in both directions, dragging it wider
   * than its panel pushes the page sideways. */
  resize: vertical;
  min-height: 76px;
}

/* ------------------------------------------------------------- what is wrong */

.k-form__field-problem {
  margin: 0;
  font-family: var(--font);
  font-size: 13px;
  color: var(--danger);
  /* A long message wraps instead of widening the row. */
  overflow-wrap: break-word;
}

.k-form__problem {
  margin: 0;
  padding: 10px 12px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius);
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------- buttons */

.k-form__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.k-form__save,
.k-form__cancel {
  min-width: 120px;
}

/* **CANCEL IS `k-button--quiet` NOW, and these three lines were still painting
 * it as an ordinary one.** They survived the button migration and beat the kind
 * the button asks for -- so Cancel on every form in the product was outlined
 * like a thing you might press, while Cancel in the bring-in panel and Leave it
 * on the People section were quiet. Two looks for one word. Found by an
 * independent reviewer. */

/* Hover is excluded from the switched-off state on both buttons. A saving
 * button that still lights up under the cursor reads as pressable, and this
 * project has been caught five times by a state rule quietly beating the rule
 * beside it. */
/* Darkened slightly rather than repainted, which is how the shared popup's
 * primary button already does it. Repainting a filled button to a pale surface
 * on hover leaves white text on near-white, and reusing the existing approach
 * is the point of having one (D21). */

/* **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. Nothing set it; nothing was
 * stopping it either. */
.k-form__add {
  align-self: flex-start;
}