/* Shared small form size. Loaded after component styles on every form surface. */
:root {
  --form-control-height: 32px;
  --form-control-font: 13px;
  --form-control-padding: 5px;
  --form-gap: 10px;
}

body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]),
body select:not([multiple]) {
  box-sizing: border-box;
  height: var(--form-control-height);
  min-height: var(--form-control-height);
  padding-block: var(--form-control-padding);
  font-size: var(--form-control-font);
  font-weight: 400;
  line-height: 1.4;
  border-radius: 6px;
}
body select[multiple], body textarea {
  box-sizing: border-box;
  min-height: 64px;
  padding-block: 6px;
  font-size: var(--form-control-font);
  line-height: 1.45;
  border-radius: 6px;
}
body :is(.editor, .cl-root, .guest-answer, form) textarea {
  min-height: 64px;
  padding-block: 6px;
  font-size: var(--form-control-font);
  line-height: 1.45;
  border-radius: 6px;
}
body textarea[rows="2"] { height: auto; min-height: 52px; }
/* Native choices must not inherit the text field's minimum height. */
body input:is([type=checkbox], [type=radio]) {
  box-sizing: border-box;
  min-height: 0;
  min-width: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  flex: 0 0 16px;
}
body input[type=file]:not([data-cl-upload]) {
  min-height: 32px;
  padding: 4px 6px;
  font-size: 12px;
  line-height: 1.4;
}
body input[type=file]::file-selector-button {
  font: inherit;
  padding: 3px 7px;
  margin-right: 8px;
  min-height: 24px;
  border: 0;
  border-radius: 4px;
  background: #e8f3f3;
  color: #176776;
  cursor: pointer;
}
body :is(form, .editor, .cl-root, .nt-panel) label {
  gap: 4px;
  font-size: 12px;
  line-height: 1.45;
}
body :is(form, .editor, .cl-root, .nt-panel) .btn,
body .guest-button {
  min-height: 32px;
  padding: 6px 11px;
  gap: 6px;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 6px;
}
body .editor .icon-btn { width: 30px; height: 30px; min-height: 30px; }
body .editor { border-radius: 10px; }
body .editor .dialog-heading { padding: 14px 18px; gap: 12px; }
body .editor .dialog-heading h2 { font-size: 20px; line-height: 1.3; }
body .editor .dialog-heading .eyebrow { margin-bottom: 4px; }
body .editor .editor-fields { padding: 16px 18px; gap: var(--form-gap); }
body .editor .dialog-footer { padding: 10px 18px; gap: 8px; flex-wrap: wrap; }
body :is(.field-grid, .coordinate-fields, .guest-form-grid) { gap: var(--form-gap); }
body .editor .form-error { margin: 0 18px 12px; padding: 8px 10px; }
body :is(.upload-field, .settings-option, .customer-fields, .manager-permissions) {
  padding: 12px;
  gap: var(--form-gap);
}
body .upload-field > .icon { width: 20px; height: 20px; margin-bottom: 5px; }
body .upload-field input { margin-top: 8px; }
body .upload-preview:empty { display: none; }
body .settings-option label { font-size: 12px; }
body .manager-permissions label { margin-top: 8px; }

/* Checklist editor: remove the stacked label margins and grid gaps. */
body .cl-dialog label { margin: 0; }
body .cl-dialog { width: min(760px, calc(100vw - 24px)); }
body .cl-dialog:has([data-cl-form=equipment]) { width: min(560px, calc(100vw - 24px)); }
body .cl-dialog .field-grid { gap: var(--form-gap); }
body .cl-dialog fieldset { padding: 12px; margin: 0; border-radius: 8px; }
body .cl-dialog fieldset > * + * { margin-top: 10px; }
body .cl-dialog fieldset > .field-grid { margin-top: 8px; }
body .cl-dialog fieldset > label + label { margin-top: 8px; }
body .cl-dialog :is(.cl-check, .cl-weekdays label) { gap: 7px; min-height: 24px; }
body .cl-dialog .cl-sample { gap: 8px; padding-top: 8px; margin-top: 10px; }
body .cl-dialog .cl-sample small { font-size: 11px; line-height: 1.4; }
body .cl-dialog .cl-sample img { width: 60px; height: 60px; }
body .cl-dialog .cl-info { padding: 10px 12px; font-size: 12px; line-height: 1.45; margin: 0; }
body .cl-dialog [data-cl-items] { display: grid; gap: 12px; }
body .cl-dialog .cl-item-tools { margin-top: 0; }
body .cl-dialog .cl-toolbar { margin: 0; }
body .cl-root .cl-comment textarea { font-size: var(--form-control-font) !important; }
body .cl-dialog .cl-weekdays { gap: 8px 12px; }
body .cl-dialog .cl-assignees { max-height: 190px; }
body .cl-root .cl-run-field { padding: 16px 0; gap: 9px; }
body .cl-root .cl-boolean { gap: 8px; }
body .cl-root .cl-boolean label { padding: 8px 14px; gap: 7px; font-size: 13px; }
body .cl-root .cl-upload { padding: 12px; gap: 7px; }
body .cl-root .cl-upload input { min-height: 0; }
body .cl-root .cl-task-actions { padding: 10px 14px; gap: 8px; margin-block: 14px; }
body .cl-root .cl-review-actions { padding: 16px; margin-block: 14px; }
body .cl-root .cl-toolbar { gap: 10px; margin-bottom: 14px; }

