/* Final Checker comparison motion ownership and single-surface error geometry. */

:root {
    --kb-checker-modal-motion: 300ms;
    --kb-checker-dock-motion: 240ms;
    --kb-checker-selection-motion: 220ms;
    --kb-checker-motion-out: cubic-bezier(.22, 1, .36, 1);
    --kb-checker-motion-in: cubic-bezier(.4, 0, 1, 1);
}

body.kb-comparison-modal-open {
    overflow: hidden !important;
    overscroll-behavior: contain !important;
}

/* Recent Analytics selection: animate the control and a paint-only card rim. */
body.kb-surface-checker .kb-recent-result-card {
    isolation: isolate !important;
}
body.kb-surface-checker .kb-selection-rim {
    position: absolute !important;
    inset: 0 !important;
    z-index: 18 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: scale(.992) !important;
    box-shadow:
        inset 0 0 0 1px rgba(245,245,247,0),
        inset 0 1px 0 rgba(255,255,255,0),
        0 0 0 rgba(0,0,0,0) !important;
    transition:
        opacity 180ms ease,
        transform var(--kb-checker-selection-motion) var(--kb-checker-motion-out),
        box-shadow var(--kb-checker-selection-motion) ease !important;
}
body.kb-surface-checker .kb-recent-result-card.is-compare-selected > .kb-selection-rim {
    opacity: 1 !important;
    transform: scale(1) !important;
    box-shadow:
        inset 0 0 0 1px rgba(245,245,247,.32),
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 34px rgba(0,0,0,.16) !important;
}
body.kb-surface-checker .kb-recent-result-card.is-selection-changing > .kb-selection-rim {
    animation: kb-selection-rim-pulse 300ms var(--kb-checker-motion-out) both !important;
}
@keyframes kb-selection-rim-pulse {
    0% { transform: scale(.992); filter: brightness(.92); }
    46% { transform: scale(1.006); filter: brightness(1.16); }
    100% { transform: scale(1); filter: brightness(1); }
}

body.kb-surface-checker .kb-recent-selection-holder {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
    background: rgba(11,11,12,.58) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08),0 8px 18px rgba(0,0,0,.18) !important;
    -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
    backdrop-filter: blur(14px) saturate(130%) !important;
    transition: transform 220ms var(--kb-checker-motion-out),background-color 220ms ease,box-shadow 220ms ease !important;
}
body.kb-surface-checker .kb-recent-selection-holder:hover {
    transform: translateY(-1px) scale(1.035) !important;
    background: rgba(28,28,32,.78) !important;
}
body.kb-surface-checker .kb-recent-selection-control {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(245,245,247,.42) !important;
    border-radius: 8px !important;
    outline: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: rgba(22,22,24,.96) !important;
    background-image: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07),0 5px 12px rgba(0,0,0,.16) !important;
    cursor: pointer !important;
    transform: translateZ(0) scale(1) !important;
    transition:
        transform 220ms var(--kb-checker-motion-out),
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 220ms ease !important;
}
body.kb-surface-checker .kb-recent-selection-control::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: -5px !important;
    border-radius: 11px !important;
    border: 1px solid rgba(245,245,247,.28) !important;
    opacity: 0 !important;
    transform: scale(.72) !important;
    transition: opacity 180ms ease,transform 300ms var(--kb-checker-motion-out) !important;
}
body.kb-surface-checker .kb-recent-selection-control::after {
    content: "" !important;
    display: block !important;
    width: 9px !important;
    height: 5px !important;
    border-left: 2px solid #111114 !important;
    border-bottom: 2px solid #111114 !important;
    opacity: 0 !important;
    transform: translateY(-1px) rotate(-45deg) scale(.35) !important;
    transform-origin: 46% 58% !important;
    transition: opacity 120ms ease,transform 300ms var(--kb-checker-motion-out) !important;
}
body.kb-surface-checker .kb-recent-selection-control:hover {
    transform: translateZ(0) scale(1.08) !important;
    border-color: rgba(245,245,247,.72) !important;
}
body.kb-surface-checker .kb-recent-selection-control:active {
    transform: translateZ(0) scale(.9) !important;
    transition-duration: 90ms !important;
}
body.kb-surface-checker .kb-recent-selection-control:checked {
    border-color: #f5f5f7 !important;
    background: #f5f5f7 !important;
    background-image: none !important;
    box-shadow: 0 7px 16px rgba(0,0,0,.22),inset 0 0 0 1px rgba(17,17,20,.08) !important;
    transform: translateZ(0) scale(1.04) !important;
}
body.kb-surface-checker .kb-recent-selection-control:checked::before {
    opacity: 1 !important;
    transform: scale(1) !important;
}
body.kb-surface-checker .kb-recent-selection-control:checked::after {
    opacity: 1 !important;
    transform: translateY(-1px) rotate(-45deg) scale(1) !important;
}
body.kb-surface-checker .kb-recent-selection-control:focus-visible {
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(245,245,247,.18),0 7px 16px rgba(0,0,0,.2) !important;
}
html[data-kb-theme="light"] body.kb-surface-checker .kb-recent-selection-holder {
    background: rgba(255,255,255,.86) !important;
    box-shadow: inset 0 0 0 1px rgba(25,25,31,.1),0 8px 18px rgba(38,41,53,.1) !important;
}
html[data-kb-theme="light"] body.kb-surface-checker .kb-recent-selection-control {
    border-color: rgba(25,25,31,.34) !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: inset 0 1px 0 #fff,0 5px 12px rgba(38,41,53,.09) !important;
}
html[data-kb-theme="light"] body.kb-surface-checker .kb-recent-result-card.is-compare-selected > .kb-selection-rim {
    box-shadow: inset 0 0 0 1px rgba(25,25,31,.2),inset 0 1px 0 #fff,0 14px 32px rgba(38,41,53,.08) !important;
}

