/* Shared onboarding field appearance. Loaded after feature styles by :app.
 * Keep widths, margins, compound-control padding and specialized input behavior
 * with their owning components; native enhanced selects stay visually hidden.
 */
body[data-controller] :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not(:where([type=hidden], [type=file], [type=submit], [type=button], [type=reset], [type=range], [type=color], [type=image], .ui-combobox-native)) {
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--field-height);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  background-color: var(--field-surface);
  color: var(--field-ink);
  font-family: var(--font-body);
  font-size: var(--field-font-size);
  box-shadow: none;
}
body[data-controller] :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not(:where([type=hidden], [type=file], [type=submit], [type=button], [type=reset], [type=range], [type=color], [type=image], .ui-combobox-native)):not(:where(textarea, select[multiple], select[size], .otp-fields input, .roe-consent-signature)) {
  height: var(--field-height);
  padding-block: 10px;
}
body[data-controller] :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not(:where([type=hidden], [type=file], [type=submit], [type=button], [type=reset], [type=range], [type=color], [type=image], .ui-combobox-native))::placeholder { color: var(--field-muted); opacity: 1; }
body[data-controller] :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not(:where([type=hidden], [type=file], [type=submit], [type=button], [type=reset], [type=range], [type=color], [type=image], .ui-combobox-native)):hover:not(:disabled) { border-color: var(--field-muted); }
body[data-controller] :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not(:where([type=hidden], [type=file], [type=submit], [type=button], [type=reset], [type=range], [type=color], [type=image], .ui-combobox-native)):focus { border-color: var(--color-focus); }
body[data-controller] :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not(:where([type=hidden], [type=file], [type=submit], [type=button], [type=reset], [type=range], [type=color], [type=image], .ui-combobox-native)):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
body[data-controller] :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not(:where([type=hidden], [type=file], [type=submit], [type=button], [type=reset], [type=range], [type=color], [type=image], .ui-combobox-native)):disabled { background-color: var(--field-disabled-surface); color: var(--field-muted); opacity: .7; cursor: not-allowed; }
body[data-controller] :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not(:where([type=hidden], [type=file], [type=submit], [type=button], [type=reset], [type=range], [type=color], [type=image], .ui-combobox-native))[aria-invalid=true] { border-color: var(--color-error); }
body[data-controller] :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not(:where([type=hidden], [type=file], [type=submit], [type=button], [type=reset], [type=range], [type=color], [type=image], .ui-combobox-native))[aria-invalid=true]:focus-visible { outline-color: var(--color-error); }

body[data-controller] :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not(:where([type=hidden], [type=file], [type=submit], [type=button], [type=reset], [type=range], [type=color], [type=image], .ui-combobox-native)):where(textarea) { min-height: 100px; padding: 12px; resize: vertical; }
body[data-controller] .ui-combobox > .ui-combobox-input { padding-right: 38px; }
body[data-controller] .ui-combobox > .ui-combobox-toggle { border-radius: 0 var(--field-radius) var(--field-radius) 0; }
body[data-controller] .ui-combobox-popup { border-color: var(--field-border); background: var(--field-surface); color: var(--field-ink); }
body[data-controller] .ui-combobox-option { font-size: var(--field-font-size); }

/* Joined domain input has one border and focus ring around the entire control. */
body[data-controller] .subdomain-field { border-color: var(--field-border); border-radius: var(--field-radius); }
body[data-controller] .subdomain-field:focus-within { outline: 2px solid var(--color-focus); outline-offset: 3px; }
body[data-controller] :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not(:where([type=hidden], [type=file], [type=submit], [type=button], [type=reset], [type=range], [type=color], [type=image], .ui-combobox-native)):where(.subdomain-field input):focus-visible { outline: none; }

/* Verification digits and consent signatures retain their deliberate type scale. */
body[data-controller] :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not(:where([type=hidden], [type=file], [type=submit], [type=button], [type=reset], [type=range], [type=color], [type=image], .ui-combobox-native)):where(.otp-fields input) { font-size: 25px; }
body[data-controller] :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not(:where([type=hidden], [type=file], [type=submit], [type=button], [type=reset], [type=range], [type=color], [type=image], .ui-combobox-native)):where(.roe-consent-signature) { font-size: 24px; }

@media (max-width: 600px) {
  :root { --field-font-size: 16px; }
}

/* Approved timesheet cells remain distinguishable from other disabled fields. */
body[data-controller] :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not(:where([type=hidden], [type=file], [type=submit], [type=button], [type=reset], [type=range], [type=color], [type=image], .ui-combobox-native))[data-approved=true]:disabled { background-color: var(--color-selection); color: var(--color-link); -webkit-text-fill-color: var(--color-link); opacity: 1; }