/* Reflected light and a brief perimeter sweep on existing action surfaces.
   Decorative colour is never a status or the sole keyboard-focus indicator.
   Resting surfaces are static; only deliberate interaction runs a single pass. */
@property --surface-edge-angle {
    syntax: "<angle>";
    initial-value: 225deg;
    inherits: false;
}

:root {
    /* Interior reflected colour, distinct from the lower glow and perimeter.
       Transparent radial ends keep the reading surface white below the edge. */
    --surface-aurora-wash:
        radial-gradient(ellipse 36% 100% at 14% -12%, rgb(57 135 245 / 20%), transparent 78%),
        radial-gradient(ellipse 36% 100% at 46% -18%, rgb(150 104 220 / 17%), transparent 78%),
        radial-gradient(ellipse 32% 100% at 74% -14%, rgb(225 137 191 / 15%), transparent 78%),
        radial-gradient(ellipse 26% 100% at 96% -24%, rgb(228 171 116 / 10%), transparent 78%);
    --surface-aurora-light:
        radial-gradient(ellipse 23% 90% at 10% 60%, rgb(67 128 242 / 38%), transparent 76%),
        radial-gradient(ellipse 23% 90% at 30% 65%, rgb(40 181 215 / 32%), transparent 76%),
        radial-gradient(ellipse 23% 90% at 51% 60%, rgb(150 104 220 / 34%), transparent 76%),
        radial-gradient(ellipse 23% 90% at 72% 65%, rgb(228 155 96 / 30%), transparent 76%),
        radial-gradient(ellipse 23% 90% at 92% 60%, rgb(68 170 133 / 30%), transparent 76%);
    --surface-aurora-shadow: inset 0 1px 0 rgb(255 255 255 / 95%), 0 8px 20px -14px rgb(23 33 43 / 14%);
    --surface-edge-stops:
        transparent 0deg 205deg, rgb(140 115 211 / 45%) 238deg,
        rgb(36 119 228 / 80%) 264deg, rgb(0 172 204 / 65%) 290deg,
        rgb(80 164 145 / 45%) 313deg, rgb(213 172 106 / 42%) 331deg,
        transparent 353deg;
}

.page-home .home-hero__search .vin-entry__controls,
.page-free-check .product-hero__search .search-panel,
.page-pricing .pricing-offer,
.page-public .checked-vehicle-reminder {
    position: relative;
    isolation: isolate;
    background: rgb(255 255 255 / 96%);
    box-shadow: var(--surface-aurora-shadow);
}

/* Home's joined controls already own their single border and radius. These
   other existing panels retain one light neutral boundary, not nested frames. */
.page-free-check .product-hero__search .search-panel,
.page-pricing .pricing-offer,
.page-public .checked-vehicle-reminder {
    border-color: #dfe4ea;
    border-radius: var(--public-radius-panel, 0.75rem);
}

.page-home .home-hero__search .vin-entry__controls::after,
.page-free-check .product-hero__search .search-panel::after,
.page-pricing .pricing-offer::after,
.page-public .checked-vehicle-reminder::after {
    position: absolute;
    z-index: -1;
    inset-inline: 8%;
    inset-block-end: -0.65rem;
    display: block;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--surface-aurora-light);
    content: "";
    filter: blur(0.875rem);
    opacity: 0.58;
    pointer-events: none;
}

/* The offer clips its rounded contents. Keep its reflected light just inside
   that lower edge instead of changing overflow or exposing nested content. */
.page-pricing .pricing-offer::after {
    inset-block-end: -0.125rem;
}

/* Decoration never competes with validation, preparation or inactive entry. */
.page-home .home-hero__search .vin-entry:is([aria-busy="true"], :has(.vin-input[aria-invalid="true"]), :has(.vin-input:disabled)) .vin-entry__controls::after,
.page-free-check .product-hero__search .search-panel:has(.vin-entry[aria-busy="true"], .vin-input[aria-invalid="true"], .vin-input:disabled)::after {
    display: none;
}