/* Bottom comparison dock: mount, enter, count-change and leave are separate phases. */
body.kb-surface-checker .kb-recent-compare-dock {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    min-height: 62px !important;
    padding: 10px 11px 10px 16px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0,24px,0) scale(.955) !important;
    transform-origin: center bottom !important;
    will-change: transform,opacity !important;
    transition:
        opacity 170ms ease,
        transform var(--kb-checker-dock-motion) var(--kb-checker-motion-out),
        visibility 0s linear var(--kb-checker-dock-motion) !important;
}
body.kb-surface-checker .kb-recent-compare-dock[data-kb-dock-phase="preparing"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 0 !important;
    transform: translate3d(0,24px,0) scale(.955) !important;
}
body.kb-surface-checker .kb-recent-compare-dock[data-kb-dock-phase="open"],
body.kb-surface-checker .kb-recent-compare-dock.is-open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0,0,0) scale(1) !important;
    transition:
        opacity 170ms ease,
        transform var(--kb-checker-dock-motion) var(--kb-checker-motion-out),
        visibility 0s !important;
}
body.kb-surface-checker .kb-recent-compare-dock[data-kb-dock-phase="leaving"],
body.kb-surface-checker .kb-recent-compare-dock.is-leaving {
    display: flex !important;
    visibility: visible !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate3d(0,16px,0) scale(.975) !important;
    transition:
        opacity 170ms ease,
        transform 240ms var(--kb-checker-motion-in),
        visibility 0s linear 240ms !important;
}
body.kb-surface-checker .kb-recent-compare-dock .kb-compare-action {
    flex: 0 0 auto !important;
    min-width: 132px !important;
    min-height: 42px !important;
    margin-left: 4px !important;
    opacity: .56 !important;
    transform: translateZ(0) scale(.985) !important;
    transition: opacity 180ms ease,transform 240ms var(--kb-checker-motion-out),background-color 220ms ease,box-shadow 220ms ease !important;
}
body.kb-surface-checker .kb-recent-compare-dock .kb-compare-action.is-ready:not(:disabled) {
    opacity: 1 !important;
    transform: translateZ(0) scale(1) !important;
}
body.kb-surface-checker .kb-recent-compare-dock .kb-compare-action.is-launching {
    animation: kb-compare-launch 260ms var(--kb-checker-motion-out) both !important;
}
@keyframes kb-compare-launch {
    0% { transform: scale(1); }
    38% { transform: scale(.94); }
    100% { transform: scale(1.025); }
}
body.kb-surface-checker .kb-recent-compare-dock .kb-compare-clear {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 13px !important;
    transform: translateZ(0) !important;
    overflow: hidden !important;
    transition: transform 220ms var(--kb-checker-motion-out),background-color 180ms ease,box-shadow 180ms ease !important;
}
body.kb-surface-checker .kb-recent-compare-dock .kb-compare-clear:hover {
    transform: translateZ(0) rotate(5deg) scale(1.06) !important;
}
body.kb-surface-checker .kb-recent-compare-dock .kb-compare-clear:active {
    transform: translateZ(0) scale(.9) !important;
}
body.kb-surface-checker .kb-recent-compare-dock .kb-compare-clear-icon {
    display: block !important;
    transform: translateZ(0) rotate(0deg) scale(1) !important;
    transform-origin: center !important;
    transition: transform 300ms var(--kb-checker-motion-out),opacity 160ms ease !important;
}
body.kb-surface-checker .kb-recent-compare-dock .kb-compare-clear.is-activating .kb-compare-clear-icon,
body.kb-surface-checker .kb-recent-compare-dock.is-clearing .kb-compare-clear-icon {
    animation: kb-compare-clear-turn 260ms var(--kb-checker-motion-out) both !important;
}
@keyframes kb-compare-clear-turn {
    0% { opacity: 1; transform: rotate(0deg) scale(1); }
    44% { opacity: .55; transform: rotate(92deg) scale(.68); }
    100% { opacity: 1; transform: rotate(180deg) scale(1); }
}
body.kb-surface-checker .kb-recent-compare-dock .kb-compare-count {
    display: inline-grid !important;
    place-items: center !important;
    min-width: 28px !important;
    transform-origin: center !important;
}
body.kb-surface-checker .kb-recent-compare-dock.is-count-changing .kb-compare-count {
    animation: kb-compare-count-pop 250ms var(--kb-checker-motion-out) both !important;
}
@keyframes kb-compare-count-pop {
    0% { opacity: .62; transform: translateY(4px) scale(.82); }
    55% { opacity: 1; transform: translateY(-1px) scale(1.12); }
    100% { opacity: 1; transform: none; }
}

