@layer components {
    /* Transient flash on the record the user just created, applied by
       highlight_controller once it has scrolled the row into view. Same idea
       as .exec-row--resume-target in routes.css: loud for ~1.5s, then gone.

       The keyframes deliberately omit a 100% frame. CSS synthesises the
       implicit end from the element's own computed style, so a row that
       carries a status tint (.datasheet tr[data-state]) fades back to that
       tint instead of being animated to a hardcoded transparent. */
    .just-created {
        animation: just-created-flash 2.4s ease-out;
    }

    @keyframes just-created-flash {
        0%,
        60% {
            background-color: var(--color-highlight);
        }
    }

    /* Reduced motion: keep the affordance, drop the animation. The controller
       still removes the class after its timeout, so the highlight clears. */
    @media (prefers-reduced-motion: reduce) {
        .just-created {
            animation: none;
            background-color: var(--color-highlight);
        }
    }
}