body .reference-people { padding: 12px; gap: 8px; border-radius: 8px; }
body .reference-people-list label { padding: 6px; gap: 8px; }
body .reference-people-heading { gap: 8px; }
body .inspection-wizard-dialog .editor-fields { padding: 0; }
body .iw-steps { padding-inline: 18px; }
body .iw-steps li { padding-block: 10px; }
body .iw-step { padding: 14px 18px; gap: 12px; }
body :is(.iw-row-body, .iw-row-primary, .iw-row-grid) { gap: 10px; }
body .iw-row-body { padding: 12px; }
body .iw-add-row { padding: 8px; }
body .iw-upload { padding: 10px; }
body .iw-upload input { margin: 0; }
body .iw-help { margin: 0; }
body .search-field > .icon { width: 16px; height: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; }

body :is(.pf-card form, .auth-panel form, .ac-attach form, .mini-login) { gap: 12px; }
body .pf-card { padding: 18px; }
body .pf-card-heading { padding-bottom: 14px; margin-bottom: 16px; }
body .pf-card-heading h2 { font-size: 20px; }
body .pf-password button { padding: 7px 10px; }
body .nt-bot { padding: 14px; }
body .nt-bot > label { margin: 10px 0; }
body .nt-toggle { padding: 7px 10px; gap: 7px; }
body .nt-channels { margin-block: 12px; gap: 8px; }
body .nt-actions { gap: 8px; }
body .guest-answer form { margin-top: 14px; }
body :is(.guest-answer label, .guest-create label:not(.guest-check)) { margin-bottom: 10px; gap: 4px; }
body .guest-create form { margin-block: 12px; }
body .guest-create fieldset { padding: 12px; margin-bottom: 10px; }
body .guest-check { margin-block: 8px; gap: 7px; }
body .guest-actions { gap: 8px; }

@media (max-width: 767px) {
  /* Keep phone text legible without triggering input zoom on iOS. */
  :root { --form-control-height: 40px; --form-control-font: 16px; }
  body .editor .dialog-heading { padding: 12px 14px; }
  body .editor .dialog-heading h2 { font-size: 18px; }
  body .editor .editor-fields { padding: 12px 14px; }
  body .editor .dialog-footer { padding: 10px 14px; }
  body :is(form, .editor, .cl-root, .nt-panel) .btn,
  body .guest-button { min-height: 40px; }
  body .editor .icon-btn { width: 40px; height: 40px; }
  body .inspection-wizard-dialog .editor-fields { padding: 0; }
  body .iw-step { padding: 12px 14px; }
  body .iw-steps { padding-inline: 14px; }
  body .guest-form-grid { gap: 0; }
}

/* Keep icons aligned when compact controls wrap or contain mixed SVG sizes. */
body :is(form, .editor, .cl-root, .nt-panel, .filters) .btn > .icon,
body .editor .icon-btn > .icon { width: 16px; height: 16px; flex: 0 0 16px; }
body .nt-panel .btn { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 767px) {
  body input:is([type=checkbox], [type=radio]) { width: 18px; height: 18px; flex-basis: 18px; }
  body :is(.nt-toggle, .cl-dialog .cl-check, .cl-dialog .cl-weekdays label) { min-height: 40px; }
  body .pf-password button { min-width: 64px; }
}