/* One shared focus treatment, including dialogs and standalone sign-in pages.
   Override component rings so they cannot stack with a field's own border. */
:is(a[href], button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 1px solid var(--text-muted, var(--mfa-muted, #8e9099)) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), select, textarea, [contenteditable="true"]):is(:focus, :focus-visible) {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--control-focus-color, var(--text-muted, var(--mfa-muted, #8e9099))) !important;
}

:is(.document-library__search, .sidebar__search, .search-control, .composer):focus-within {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--text-muted, #8e9099) !important;
}

.billing-segment label:has(input:focus-visible) {
  outline-width: 1px;
  outline-offset: 2px;
}

@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight !important; }
  :is(input, select, textarea, [contenteditable="true"]):focus { border-color: Highlight !important; }
}