:root {
    --ka-focus-outline: 3px dashed var(--bs-body-color, #212529);
}

/* Keep focus distinct from solid selection/error borders and above adjacent controls.
   z-index controls painting only; keyboard order follows the document. */
form :is(input, select, textarea, button, a, [contenteditable="true"]):focus-visible,
.form-check-input:focus-visible,
.ql-editor[role="textbox"]:focus-visible {
    outline: var(--ka-focus-outline);
    outline-offset: 2px;
    position: relative;
    z-index: 2;
    scroll-margin-block: 6rem;
}

/* Bootstrap's clipped choice inputs need the indicator on their visible label,
   including choice buttons outside a form (pricing and discount filters). */
.btn-check:focus-visible + .btn {
    outline: var(--ka-focus-outline);
    outline-offset: 3px;
    position: relative;
    z-index: 2;
}

/* Do not add Bootstrap's red focus halo on top of the distinct outline. */
.btn-check:focus + .btn,
.form-check-input:focus-visible {
    box-shadow: none;
}

/* Cards retain their solid checked border; focus is an independent outer mark. */
.onboarding-shell .onboarding-choice:focus-within,
.account-type-card:focus-within {
    outline: var(--ka-focus-outline);
    outline-offset: 3px;
}

/* Google Places appends its menu to body, including for fields inside modals.
   Bootstrap's modal is 1055 and its tooltip is 1080. */
.pac-container {
    z-index: 1060;
}