/* Inputs, selects, textareas and form layout */
.field { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-size: 12px; font-weight: 650; color: #475569; letter-spacing: .01em; }
.field-label .req { color: #dc2626; }
.field-help { font-size: 11.5px; color: #7c8798; }
.input {
  width: 100%; padding: 8px 10px; border: 1px solid #d6dded; border-radius: 9px; background: #fff;
  font-size: 13.5px; color: var(--ink); font-family: inherit;
}
.input:focus {
  outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .16); background: #fff;
}
.input[readonly], .input:disabled { background: #f5f7fc; color: #64748b; }
.input.mono, input.mono, textarea.mono { font-family: "SFMono-Regular", Consolas, Menlo, monospace; }
.input-sm { padding: 5px 7px; font-size: 12.5px; border-radius: 7px; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
textarea.input { min-height: 68px; resize: vertical; }
input[type="date"].input { min-height: 36px; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.grid .field .readout { font-size: 13.5px; }
.filter-grid { align-items: end; }
@media (max-width: 620px) {
  .field-label { font-size: 11.5px; }
}