/* MAYAK-24 application-wide focus language.
   Text entry keeps focus on the control edge; actions use one compact keyboard ring. */
:root {
  --mayak-focus-accent: var(--redesign-accent, #315bea);
  --mayak-focus-ring: color-mix(in srgb, var(--mayak-focus-accent) 56%, transparent);
  --mayak-focus-border: color-mix(in srgb, var(--mayak-focus-accent) 66%, var(--redesign-line, #cbd5e1));
}

body.has-redesign-ui :where(
  button,
  a[href],
  summary,
  [role="button"],
  [role="menuitem"],
  [role="option"],
  [role="tab"],
  [tabindex]:not([tabindex="-1"]),
  input[type="checkbox"],
  input[type="radio"],
  input[type="range"]
):focus-visible {
  outline: 2px solid var(--mayak-focus-ring) !important;
  outline-offset: 2px !important;
}

body.has-redesign-ui :where(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  textarea,
  [contenteditable="true"]
):focus-visible {
  border-color: var(--mayak-focus-border) !important;
  outline: 0 !important;
  caret-color: var(--mayak-focus-accent);
}

body.has-redesign-ui :where(
  input,
  select,
  textarea,
  button,
  a[href],
  summary,
  [role="button"],
  [role="menuitem"],
  [role="option"],
  [role="tab"],
  [tabindex]:not([tabindex="-1"])
):focus:not(:focus-visible) {
  outline: 0 !important;
}

body.has-redesign-ui :where(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: var(--mayak-focus-accent);
}

body.has-redesign-ui :where(input, select, textarea)[aria-invalid="true"]:focus-visible {
  border-color: var(--redesign-danger, #dc2626) !important;
}