/* Neutral focus contract. Load after page and legacy theme styles.
 * Focus only: brand backgrounds, selected states, validation colors, disabled
 * controls and business handlers remain owned by their existing components.
 */
:root {
  --neutral-focus-color: #64748b;
  --neutral-focus-border: #64748b;
}
html[data-theme="dark"], body[data-theme="dark"] {
  --neutral-focus-color: #cbd5e1;
  --neutral-focus-border: #94a3b8;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    --neutral-focus-color: #cbd5e1;
    --neutral-focus-border: #94a3b8;
  }
}
/* Legacy peer switches consume this token on their visible track. */
:root, html[data-theme] { --ui-focus: var(--neutral-focus-color); }

html body :is(button,a,input,textarea,select,summary,audio[controls],video[controls],[role="button"],[role="switch"],[tabindex],[contenteditable="true"]):focus {
  --tw-ring-color: transparent !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  outline-color: var(--neutral-focus-color) !important;
}
html body :is(button,a,input,textarea,select,summary,audio[controls],video[controls],[role="button"],[role="switch"],[tabindex],[contenteditable="true"]):focus-visible:not(:disabled) {
  outline: 2px solid var(--neutral-focus-color) !important;
  outline-offset: 3px !important;
}
html body :is(button,a,input,textarea,select,summary,audio[controls],video[controls],[role="button"],[role="switch"],[tabindex],[contenteditable="true"]):focus:not(:focus-visible) {
  outline: none !important;
}

/* Do not recolor checked checkbox/radio tracks or validation-error borders. */
html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="color"]):not([type="range"]),textarea,select):focus:not(:disabled):not([aria-invalid="true"]):not(.is-invalid):not(.invalid):not(.error):not(:user-invalid) {
  border-color: var(--neutral-focus-border) !important;
}
html body :is([class*="focus-within:border-feifan"],[class*="focus-within:border-purple"],[class*="focus-within:border-violet"]):focus-within {
  border-color: var(--neutral-focus-border) !important;
}
/* These legacy selectors add a literal purple halo, not a Tailwind ring.
 * Keep the autofill inset background, which is not a focus indicator. */
html body :is(.script-transcript-search,.matrix-cover-copy-field input,#login input,.form input,.form textarea,.form select):focus:not(:autofill) {
  box-shadow: none !important;
}
@media (forced-colors: active) {
  :root, html[data-theme], body[data-theme] {
    --neutral-focus-color: Highlight;
    --neutral-focus-border: Highlight;
  }
}