/* Shared unavailable-control appearance, including inherited fieldset states. */
fieldset { min-inline-size: 0; }
input, select, textarea { max-inline-size: 100%; box-sizing: border-box; }
:root {
  --disabled-bg: #353a3f;
  --disabled-ink: #c6c9cc;
  --disabled-border: #85898c;
}
html[data-appearance="light"], body.appearance-light {
  --disabled-bg: #e0e2e4;
  --disabled-ink: #4c5054;
  --disabled-border: #72777c;
}
:is(input, select, textarea, button):disabled,
:is(input, textarea)[readonly],
[aria-disabled="true"] {
  background-color: var(--disabled-bg) !important;
  color: var(--disabled-ink) !important;
  -webkit-text-fill-color: var(--disabled-ink) !important;
  border-color: var(--disabled-border) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  cursor: not-allowed;
}
body .readonly {
  background: var(--disabled-bg);
  color: var(--disabled-ink);
  border: 1px solid var(--disabled-border);
  border-radius: 5px;
  padding: 8px 10px;
  overflow-wrap: anywhere;
}
:is(input, textarea)[readonly] { cursor: text; }
:is(input[type="checkbox"], input[type="radio"]):disabled {
  accent-color: var(--disabled-ink) !important;
  filter: grayscale(1) !important;
}
option:disabled, optgroup:disabled { color: var(--disabled-ink); }
.form-field:has(:disabled) > label,
.checkbox-field:has(input:disabled) label,
label:has(input:disabled) { color: var(--muted); }
form[aria-busy="true"] :disabled, .ui-dialog :disabled { cursor: wait; }
@media (forced-colors: active) {
  :root, html[data-appearance], body.appearance-light { --disabled-bg: Canvas; --disabled-ink: GrayText; --disabled-border: GrayText; }
}

/* Larger hit areas on phones and touchscreens, without enlarging mouse layouts. */
@media (pointer: coarse), (any-pointer: coarse), (max-width: 760px) {
  body :is(.button, .menu-toggle, .preferences-link, .ui-dialog-button),
  body .utility-right :is(.menu-toggle, .preferences-link, .signout, .toolbar-report-actions .button, .mode-options button, [data-chat-notice]) {
    min-width: 44px;
    min-height: 44px;
    padding-block: 10px;
  }
  body :is(.form-control, .form-field input:not([type="checkbox"]):not([type="radio"]), .form-field select, .roster-filters input, .roster-filters select, .queue-filter-form select),
  body .risk-editor-table select.risk-rating { min-height: 44px; font-size: 16px; }
  body .choice-group label { min-height: 44px; }
  body .checkbox-field { align-items: flex-start; }
  body .checkbox-field > input { margin-top: 12px; }
  body .checkbox-field label { display: block; min-height: 44px; padding-block: 10px; }
  body :is(.heading-actions, .form-actions > div, .filter-actions) { gap: 10px; }
}

/* Invalid fields remain identifiable when the explanation is in the top banner. */
:is(input, select, textarea)[aria-invalid="true"] { border-color: #e36e5d; }
:is(html[data-appearance="light"], body.appearance-light) :is(input, select, textarea)[aria-invalid="true"] { border-color: #b52e21; }