/* Shared tactile button treatment inspired by Realka's interaction model.
   Component styles continue to own color, size, and layout. */

body.core-body :is(
    button:not(:where(
        .pcsc-nav__trigger,
        .pcsc-nav__icon-button,
        .pcsc-nav__mobile-trigger,
        .pcsc-nav__context-trigger,
        .pcsc-nav__account-trigger,
        .pcsc-spec-disclosure
    )),
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    a.button,
    a.btn,
    a[class*="-button"],
    a[class*="-btn"],
    a[class*="-action"],
    a[class*="-cta"],
    [role="button"],
    .pcsc-nav__primary,
    .pcsc-column-menu > summary,
    [class$="-filter-menu"] > summary,
    [class$="-detail-spec-index"] a,
    .pcsc-detail-action-dock > a,
    [class$="-detail-gallery__full"]
) {
    position: relative;
    overflow: hidden;
    box-shadow: 2px 3px 4px var(--pcsc-control-shadow, rgba(98, 76, 49, .34)), inset 1px 1px 0 var(--pcsc-control-sheen, rgba(255, 240, 208, .58)) !important;
    filter: none;
    transform: translate(0, 0) !important;
    transition:
        background-color 200ms ease,
        border-color 200ms ease,
        box-shadow 200ms ease,
        color 200ms ease,
        filter 200ms ease,
        transform 120ms ease;
}

body.core-body :is(
    button:not(:where(
        .pcsc-nav__trigger,
        .pcsc-nav__icon-button,
        .pcsc-nav__mobile-trigger,
        .pcsc-nav__context-trigger,
        .pcsc-nav__account-trigger,
        .pcsc-spec-disclosure
    )),
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    a.button,
    a.btn,
    a[class*="-button"],
    a[class*="-btn"],
    a[class*="-action"],
    a[class*="-cta"],
    [role="button"],
    .pcsc-nav__primary,
    .pcsc-column-menu > summary,
    [class$="-filter-menu"] > summary,
    [class$="-detail-spec-index"] a,
    .pcsc-detail-action-dock > a,
    [class$="-detail-gallery__full"]
):not(:disabled):not([aria-disabled="true"]):hover {
    box-shadow: 0 0 5px var(--pcsc-control-shadow-hover, rgba(181, 103, 25, .42)), inset 0 0 0 1px var(--pcsc-control-sheen-hover, rgba(245, 158, 11, .18)) !important;
    filter: brightness(1.025);
    transform: translate(0, 0) !important;
}

body.core-body :is(
    button:not(:where(
        .pcsc-nav__trigger,
        .pcsc-nav__icon-button,
        .pcsc-nav__mobile-trigger,
        .pcsc-nav__context-trigger,
        .pcsc-nav__account-trigger,
        .pcsc-spec-disclosure
    )),
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    a.button,
    a.btn,
    a[class*="-button"],
    a[class*="-btn"],
    a[class*="-action"],
    a[class*="-cta"],
    [role="button"],
    .pcsc-nav__primary,
    .pcsc-column-menu > summary,
    [class$="-filter-menu"] > summary,
    [class$="-detail-spec-index"] a,
    .pcsc-detail-action-dock > a,
    [class$="-detail-gallery__full"]
):not(:disabled):not([aria-disabled="true"]):active {
    box-shadow: none !important;
    filter: none;
    transform: translate(0, 0) !important;
}

body.core-body :is(
    button:not(:where(
        .pcsc-nav__trigger,
        .pcsc-nav__icon-button,
        .pcsc-nav__mobile-trigger,
        .pcsc-nav__context-trigger,
        .pcsc-nav__account-trigger,
        .pcsc-spec-disclosure
    )),
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    a.button,
    a.btn,
    a[class*="-button"],
    a[class*="-btn"],
    a[class*="-action"],
    a[class*="-cta"],
    [role="button"],
    .pcsc-nav__primary,
    .pcsc-column-menu > summary,
    [class$="-filter-menu"] > summary,
    [class$="-detail-spec-index"] a,
    .pcsc-detail-action-dock > a,
    [class$="-detail-gallery__full"]
):focus-visible {
    outline: 3px solid color-mix(in srgb, #f28b30 42%, transparent);
    outline-offset: 4px;
}

body.core-body :is(
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    [role="button"]
):disabled,
body.core-body :is(
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    [role="button"]
)[aria-disabled="true"] {
    box-shadow: none !important;
    filter: none;
    transform: none !important;
}

/* Table utility labels are intentionally smaller than sorting presets. */
body.core-body #main-site-content .pcsc-table-tools__copy {
    padding-inline: .6rem;
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: 0;
}

