/* One focus boundary, drawn over the existing border without changing layout.
   Loaded after page styles; !important prevents component focus halos returning.
   Buttons, links, radio buttons and checkboxes retain their keyboard indicators. */
:is(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="reset"], [type="button"], [type="image"]),
    textarea, select, [contenteditable="true"], [contenteditable="plaintext-only"], .temporal-trigger):focus,
:is(.field, .scenario-search, .bonus-search-control, .bonus-unit, .bonus-editor,
    .bonus-exclusions-search, .reminder-search, .test-search):not(input, textarea, select):focus-within {
  border-color: var(--form-focus-color, var(--accent, #ff6800)) !important;
  outline: 2px solid var(--form-focus-color, var(--accent, #ff6800)) !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
}

/* The visible compound control owns focus, not its inner input. */
:is(.field, .scenario-search, .bonus-search-control, .bonus-unit, .bonus-editor,
    .bonus-exclusions-search, .reminder-search, .test-search):not(input, textarea, select)
  :is(input, textarea, select, [contenteditable="true"], [contenteditable="plaintext-only"]):focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Date/time enhancement replaces the field's boundary with a trigger button. */
.field:has(> .temporal-trigger):focus-within {
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Validation stays visible as a single red boundary, including compound fields. */
:is(input, textarea, select):is([aria-invalid="true"], :user-invalid),
:is(.field, .bonus-unit, .bonus-editor):has(:is(input, textarea, select):is([aria-invalid="true"], :user-invalid)),
.temporal-trigger[aria-invalid="true"] {
  --form-focus-color: var(--danger, #b42318);
}

.message-library .message-choice.is-editing {
  border-color: var(--accent, #ff6800);
  outline: none;
}

@media (forced-colors: active) {
  :root { --form-focus-color: Highlight; }
}