/*
 * Highlight for the object a link points at (js/components/FocusTarget.js).
 * Opt in with id="…" data-focus-target; the script adds .is-focus-target a
 * second after it has scrolled the object into view, and removes it when the
 * animation ends. A ring plus an inset wash, both fading out, so it works on
 * transparent rows (comments) and on filled ones (chat bubbles) alike.
 */
[data-focus-target] {
    scroll-margin: var(--s-space-8, 2rem);
}
[data-focus-target]:focus {
    outline: none; /* focused for screen readers; the highlight is the visual cue */
}
.is-focus-target {
    border-radius: var(--radius-md, 0.5rem);
    animation: s-focus-target 2.6s ease-out;
}
@keyframes s-focus-target {
    0%,
    35% {
        box-shadow:
            0 0 0 4px color-mix(in srgb, var(--brand-primary) 45%, transparent),
            inset 0 0 0 100vmax color-mix(in srgb, var(--brand-primary) 12%, transparent);
    }
    100% {
        box-shadow:
            0 0 0 4px transparent,
            inset 0 0 0 100vmax transparent;
    }
}