:is(.dashboard-body, .manager-body, .legal-page) {
  --form-control-height: var(--control-height);
  --form-control-search-icon-size: var(--control-leading-icon);
  --form-control-bg: var(--color-surface);
  --form-control-bg-hover: #f5f9ff;
  --form-control-bg-disabled: var(--color-slate-100);
  --form-control-border: var(--color-line);
  --form-control-border-hover: #93c5fd;
  --form-control-text: var(--color-ink);
  --form-control-muted: var(--color-muted);
  --form-control-placeholder: var(--control-placeholder);
  --form-control-icon-bg: var(--color-surface);
  --form-control-icon-border: var(--color-line);
  --form-control-focus: var(--color-brand);
  --form-control-focus-ring: rgba(0, 111, 238, .16);
  --form-control-danger: var(--color-danger);
  --form-control-danger-ring: rgba(192, 38, 45, .12);
  --form-control-shadow: none;
  --form-control-select-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%234f5b6b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-theme="dark"] :is(.dashboard-body, .manager-body, .legal-page) {
  --form-control-bg: var(--color-surface);
  --form-control-bg-hover: #0c1218;
  --form-control-bg-disabled: var(--color-slate-100);
  --form-control-border: var(--color-line);
  --form-control-border-hover: #86c5ff;
  --form-control-text: var(--color-ink);
  --form-control-muted: var(--color-muted);
  --form-control-placeholder: var(--control-placeholder);
  --form-control-icon-bg: var(--color-surface);
  --form-control-icon-border: var(--color-line);
  --form-control-focus: var(--color-brand);
  --form-control-focus-ring: rgba(85, 167, 255, .22);
  --form-control-danger: var(--color-danger);
  --form-control-danger-ring: rgba(255, 154, 163, .15);
  --form-control-shadow: none;
  --form-control-select-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%23b2bac6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:is(.dashboard-body, .manager-body, .legal-page)
  :is(
    input:where(:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="button"], [type="submit"])),
    select:where(:not(.dashboard-searchable-select__native)),
    textarea:where(:not(.wtzm-code-workspace__input))
  ) {
  height: var(--control-height);
  min-height: var(--control-height);
  border: 0;
  border-radius: var(--control-radius);
  padding: 8px var(--control-padding-x);
  color: var(--form-control-text);
  background-color: var(--form-control-bg);
  box-shadow: var(--control-ring);
  /* `font: inherit` outranked the `text-sm` utility on every console control, so inputs
     silently rendered at the 16px body size instead of the intended 14px. Inherit the
     family only and state the size. */
  font-family: inherit;
  font-size: var(--control-font-size);
  font-weight: var(--control-font-weight);
  transition: box-shadow 160ms ease, background-color 160ms ease;
}

:is(.dashboard-body, .manager-body, .legal-page)
  :is(
    input:where(:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="button"], [type="submit"])),
    select:where(:not(.dashboard-searchable-select__native)),
    textarea:where(:not(.wtzm-code-workspace__input))
  ):hover:where(:not(:disabled, [readonly])) {
  background-color: var(--form-control-bg-hover);
  box-shadow: var(--control-ring-hover);
}

:is(.dashboard-body, .manager-body, .legal-page)
  :is(
    input:where(:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="button"], [type="submit"])),
    select:where(:not(.dashboard-searchable-select__native)),
    textarea:where(:not(.wtzm-code-workspace__input))
  ):focus-visible {
  outline: none;
  box-shadow: var(--control-ring-focus);
}

:is(.dashboard-body, .manager-body, .legal-page)
  :is(
    input:where(:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="button"], [type="submit"])),
    textarea:where(:not(.wtzm-code-workspace__input))
  )::placeholder {
  color: var(--form-control-placeholder);
  opacity: 1;
}

:is(.dashboard-body, .manager-body, .legal-page)
  :is(
    input:where(:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="button"], [type="submit"])),
    select:where(:not(.dashboard-searchable-select__native)),
    textarea:where(:not(.wtzm-code-workspace__input))
  ):disabled,
:is(.dashboard-body, .manager-body, .legal-page)
  :is(
    input:where(:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="button"], [type="submit"])),
    select:where(:not(.dashboard-searchable-select__native)),
    textarea:where(:not(.wtzm-code-workspace__input))
  )[readonly] {
  color: var(--form-control-muted);
  background-color: var(--form-control-bg-disabled);
  box-shadow: var(--control-ring);
  cursor: not-allowed;
  opacity: 1;
}

:is(.dashboard-body, .manager-body, .legal-page)
  :is(input, select:where(:not(.dashboard-searchable-select__native)), textarea:where(:not(.wtzm-code-workspace__input))):is([aria-invalid="true"], :user-invalid) {
  box-shadow: var(--control-ring-invalid);
}

:is(.dashboard-body, .manager-body, .legal-page) textarea:where(:not(.wtzm-code-workspace__input)) {
  min-height: 88px;
  resize: vertical;
}

:is(.dashboard-body, .manager-body, .legal-page) select:not([multiple], .dashboard-searchable-select__native) {
  height: var(--control-height);
  appearance: none;
  padding-right: 36px;
  background-image: var(--form-control-select-icon);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}

