/* Form fields. The office's .field (.n for numbers, .code for price codes); the customer's
   plain inputs, styled by type. After Campfire's inputs.css. */

.field { border: 1.5px solid var(--line); background: #fff; border-radius: var(--r); padding: 7px 10px; font: 14px var(--body); color: var(--ink); width: 100%; box-sizing: border-box; }
.staff .field.n { text-align: right; }
.staff .field.code { font-family: var(--mono); font-stretch: 87.5%; font-size: 12.5px; }
.crewv .field { font-size: var(--text-l); padding: 10px; min-height: 44px; }

/* A field kept to the size of what goes in it. */
.field.width-xs { max-width: var(--width-xs); }
.field.width-s { max-width: var(--width-s); }
.field.width-m { max-width: var(--width-m); }
.field.width-l { max-width: var(--width-l); }

/* A row of radio buttons or checkboxes, each with its label. The crew's are big buttons. */
.staff .seg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--text-s); padding-top: 6px; }
.staff .seg label { white-space: nowrap; }

.customer input[type=text], .customer input[type=email], .customer input[type=tel], .customer textarea, .customer select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--grey); border-radius: var(--r); background: var(--white);
  font: 400 15px/1.4 var(--body); color: var(--ink);
}
.customer input[type=file] { font: 400 14px var(--body); max-width: 100%; }

/* The People form: the crew field only for a crew login, initials only for the office. */
.person-form:not(:has(select[name="user[role]"] option[value="crew"]:checked)) .for-crew { display: none; }
.person-form:has(select[name="user[role]"] option[value="crew"]:checked) .for-office { display: none; }