/* Form fields built by shared/forms.js and the forms around them: grids, labelled fields,
   inputs, checks, sliders, the row filter builder, form actions and sections. */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; color: var(--fg-2); }
.field > span:first-child { font-weight: 500; }
.field small { color: var(--fg-3); font-size: 11.5px; }
/* a field whose labels are longer than a track: a row of its own, at any width */
.form-grid > .field.wide { grid-column: 1 / -1; max-width: 420px; }
input[type="text"], input[type="number"], input[type="search"], select, textarea { height: 30px; width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); padding: 0 8px; font-size: 12.5px; }
textarea { height: auto; padding: 6px 8px; }
input[type="number"] { font-family: var(--mono); }
input.bad { border-color: var(--err); }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-2); cursor: pointer; }
.check input { accent-color: var(--accent); margin: 0; width: 15px; height: 15px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.slider-row { display: flex; align-items: center; gap: 10px; }
.slider-row input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 0; }
.slider-row .k-box { width: 68px; flex: none; font: 600 13px var(--mono); text-align: right; }
/* autoNumField: the box, then "Use auto" beside it while a number is typed */
.auto-row { display: flex; align-items: center; gap: 10px; }
.auto-row input { flex: 1; }
.auto-row .linkbtn { flex: none; font-size: 12px; }
.filters { display: grid; gap: 6px; }
.filter-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 92px minmax(0, 1fr) minmax(0, 1fr) 30px; gap: 6px; align-items: center; }
.filter-row .icon-btn { width: 30px; height: 30px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.form-actions .grow { flex: 1; min-width: 160px; font-size: 12px; color: var(--fg-3); }
.section { margin-top: 22px; }
.section > h3 { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }

@media (max-width: 760px) {
  .filter-row { grid-template-columns: minmax(0, 1fr) 80px 30px; }
  .filter-row .v1, .filter-row .v2 { grid-column: 1 / span 2; }
  .filter-row .v2 { grid-row: 3; }
}