/* Shared interaction focus language.
   Dashed outlines belong to spatial movement and drop targets, never form controls. */

:root {
  --ss-focus-edit-border: var(--ss-role-focus, var(--ss-color-accent, #b85876));
  --ss-focus-edit-background: #fffdfb;
  --ss-focus-edit-glow: 0 0 0 3px rgba(84, 101, 129, .22), 0 0 10px rgba(84, 101, 129, .2);
  --ss-focus-edit-filter: drop-shadow(0 0 5px rgba(84, 101, 129, .24));
  --ss-focus-control: var(--ss-role-focus, var(--ss-color-purple, #574f7e));
  --ss-focus-caret: var(--ss-role-focus, var(--ss-color-accent));
  --ss-focus-error: var(--ss-role-destructive); /* brick, as every error (house style, 17 Oct) */
  --ss-focus-error-glow: 0 0 0 3px color-mix(in srgb, var(--ss-role-destructive) 20%, transparent), 0 0 10px color-mix(in srgb, var(--ss-role-destructive) 16%, transparent);
  --ss-focus-error-filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ss-role-destructive) 22%, transparent));
  --ss-focus-correct: var(--ss-color-green-strong, #4d633d);
  --ss-focus-correct-glow: 0 0 0 3px rgba(77, 99, 61, .2), 0 0 10px rgba(77, 99, 61, .16);
  --ss-focus-correct-filter: drop-shadow(0 0 5px rgba(77, 99, 61, .2));
}

:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
  textarea,
  select
) {
  caret-color: var(--ss-focus-caret);
}

:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
  textarea,
  select
):focus {
  border-color: var(--ss-focus-edit-border);
  outline: 2px solid var(--ss-focus-edit-border);
  outline-offset: 1px;
  background-color: var(--ss-focus-edit-background);
  box-shadow: var(--ss-focus-edit-glow);
  filter: var(--ss-focus-edit-filter);
}

:where(button, [role="button"], summary, input[type="checkbox"], input[type="radio"], input[type="range"]):focus-visible {
  outline: 3px solid var(--ss-focus-control);
  outline-offset: 3px;
}

.ui-editable-group:focus-within {
  border-color: var(--ss-focus-edit-border);
  outline: 2px solid var(--ss-focus-edit-border);
  outline-offset: 1px;
  background-color: var(--ss-focus-edit-background);
  box-shadow: var(--ss-focus-edit-glow);
  filter: var(--ss-focus-edit-filter);
}

.ui-editable-group :where(input, textarea, select):focus {
  border-color: inherit;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

:where(input, textarea, select)[aria-invalid="true"]:focus,
.ui-editable-group[data-validation="error"]:focus-within {
  border-color: var(--ss-focus-error);
  outline-color: var(--ss-focus-error);
  background-color: #fff4f6;
  box-shadow: var(--ss-focus-error-glow);
  filter: var(--ss-focus-error-filter);
}

.ui-editable-group[data-validation="correct"]:focus-within {
  border-color: var(--ss-focus-correct);
  outline-color: var(--ss-focus-correct);
  background-color: #f2f8ec;
  box-shadow: var(--ss-focus-correct-glow);
  filter: var(--ss-focus-correct-filter);
}

@media (forced-colors: active) {
  :where(input, textarea, select):focus,
  :where(button, [role="button"], summary):focus-visible,
  .ui-editable-group:focus-within {
    outline-color: Highlight;
    box-shadow: none;
    filter: none;
  }
}