/* Native details controls need a persistent state after the pointer is released. */
body.core-body #main-site-content [class$="-filter-menu"][open] > summary,
body.core-body #main-site-content [class$="-filter-menu"][open] > summary:hover {
    color: var(--core-text-color) !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, #f28b30 6%, var(--core-body-background)),
        color-mix(in srgb, #f28b30 2%, var(--core-body-background))
    ) !important;
    border-color: color-mix(in srgb, #f28b30 22%, var(--core-border-color)) !important;
    box-shadow:
        inset 1px 2px 4px color-mix(in srgb, #000 17%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--core-text-color) 5%, transparent) !important;
    filter: none;
    transform: translate(0, 0) !important;
}

body.core-body .pcsc-nav__context-trigger[aria-expanded="true"] > i {
    color: var(--pcsc-commerce-icon, #ad641d) !important;
}

body.core-body .pcsc-nav__context-trigger[aria-expanded="true"],
body.core-body .pcsc-nav__context-trigger[aria-expanded="true"]:hover {
    color: var(--core-text-color);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, #f28b30 6%, var(--core-body-background)),
        color-mix(in srgb, #f28b30 2%, var(--core-body-background))
    );
    border-color: color-mix(in srgb, #f28b30 22%, var(--core-border-color));
    box-shadow:
        inset 1px 2px 4px color-mix(in srgb, #000 17%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--core-text-color) 5%, transparent);
}

body.core-body #main-site-content .pcsc-column-menu[open] > summary,
body.core-body #main-site-content .pcsc-column-menu[open] > summary:hover {
    color: var(--core-text-color) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--core-text-color) 9%, var(--core-body-background)),
        color-mix(in srgb, var(--core-text-color) 4%, var(--core-body-background))
    ) !important;
    border-color: color-mix(in srgb, var(--core-text-color) 22%, var(--core-border-color)) !important;
    box-shadow:
        inset 1px 2px 4px color-mix(in srgb, #000 18%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--core-text-color) 5%, transparent) !important;
    filter: none;
    transform: translate(0, 0) !important;
}

body.core-body #main-site-content .pcsc-column-menu[open] > summary i {
    color: var(--core-secondary-text-color) !important;
}

/* Filter option chips now communicate raised, hover, and selected states. */
body.core-body #main-site-content [class$="-filter-menu__panel"] :is(
    [class*="-segmented"],
    [class*="-check-grid"]
) label > span {
    box-shadow:
        1px 2px 3px var(--pcsc-control-shadow, rgba(98, 76, 49, .34)),
        inset 1px 1px 0 var(--pcsc-control-sheen, rgba(255, 240, 208, .58));
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

body.core-body #main-site-content [class$="-filter-menu__panel"] :is(
    [class*="-segmented"],
    [class*="-check-grid"]
) label:hover > span {
    border-color: color-mix(in srgb, #f28b30 24%, var(--core-border-color));
    box-shadow:
        0 0 5px var(--pcsc-control-shadow-hover, rgba(181, 103, 25, .42)),
        inset 0 0 0 1px var(--pcsc-control-sheen-hover, rgba(245, 158, 11, .18));
}

body.core-body #main-site-content [class$="-filter-menu__panel"] :is(
    [class*="-segmented"],
    [class*="-check-grid"]
) label:has(input:checked) > span {
    color: var(--core-text-color) !important;
    background: color-mix(in srgb, #f28b30 6%, var(--core-body-background)) !important;
    border-color: color-mix(in srgb, #f28b30 26%, var(--core-border-color)) !important;
    box-shadow:
        inset 1px 2px 4px color-mix(in srgb, #000 17%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--core-text-color) 5%, transparent) !important;
}

body.core-body #main-site-content [class$="-filter-menu__panel"] :is(
    [class*="-segmented"],
    [class*="-check-grid"]
) label:active > span {
    box-shadow: none !important;
}

/* Only the dense specification shortcuts and chart ranges need tighter corners. */
body.core-body [class$="-detail-spec-index"] a,
body.core-body [class$="-detail-ranges"] button {
    border-radius: .4rem;
}

@media (prefers-reduced-motion: reduce) {
    body.core-body :is(
        button,
        input[type="submit"],
        input[type="button"],
        input[type="reset"],
        a.button,
        a.btn,
        a[class*="-button"],
        a[class*="-btn"],
        a[class*="-action"],
        a[class*="-cta"],
        [role="button"],
        .pcsc-column-menu > summary,
        [class$="-filter-menu"] > summary,
        [class$="-detail-spec-index"] a,
        .pcsc-detail-action-dock > a,
        [class$="-detail-gallery__full"]
    ) {
        animation: none !important;
        transition-duration: .01ms !important;
    }

}