:is(.dashboard-body, .manager-body, .legal-page) select option {
  color: var(--form-control-text);
  background: var(--form-control-bg);
}

:is(.dashboard-body, .manager-body, .legal-page)
  :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: var(--form-control-focus);
}

:is(.dashboard-body, .manager-body, .legal-page)
  input[type="file"]:not(.wtzm-file-dropzone__input) {
  min-height: var(--form-control-height);
  border: 0;
  border-radius: var(--control-radius);
  box-shadow: var(--control-ring);
  padding: 5px;
  color: var(--form-control-muted);
  background: var(--form-control-bg);
}

:is(.dashboard-body, .manager-body, .legal-page)
  input[type="file"]:not(.wtzm-file-dropzone__input)::file-selector-button {
  min-height: 32px;
  margin-right: 10px;
  border: 1px solid var(--form-control-icon-border);
  border-radius: var(--control-radius);
  padding: 0 12px;
  color: var(--form-control-text);
  background: var(--form-control-icon-bg);
  cursor: pointer;
}

:is(.dashboard-body, .manager-body, .legal-page)
  :is(input[type="search"], input[type="number"]) {
  appearance: none;
}

:is(.dashboard-body, .manager-body, .legal-page)
  input[type="search"]::-webkit-search-cancel-button {
  appearance: none;
}

:is(.dashboard-body, .manager-body)
  :is(
    .workflow-filter-search,
    .policy-picker__search,
    .manager-search-control,
    .studio-workflow-titlebar__input,
    .manager-slug-field,
    .manager-blog-menu__schedule-control,
    .extension-entry,
    .prefixed-domain-entry
  ) {
  height: var(--form-control-height);
  min-height: var(--form-control-height);
  overflow: hidden;
  /* An inset ring instead of a border: a real border took 2px out of the 44px box and
     left the nested input below the touch minimum while the wrapper still read 44. */
  border: 0;
  border-radius: var(--control-radius);
  padding: 0;
  color: var(--form-control-text);
  background: var(--form-control-bg);
  box-shadow: inset 0 0 0 1px var(--form-control-border);
}

:is(.dashboard-body, .manager-body)
  :is(
    .workflow-filter-search,
    .policy-picker__search,
    .manager-search-control,
    .studio-workflow-titlebar__input,
    .manager-slug-field,
    .manager-blog-menu__schedule-control,
    .extension-entry,
    .prefixed-domain-entry
  ):focus-within {
  box-shadow: inset 0 0 0 1px var(--form-control-focus), 0 0 0 3px var(--form-control-focus-ring);
}

:is(.dashboard-body, .manager-body)
  :is(
    .workflow-filter-search,
    .policy-picker__search,
    .manager-search-control,
    .studio-workflow-titlebar__input,
    .manager-slug-field,
    .manager-blog-menu__schedule-control,
    .extension-entry,
    .prefixed-domain-entry
  )
  :is(input, select, textarea, button) {
  height: var(--form-control-height);
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
}

:is(.dashboard-body, .manager-body)
  :is(
    .workflow-filter-search,
    .policy-picker__search,
    .manager-search-control,
    .studio-workflow-titlebar__input,
    .manager-slug-field,
    .manager-blog-menu__schedule-control,
    .extension-entry,
    .prefixed-domain-entry
  )
  :is(input, select, textarea) {
  border: 0;
  background: transparent;
}

:is(.dashboard-body, .manager-body)
  :is(.workflow-filter-search, .policy-picker__search) {
  position: relative;
}

:is(.dashboard-body, .manager-body)
  :is(.workflow-filter-search, .policy-picker__search)
  > :is(svg, .app-lord-icon) {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: var(--control-padding-x);
  width: var(--form-control-search-icon-size);
  height: var(--form-control-search-icon-size);
  min-width: 0;
  min-height: 0;
  max-width: var(--form-control-search-icon-size);
  max-height: var(--form-control-search-icon-size);
  flex: 0 0 var(--form-control-search-icon-size);
  margin: 0;
  padding: 0;
  color: var(--form-control-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

:is(.dashboard-body, .manager-body)
  :is(.workflow-filter-search, .policy-picker__search)
  > input {
  padding: 9px var(--control-padding-x) 9px var(--control-leading-indent);
}

.dashboard-body .workflow-status-filter select {
  padding-right: 46px;
  background-image: none;
}

.dashboard-body .workflow-status-filter__icon {
  right: 8px;
  width: 16px;
  height: 16px;
  overflow: visible;
  border: 0;
  color: var(--form-control-muted);
  background: transparent;
}

.dashboard-body .workflow-status-filter__icon :is(svg, .app-lord-icon) {
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
}

.legal-page .contact-request-form,
.legal-page .contact-request-form > *,
.legal-page .contact-request-form__grid,
.legal-page .contact-request-form__grid > * {
  min-width: 0;
}


@media (max-width: 620px) {
  .legal-page .contact-request-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.dashboard-body, .manager-body, .legal-page)
    :is(input, select, textarea) {
    transition: none;
  }
}