/* Comparison modal: keep it mounted during enter/leave so backdrop and panel can transition. */
body.kb-surface-checker [data-kb-comparison-layer],
body.kb-surface-checker .kb-compare-modal-layer {
    display: flex !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    background-color: rgba(11,11,12,0) !important;
    -webkit-backdrop-filter: blur(0) saturate(100%) !important;
    backdrop-filter: blur(0) saturate(100%) !important;
    transition:
        opacity 210ms ease,
        background-color 300ms ease,
        backdrop-filter var(--kb-checker-modal-motion) var(--kb-checker-motion-out),
        -webkit-backdrop-filter var(--kb-checker-modal-motion) var(--kb-checker-motion-out),
        visibility 0s linear var(--kb-checker-modal-motion) !important;
}
body.kb-surface-checker [data-kb-comparison-layer][aria-hidden="true"]:not(.is-open):not(.is-leaving):not(.is-preparing)[data-kb-comparison-closed="true"],
body.kb-surface-checker [data-kb-comparison-layer][data-kb-comparison-closed="true"],
body.kb-surface-checker .kb-compare-modal-layer[data-kb-comparison-closed="true"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
body.kb-surface-checker [data-kb-comparison-layer].is-preparing,
body.kb-surface-checker .kb-compare-modal-layer.is-preparing {
    display: flex !important;
    visibility: visible !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
body.kb-surface-checker [data-kb-comparison-layer].is-open,
body.kb-surface-checker .kb-compare-modal-layer.is-open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background-color: rgba(11,11,12,.76) !important;
    -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
    backdrop-filter: blur(18px) saturate(125%) !important;
    transition:
        opacity 210ms ease,
        background-color 300ms ease,
        backdrop-filter var(--kb-checker-modal-motion) var(--kb-checker-motion-out),
        -webkit-backdrop-filter var(--kb-checker-modal-motion) var(--kb-checker-motion-out),
        visibility 0s !important;
}
body.kb-surface-checker [data-kb-comparison-layer].is-leaving,
body.kb-surface-checker .kb-compare-modal-layer.is-leaving {
    display: flex !important;
    visibility: visible !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background-color: rgba(11,11,12,0) !important;
    -webkit-backdrop-filter: blur(0) saturate(100%) !important;
    backdrop-filter: blur(0) saturate(100%) !important;
    transition:
        opacity 180ms ease,
        background-color 230ms ease,
        backdrop-filter 260ms var(--kb-checker-motion-in),
        -webkit-backdrop-filter 260ms var(--kb-checker-motion-in),
        visibility 0s linear 260ms !important;
}
body.kb-surface-checker [data-kb-comparison-layer] > .kb-comparison-motion-panel,
body.kb-surface-checker .kb-compare-modal-layer > .kb-comparison-motion-panel {
    opacity: 0 !important;
    transform: translate3d(0,20px,0) scale(.97) !important;
    transform-origin: center bottom !important;
    will-change: transform,opacity !important;
    transition: opacity 190ms ease,transform var(--kb-checker-modal-motion) var(--kb-checker-motion-out) !important;
}
body.kb-surface-checker [data-kb-comparison-layer].is-open > .kb-comparison-motion-panel,
body.kb-surface-checker .kb-compare-modal-layer.is-open > .kb-comparison-motion-panel {
    opacity: 1 !important;
    transform: translate3d(0,0,0) scale(1) !important;
}
body.kb-surface-checker [data-kb-comparison-layer].is-leaving > .kb-comparison-motion-panel,
body.kb-surface-checker .kb-compare-modal-layer.is-leaving > .kb-comparison-motion-panel {
    opacity: 0 !important;
    transform: translate3d(0,14px,0) scale(.98) !important;
    transition-duration: 210ms !important;
    transition-timing-function: var(--kb-checker-motion-in) !important;
}
body.kb-surface-checker [data-kb-comparison-layer][inert],
body.kb-surface-checker .kb-compare-modal-layer[inert] {
    user-select: none !important;
}
body.kb-surface-checker .kb-compare-modal-close {
    transform: translateZ(0) rotate(0deg) scale(1) !important;
    transition: transform 240ms var(--kb-checker-motion-out),background-color 180ms ease,color 180ms ease !important;
}
body.kb-surface-checker .kb-compare-modal-close:hover {
    transform: translateZ(0) rotate(90deg) scale(1.06) !important;
}
body.kb-surface-checker .kb-compare-modal-close:active {
    transform: translateZ(0) rotate(90deg) scale(.9) !important;
}
body.kb-surface-checker .kb-compare-modal-close-icon {
    transform: translateZ(0) !important;
    transition: transform 240ms var(--kb-checker-motion-out) !important;
}
body.kb-surface-checker [data-kb-comparison-layer].is-open .kb1572-compare-modal thead,
body.kb-surface-checker [data-kb-comparison-layer].is-open .kb1572-compare-modal tbody tr {
    animation: kb-compare-row-enter 260ms var(--kb-checker-motion-out) both !important;
}
body.kb-surface-checker [data-kb-comparison-layer].is-open .kb1572-compare-modal tbody tr:nth-child(1) { animation-delay: 20ms !important; }
body.kb-surface-checker [data-kb-comparison-layer].is-open .kb1572-compare-modal tbody tr:nth-child(2) { animation-delay: 35ms !important; }
body.kb-surface-checker [data-kb-comparison-layer].is-open .kb1572-compare-modal tbody tr:nth-child(3) { animation-delay: 50ms !important; }
body.kb-surface-checker [data-kb-comparison-layer].is-open .kb1572-compare-modal tbody tr:nth-child(4) { animation-delay: 65ms !important; }
@keyframes kb-compare-row-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
html[data-kb-theme="light"] body.kb-surface-checker [data-kb-comparison-layer].is-open,
html[data-kb-theme="light"] body.kb-surface-checker .kb-compare-modal-layer.is-open {
    background-color: rgba(232,234,240,.72) !important;
}

/* Existing single-surface failure card geometry. */
body.kb-surface-checker .kb-checker-error-result {
    box-sizing: border-box !important;
    width: min(calc(100% - 32px), 620px) !important;
    margin-inline: auto !important;
    border: 0 !important;
    border-radius: 30px !important;
    background: linear-gradient(145deg, rgba(248,113,113,.14), rgba(248,113,113,.045) 62%), rgba(31,28,33,.98) !important;
    box-shadow: inset 0 0 0 1px rgba(248,113,113,.22), inset 0 1px 0 rgba(255,255,255,.075), 0 22px 52px rgba(0,0,0,.3) !important;
    -webkit-backdrop-filter: blur(24px) saturate(135%) !important;
    backdrop-filter: blur(24px) saturate(135%) !important;
    overflow: hidden !important;
    clip-path: inset(0 round 30px) !important;
    isolation: isolate !important;
}
body.kb-surface-checker .kb-checker-error-result::before,
body.kb-surface-checker .kb-checker-error-result::after,
body.kb-surface-checker .kb-checker-error-result > .animated-bg-glow {
    content: none !important;
    display: none !important;
}
body.kb-surface-checker .kb-checker-error-result .kb-checker-error-panel {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: hidden !important;
}
body.kb-surface-checker .kb-checker-error-result .kb-checker-error-row,
body.kb-surface-checker .kb-checker-error-result .kb-checker-error-panel > .flex {
    max-width: 540px !important;
    margin-inline: auto !important;
}
html[data-kb-theme="light"] body.kb-surface-checker .kb-checker-error-result {
    background: linear-gradient(145deg, #fff, rgba(255,240,242,.98)) !important;
    box-shadow: inset 0 0 0 1px rgba(185,45,57,.19), inset 0 1px 0 #fff, 0 20px 46px rgba(62,42,48,.13) !important;
}

.kb-attestation-badge-tee,
.kb-attestation-badge-strongbox {
    margin-left: 0 !important;
    white-space: nowrap !important;
}
.kb-attestation-badge-tee {
    border-color: rgba(96,165,250,.26) !important;
    background: rgba(59,130,246,.09) !important;
    color: #93c5fd !important;
}
.kb-attestation-badge-strongbox {
    border-color: rgba(74,222,128,.26) !important;
    background: rgba(34,197,94,.09) !important;
    color: #86efac !important;
}
html[data-kb-theme="light"] .kb-attestation-badge-tee { color: #1d4ed8 !important; }
html[data-kb-theme="light"] .kb-attestation-badge-strongbox { color: #166534 !important; }

@media (max-width: 560px) {
    body.kb-surface-checker .kb-recent-selection-holder {
        width: 36px !important;
        height: 36px !important;
        border-radius: 12px !important;
    }
    body.kb-surface-checker .kb-recent-compare-dock {
        min-height: 58px !important;
        padding: 8px 9px 8px 13px !important;
        gap: 6px !important;
    }
    body.kb-surface-checker .kb-recent-compare-dock .kb-compare-action {
        min-width: 116px !important;
        padding-inline: 17px !important;
    }
    body.kb-surface-checker .kb-checker-error-result {
        width: min(calc(100% - 28px), 620px) !important;
        border-radius: 26px !important;
        clip-path: inset(0 round 26px) !important;
    }
    body.kb-surface-checker .kb-checker-error-result .kb-checker-error-panel {
        padding: 25px 20px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --kb-checker-modal-motion: 1ms;
        --kb-checker-dock-motion: 1ms;
        --kb-checker-selection-motion: 1ms;
    }
    body.kb-surface-checker :is(
        .kb-selection-rim,
        .kb-recent-selection-holder,
        .kb-recent-selection-control,
        .kb-recent-compare-dock,
        .kb-compare-action,
        .kb-compare-clear,
        .kb-compare-clear-icon,
        [data-kb-comparison-layer],
        .kb-comparison-motion-panel,
        .kb-compare-modal-close
    ) {
        transition-duration: 1ms !important;
        animation: none !important;
    }
}