/* Public interaction states, after legacy Bootstrap and page-specific styles. */
body.ap-site, body.base {
    --ap-focus: #36588f;
    --ap-press: #e9eef8;
    --ap-tap: rgba(79, 108, 165, .16);
}
.ap-site :is(.ap-home-header, .ap-hero, .ap-estimate, .ap-footer),
.ap-inner :is(.ap-inner-masthead, .ap-page-heading, .ap-contact-info, .ap-result),
.ap-inner .ap-catalog-root .ap-empty {
    --ap-focus: #bfd4ff;
    --ap-press: #30435f;
    --ap-tap: rgba(190, 212, 255, .18);
}
/* Native tap feedback remains present, but no longer uses a heavy black flash. */
:is(body.ap-site, body.base) :is(a[href], button, summary, input, select, textarea, [tabindex]) {
    -webkit-tap-highlight-color: var(--ap-tap);
}
/* Also serves as a visible fallback for browsers without :focus-visible. */
:is(body.ap-site, body.base) :is(a[href], button, summary, input, select, textarea, [tabindex]):focus {
    outline: 2px solid var(--ap-focus);
    outline-offset: 3px;
}
:is(body.ap-site, body.base) :is(a[href], button, summary, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--ap-focus);
    outline-offset: 3px;
}
@supports selector(:focus-visible) {
    /* Remove only pointer focus, never all focus or the user's keyboard focus. */
    :is(body.ap-site, body.base) :is(a[href], button, summary, input, select, textarea, [tabindex]):focus:not(:focus-visible) {
        outline: none;
    }
}
/* Inset rings cannot be cut off by scrollable menus and product-table wrappers. */
body.ap-site .ap-navigation a:focus-visible,
body.ap-site .ap-sidebar a:focus-visible,
body.ap-site a.ap-small-button:focus-visible,
body.ap-site #catalog-table tbody tr td a.ap-small-button:focus-visible,
body.ap-site .pagination > li > a:focus-visible {
    outline: 2px solid var(--ap-focus);
    outline-offset: -4px;
}
.ap-site .ap-navigation a:focus-visible,
.ap-site .ap-sidebar a:focus-visible { background-color: var(--ap-press); }
body.ap-site .ap-category.ap-category-photo:focus-visible { outline: 2px solid var(--ap-focus); outline-offset: 3px; }

/* Phone focus follows the text, not an oversized grid track. Keep the tap area. */
.ap-site .ap-header .ap-phone { justify-self: start; width: max-content; max-width: 100%; min-height: 44px; }
.ap-site .ap-header .ap-phone:focus-visible,
.ap-site .ap-home-header .ap-phone:focus-visible {
    outline: none;
    /* Legacy style.css has a { text-decoration: none !important }. */
    text-decoration: underline 2px !important;
    text-underline-offset: 5px;
}
.ap-site .ap-header .ap-phone:active,
.ap-site .ap-home-header .ap-phone:active { text-decoration: underline 2px !important; text-underline-offset: 5px; }

/* Calm field state replaces Bootstrap's old glow; errors retain their border. */
body.ap-site #contact-form form div input[type="text"]:focus,
body.ap-site #contact-form form div textarea:focus {
    outline: 2px solid var(--ap-focus);
    outline-offset: 2px;
    box-shadow: none;
}
body.ap-site .ap-fields :is(input, select):focus,
body.ap-site .ap-filters select:focus,
body.ap-site .ap-profile-picker select:focus,
body.base .weight-main :is(input, select):focus {
    outline: 2px solid var(--ap-focus);
    outline-offset: 2px;
    box-shadow: none;
}

/* A pressed surface gives touch/mouse feedback without changing geometry. */
.ap-site :is(.ap-navigation a, .ap-sidebar a, .ap-category-directory > a, .ap-menu-toggle):active,
.ap-site summary:active { background-color: var(--ap-press); }
.ap-site .ap-category-photo:active .ap-category-caption,
.ap-site .ap-catalog-feature:active .ap-catalog-feature-copy { background-color: var(--ap-press); }
.ap-site .ap-button:active, body.base .weight-submit:active { filter: brightness(.92); transform: none; }
@media (prefers-reduced-motion: no-preference) {
    .ap-site :is(.ap-phone, summary, .ap-category-caption, .ap-catalog-feature-copy) { transition: background-color 160ms ease, color 160ms ease; }
}
@media (forced-colors: active) {
    /* System high-contrast colours must win, including on dark backgrounds. */
    :is(body.ap-site, body.base), .ap-site * { --ap-focus: Highlight; }
    .ap-site .ap-header .ap-phone:focus-visible,
    .ap-site .ap-home-header .ap-phone:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}