/* Shared interaction feedback, loaded on every page before any PJAX navigation.
   Focus stays operable; selection is marked below the control, never by a blue frame. */
body.voicepa-product-ui {
    --vp-focus-mark: #94385f;
}

body.voicepa-product-ui > header [data-vp-menu-toggle] {
    --vp-focus-mark: #fff;
}

body.voicepa-product-ui :is(a, button, input, select, textarea, summary, [tabindex], [contenteditable="true"]):not(:where(#wpadminbar, #wpadminbar *)):focus {
    outline: none !important;
}

/* Closing the drawer can return focus to its opener on touch devices. */
body.voicepa-product-ui [data-vp-menu-toggle]:focus:not(:focus-visible) {
    box-shadow: none !important;
}

/* An inset underline does not move neighbouring controls or change their size. */
body.voicepa-product-ui :is(a, button, input, select, textarea, summary, [tabindex], [contenteditable="true"]):not(:where(#wpadminbar, #wpadminbar *)):focus-visible {
    box-shadow: inset 0 -3px 0 var(--vp-focus-mark) !important;
}

body.voicepa-product-ui :is(input, select, textarea):not(:where(#wpadminbar *, [aria-invalid="true"], :invalid)):focus {
    border-color: #b9a5ad;
}

body.voicepa-product-ui [data-vp-menu-toggle] {
    -webkit-tap-highlight-color: transparent;
}

/* The avatar upload control has its own high-specificity shadow on a blue fill. */
body.voicepa-product-ui #page.voicepa-profile-page .voicepa-another-avatar-field .wpuf-avatar-upload-cta:focus-visible,
body.voicepa-product-ui .voicepa-another-avatar-field .wpuf-avatar-upload-cta:focus-visible {
    box-shadow: inset 0 -3px 0 #fff !important;
}

/* Forced-colour users still need a visible keyboard marker when shadows vanish. */
@media (forced-colors: active) {
    body.voicepa-product-ui :is(a, button, input, select, textarea, summary, [tabindex], [contenteditable="true"]):not(:where(#wpadminbar, #wpadminbar *)):focus-visible {
        outline: 2px dashed CanvasText !important;
        outline-offset: 2px;
    }
}