/* Component styles take precedence over this shared browser-focus baseline. */
@layer pdrapp-focus {
    :where(:focus) { outline: none; }

    :where(:is(a[href], area[href], button, input:not([type="hidden"]), select, textarea, summary,
        audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]),
        [tabindex]:not([tabindex="-1"]), [role="button"], [role="link"], [role="checkbox"],
        [role="radio"], [role="switch"], [role="tab"], [role="menuitem"]):focus-visible) {
        outline: 2px solid var(--blue, #087fff);
        outline-offset: 2px;
    }

    :where(:is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
        select, textarea, [contenteditable]:not([contenteditable="false"])):focus-visible) {
        outline-offset: -1px;
    }

    @media (forced-colors: active) {
        :where(:focus-visible) { outline: 2px solid Highlight; }
    }
}