/* Direction A: focus belongs to the existing control boundary.
   Loaded after page styles so the same feedback applies throughout the product. */
body[data-concept="precision"][data-theme] {
  --focus-border: #8a8a8a;
  --focus-ring: #707070;
}

body[data-concept="precision"][data-theme="dark"] {
  --focus-border: #949494;
  --focus-ring: #b4b4b4;
}

/* Route landmarks and listboxes receive programmatic focus, not a container ring.
   Listboxes show keyboard position on the active option instead. */
body[data-concept="precision"][data-theme] :is(#app main[tabindex="-1"], .choice-popover .choice-options[role="listbox"][tabindex="-1"]):focus {
  outline: none;
}

/* Buttons, links and sliders retain a visible keyboard indicator. */
body[data-concept="precision"][data-theme] :is(button, a, summary, [role="button"], input[type="range"]):focus-visible {
  outline: 1px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Text fields use their single existing border for both pointer and keyboard focus. */
body[data-concept="precision"][data-theme] :is(input:not([type="range"]), textarea, select):focus {
  outline: none;
  border-color: var(--focus-border);
}

/* Compound fields paint focus on their outer shell, not around the text inside. */
body[data-concept="precision"][data-theme] :is(.prompt-box, .cat-search, .bill-amount-input):focus-within {
  border-color: var(--focus-border);
}

body[data-concept="precision"][data-theme] .choice-search-wrap:focus-within {
  border-bottom-color: var(--focus-border);
}

body[data-concept="precision"][data-theme] .choice-host:focus-within > select,
body[data-concept="precision"][data-theme] .choice-host:has(> [aria-expanded="true"]) > select {
  border-color: var(--focus-border);
}

/* The transparent trigger shares the select's edge, including borderless selectors. */
body[data-concept="precision"][data-theme] .choice-host > button.choice-trigger:focus-visible {
  outline: 1px solid var(--focus-border);
  outline-offset: -1px;
}

@media (forced-colors: active) {
  body[data-concept="precision"][data-theme] {
    --focus-border: Highlight;
    --focus-ring: Highlight;
  }

  /* Forced colors suppress the regular active item's background and inset shadow. */
  body[data-concept="precision"][data-theme] .choice-option.is-active {
    outline: 1px solid Highlight;
    outline-offset: -1px;
  }
}