/* =========================================================================
   FORM SYSTEM
   Loaded straight after app.css, so these rules win where the two overlap.

   One wrapper owns every vertical gap in a form. A field holds a label, one
   control, and optional help text, and nothing inside it carries a margin of
   its own: the label owns the gap under itself, the help text owns the gap
   above itself, and the field owns the gap to the next field. That is the
   whole system.

   WHY THE COLUMNS WERE NARROW. app.css had
     .grid2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) }
   and the long fields inside it carried style="grid-column:1/-1". A spanning
   item occupies every track, so auto-fit could never collapse the empty ones.
   Two short fields therefore sat at the 220px floor while the rest of the
   card stayed empty, and the quote wizard and the Stripe keys are what that
   looked like. Switching the row to flex fixes it at the root: flex ignores
   grid-column entirely, so those inline styles go inert, short fields share
   the full width, and a long field takes a line of its own because it asks
   for a 100% basis rather than because it spans tracks.

   .field / .help / .field-row are the names to write in new markup. .f, .sub
   and .grid2 are the names the console uses today and are carried here as
   aliases, so the fix reaches every screen without editing a view file. The
   matching rules in app.css are overridden rather than deleted: removing
   them is a separate pass, noted in the handover.
   ========================================================================= */

:root {
  --field-gap: 20px;        /* between consecutive fields */
  --field-gap-tight: 12px;  /* between fields wrapped inside one row */
  --label-gap: 6px;         /* label to its control */
  --help-gap: 6px;          /* control to its help text */
  --section-gap: 24px;      /* between groups, and paragraph to first field */
  --control-min: 220px;     /* narrowest a control may get inside a row */
  --help-size: 13px;
  --help-color: var(--ink-3);
  /* --control-h is already defined in app.css at 36px and is reused as is. */
}

/* ---- the field wrapper. Block, not grid: the gaps belong to the parts, not
   to a container that spaces label, control and help identically. */
.field, .f {
  display: block;
  margin: 0 0 var(--field-gap);
  min-width: 0;
}
.field:last-child, .f:last-child, .field-row:last-child { margin-bottom: 0; }

.field > label, .f > label {
  display: block;
  margin: 0 0 var(--label-gap);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-2);
}

/* ---- controls. A control fills its field, always. Nothing here sets a pixel
   width: a field that has to look short is capped on the field, never on the
   control inside it. */
.field > input, .field > select, .field > textarea,
.f > input, .f > select, .f > textarea {
  display: block;
  width: 100%;
  margin: 0;
}
.field > textarea, .f > textarea { height: auto; }
.field > .combo, .f > .combo { display: block; }

/* A select must never clip the option it is showing. */
body.app select { text-overflow: ellipsis; }

/* ---- help text. Smaller and lighter than body copy, so it reads as a note
   on the control above it rather than as another line of the form. .sub is
   matched only as a direct child of a field: everywhere else in the console
   .sub is ordinary secondary text and is deliberately left alone. */
.field > .help, .f > .help,
.field > .sub, .f > .sub {
  display: block;
  margin: var(--help-gap) 0 0;
  font-size: var(--help-size);
  line-height: 1.45;
  color: var(--help-color);
}

/* A row of state chips or links hanging off a control ("on file", "Clear it")
   is help text that happens to contain buttons. */
.field > .secret-state, .f > .secret-state, .secret-state {
  margin: var(--help-gap) 0 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: var(--help-size);
  color: var(--help-color);
}

/* ---- rows of short fields. Flex with a floor: the fields share the full
   width of the card on a wide screen and fold to one per line on a narrow
   one, with no media query and no empty tracks. */
.field-row, .grid2 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--field-gap-tight) var(--section-gap);
  margin: 0 0 var(--field-gap);
  align-items: flex-start;
}
.field-row > *, .grid2 > * {
  flex: 1 1 var(--control-min);
  min-width: 0;
  margin-bottom: 0;
}
/* A long field takes a line to itself. .full is the name for new markup; the
   attribute match catches the inline grid-column the views write today. */
.field-row > .full, .grid2 > .full,
.field-row > [style*="grid-column:1/-1"], .grid2 > [style*="grid-column:1/-1"],
.field-row > textarea, .grid2 > textarea {
  flex-basis: 100%;
}
/* A paragraph inside a row is a note about the whole row, never a column. */
.field-row > p, .grid2 > p { flex-basis: 100%; margin: 0; }

/* A field that has to look short is capped here, not on its control. */
.field.short { max-width: 240px; }
.field-row > .field.short, .grid2 > .field.short { max-width: none; }

/* ---- rhythm inside a card. A paragraph that introduces fields is a section
   break, not another line of the form: without this the Stripe intro sentence
   sat directly on top of the Secret key label. Scoped to a paragraph that is
   actually followed by fields, so ordinary body copy in a card is untouched. */
.panel > p + .field-row, .panel > p + .grid2,
.panel > p + .field, .panel > p + .f,
.settings-body > p + .panel { margin-top: var(--section-gap); }

.panel > hr, .panel > .divider {
  margin: var(--section-gap) 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* Inline code chips were pushing the lines of a paragraph apart, because the
   padding counted toward line height. */
.settings-body code, .panel code {
  line-height: 1;
  padding: 1px 5px;
  vertical-align: baseline;
}

/* ---- the action row at the foot of a card. The rule above it is a section
   divider, so it gets section spacing on both sides instead of being pinched
   against the last control. */
.savebar {
  margin-top: var(--section-gap);
  padding-top: var(--section-gap);
}

/* ---- repeating editable rows: quote line items, the labor rate book, the
   materials list, the document IP ranges. These are table-like rather than
   form-like. They keep their own relative widths and their own compact gap,
   so they only opt out of the stacking margin. They already wrap rather than
   overflow on a phone, which reads better than six stacked full width fields
   per row. */
.wizrow > .field, .wizrow > .f,
.qi-row > .field, .qi-row > .f { margin-bottom: 0; }