/* A document photograph has ordinary elevation only, never a colour overlay. */
.page-home .report-preview {
    box-shadow: 0 8px 24px rgb(23 33 43 / 7%);
}

.page-home .pricing-callout,
.page-sample-report .sample-report__overview,
.page-recent-checks .recent-checks__list > li:first-child .recent-check-card {
    box-shadow: none;
}

/* Paint directly inside each existing rounded surface: no overlay, clipping
   change, extra frame, moving background or pointer-intercepting layer. */
.page-home .home-hero__search .vin-entry__controls,
.page-home .home-hero__search .vin-input-group,
.page-free-check .product-hero__search .search-panel,
.page-pricing .pricing-offer,
.page-public .checked-vehicle-reminder,
.page-recent-checks .recent-checks__empty,
.page-free-result .vehicle-preview--with-offer .pre-purchase-teaser--offer {
    background-image: var(--surface-aurora-wash);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 4.5rem;
}

.page-home .home-hero__search .vin-entry:is([aria-busy="true"], :has(.vin-input[aria-invalid="true"]), :has(.vin-input:disabled)) :is(.vin-entry__controls, .vin-input-group),
.page-free-check .product-hero__search .search-panel:has(.vin-entry[aria-busy="true"], .vin-input[aria-invalid="true"], .vin-input:disabled),
.page-public .checked-vehicle-reminder:is([data-dismissing], :has([data-submitting]), :has([data-checked-vehicle-error]:not([hidden]))) {
    background-image: none;
}

.page-home .home-hero__search .vin-entry:not([aria-busy="true"])
    .vin-input-group:focus-within:not(:has(.vin-input[aria-invalid="true"])) {
    box-shadow: var(--shadow-focus, 0 0 0 4px rgb(47 111 237 / 20%));
}

/* The mask leaves the entire face clear. Unsupported mask implementations
   keep the ordinary neutral border and the separate solid focus outline. */
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
    .page-home .home-hero__search .vin-entry__controls::before,
    .page-free-check .product-hero__search .search-panel::before,
    .page-public .site-header__cta::before,
    .page-public [data-surface-action]::before {
        position: absolute;
        z-index: 1;
        inset: -1px;
        display: block;
        padding: 1.5px;
        border-radius: inherit;
        background: conic-gradient(from var(--surface-edge-angle), var(--surface-edge-stops));
        content: "";
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0.5;
        pointer-events: none;
    }

    .page-public .site-header__cta,
    .page-public [data-surface-action] {
        position: relative;
        isolation: isolate;
    }

    .page-public .site-header__cta::before,
    .page-public [data-surface-action]::before {
        inset: -2px;
        padding: 2px;
        opacity: 0;
    }

    .page-home .home-hero__search .vin-entry__controls:focus-within::before,
    .page-free-check .product-hero__search .search-panel:focus-within::before,
    .page-public .site-header__cta:focus-visible::before,
    .page-public [data-surface-action]:focus-visible::before {
        opacity: 1;
    }

    @media (prefers-reduced-motion: no-preference) {
        .page-home .home-hero__search .vin-entry__controls:focus-within::before,
        .page-free-check .product-hero__search .search-panel:focus-within::before,
        .page-public .site-header__cta:focus-visible::before,
        .page-public [data-surface-action]:focus-visible::before {
            animation: surface-edge-travel 2.4s ease-in-out 1;
        }
    }

    @media (hover: hover) and (pointer: fine) {
        .page-home .home-hero__search .vin-entry__controls:hover::before,
        .page-free-check .product-hero__search .search-panel:hover::before,
        .page-public .site-header__cta:hover::before,
        .page-public [data-surface-action]:hover::before {
            opacity: 1;
        }
    }

    @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
        .page-home .home-hero__search .vin-entry__controls:hover::before,
        .page-free-check .product-hero__search .search-panel:hover::before,
        .page-public .site-header__cta:hover::before,
        .page-public [data-surface-action]:hover::before {
            animation: surface-edge-travel 2.4s ease-in-out 1;
        }
    }
}

