/* An outline is a keyboard cue. Pointer selection keeps each control's own
   border, selected state and hover feedback instead of an extra outer ring. */
html:root[data-input-method="pointer"] :is(:focus, :focus-within, :hover),
html:root[data-input-method="pointer"] .relation-types input:focus-visible + span {
  outline: none !important;
}

html:root[data-input-method="pointer"] body :is(input, textarea, select):focus {
  box-shadow: none !important;
}

html[data-input-method="keyboard"] :where(a, button, input, select, textarea, summary, [tabindex]):focus {
  outline: 2px solid #c7baff !important;
  outline-offset: 3px;
}

/* SVG planets already draw focus around the planet, not its rectangular box. */
html[data-input-method] svg :is(.formula-node, .cosmo-planet):focus {
  outline: none !important;
}

.relation-field :is(input, select):focus {
  border-color: #b49ae2;
}

html[data-input-method="pointer"] :where(a, button, summary, [role="button"]) {
  -webkit-tap-highlight-color: transparent;
}