/* Validation and pending work own the field's emphasis. The progress surface
   supplies a distinct, accurately indeterminate waiting state instead. */
.page-home .home-hero__search .vin-entry:is([aria-busy="true"], :has(.vin-input[aria-invalid="true"]), :has(.vin-input:disabled)) .vin-entry__controls::before,
.page-free-check .product-hero__search .search-panel:has(.vin-entry[aria-busy="true"], .vin-input[aria-invalid="true"], .vin-input:disabled)::before {
    display: none;
    animation: none;
}

@keyframes surface-edge-travel {
    from { --surface-edge-angle: 225deg; }
    to { --surface-edge-angle: 585deg; }
}

@media (prefers-reduced-motion: reduce) {
    .page-home .home-hero__search .vin-entry__controls::before,
    .page-free-check .product-hero__search .search-panel::before,
    .page-public .site-header__cta::before,
    .page-public [data-surface-action]::before {
        animation: none;
    }
}

@media (forced-colors: active) {
    .page-home .home-hero__search .vin-entry__controls,
    .page-home .home-hero__search .vin-input-group,
    .page-free-check .product-hero__search .search-panel,
    .page-pricing .pricing-offer,
    .page-public .checked-vehicle-reminder,
    .page-recent-checks .recent-checks__empty,
    .page-free-result .vehicle-preview--with-offer .pre-purchase-teaser--offer {
        background-image: none;
    }

    .page-home .home-hero__search .vin-entry__controls::before,
    .page-free-check .product-hero__search .search-panel::before,
    .page-public .site-header__cta::before,
    .page-public [data-surface-action]::before {
        display: none;
        animation: none;
    }

    .page-home .home-hero__search .vin-entry__controls,
    .page-free-check .product-hero__search .search-panel,
    .page-pricing .pricing-offer,
    .page-public .checked-vehicle-reminder {
        border-color: CanvasText;
        background: Canvas;
        box-shadow: none;
    }

    .page-home .home-hero__search .vin-entry__controls::after,
    .page-free-check .product-hero__search .search-panel::after,
    .page-pricing .pricing-offer::after,
    .page-public .checked-vehicle-reminder::after {
        display: none;
    }

    .page-home .report-preview { box-shadow: none; }
}

@media print {
    .page-home .home-hero__search .vin-entry__controls,
    .page-home .home-hero__search .vin-input-group,
    .page-free-check .product-hero__search .search-panel,
    .page-pricing .pricing-offer,
    .page-public .checked-vehicle-reminder,
    .page-recent-checks .recent-checks__empty,
    .page-free-result .vehicle-preview--with-offer .pre-purchase-teaser--offer {
        background-image: none;
    }

    .page-home .home-hero__search .vin-entry__controls::before,
    .page-free-check .product-hero__search .search-panel::before,
    .page-public .site-header__cta::before,
    .page-public [data-surface-action]::before {
        display: none;
        animation: none;
    }

    .page-home .home-hero__search .vin-entry__controls,
    .page-free-check .product-hero__search .search-panel,
    .page-pricing .pricing-offer,
    .page-public .checked-vehicle-reminder,
    .page-home .report-preview {
        box-shadow: none;
    }

    .page-home .home-hero__search .vin-entry__controls::after,
    .page-free-check .product-hero__search .search-panel::after,
    .page-pricing .pricing-offer::after,
    .page-public .checked-vehicle-reminder::after {
        display: none;
    }
}

/* Explicit primary actions reuse the capsule. Pending, invalid, unavailable
   and destructive operations retain their own unambiguous state treatment. */
.page-public [data-surface-action]:is(:disabled, [aria-disabled="true"], [aria-busy="true"])::before,
.page-public form:is([data-submitting], [aria-busy="true"], :has([aria-invalid="true"])) [data-surface-action]::before,
.page-public details:has(form[data-submitting]) > [data-surface-action]::before {
    display: none;
    animation: none;
}
.page-public .checked-vehicle-reminder:is([data-dismissing], :has([data-submitting]), :has([data-checked-vehicle-error]:not([hidden])))::after {
    display: none;
}