/*
 * Two effects, for two different reasons.
 *
 * The accent bar (::before) is a separate overlay rather than the
 * element's own background/border, because animating those directly
 * would override whatever the element's real background/border is (a
 * card's own tint, a row's white, a table cell's border) for as long
 * as the class is present — and since the animation's resting value is
 * fully transparent, that real styling would visibly vanish and only
 * snap back once the class is removed. A separate absolutely-positioned
 * overlay never touches the element's real styling, so the card
 * underneath stays intact throughout.
 *
 * The scale pop, by contrast, animates transform directly on the real
 * element. That's safe precisely because transform doesn't replace any
 * existing value the way background-color or border would — an element
 * with no transform of its own just gets `scale(1)` at rest, which is
 * visually identical to having none.
 *
 * The bar's inset is negative on purpose: it gives it breathing room
 * around the target regardless of the target's own padding (bare text,
 * a checkbox, a full-width row all get the same generous margin instead
 * of hugging tight against thin content).
 *
 * The bar's z-index is 1, not -1: a negative z-index paints BEFORE
 * normal block-level backgrounds in the same stacking context (CSS
 * painting order), so any plain non-positioned ancestor between the
 * target and the nearest real stacking context — e.g. an accordion
 * panel's own bg-slate-50 — paints its background right over the bar,
 * hiding it completely. Painting above instead avoids depending on what
 * markup happens to sit between the target and the page background.
 *
 * --highlight-duration is set inline by highlight-accent.js so the
 * bar's animation length always matches the timeout that removes the
 * class. The two used to drift (a longer JS timeout than the CSS
 * animation), leaving the class attached for a while after the
 * animation had already finished. Driving both from the same value
 * keeps them impossible to desync. The pop keeps its own fixed, short
 * duration instead — it's a one-off flourish on arrival, not something
 * that should stretch to fill a longer highlight.
 *
 * One caveat: because transform doesn't trigger layout (unlike
 * animating width/height directly), the scale-up briefly overlaps
 * neighboring rows/cards instead of pushing them — by design, so the
 * pop never causes surrounding content to jump. It can also poke past
 * an ancestor with overflow:hidden (e.g. a still-transitioning
 * accordion panel) for the pop's brief duration; call sites that
 * already suspend clipping for the bar's own overflow (see
 * suspendOverflowClipping in allPdfs.html) cover this for free.
 */
.highlight-accent,
.hash-highlight,
.glow-border,
.document-glow {
    position: relative;
    animation: accentPop 2000ms ease-out;
}

.highlight-accent::before,
.hash-highlight::before,
.glow-border::before,
.document-glow::before {
    content: '';
    position: absolute;
    left: -12px;
    top: -8px;
    bottom: -8px;
    width: 3px;
    border-radius: 2px;
    /* primary-dark from the app's own palette (tailwind.config.ts) rather
       than a new hue — every saturated color already in the palette is
       claimed by a status meaning (success, warning, error, ai-act, ...),
       so reusing one of those would misread as that status. Being dark
       rather than a specific hue also means it separates from a light OR
       blue-tinted background on contrast, not on dodging every other color
       in the system. */
    background-color: rgba(4, 26, 47, 0.95);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
    transform-origin: top;
    pointer-events: none;
    z-index: 1;
    animation: accentBarIn var(--highlight-duration, 2000ms) ease-out forwards;
}

/*
 * The 0%-60% hold before fading out is deliberate: an easing curve
 * applied across the full 0%->100% span front-loads nearly all of the
 * fade into the first ~200ms (confirmed by measuring computed opacity
 * mid-flight), making the highlight flash and vanish before anyone
 * can register it. Holding flat first means the easing only shapes
 * the fade itself, not how long it stays visible.
 */
@keyframes accentBarIn {
    0% {
        opacity: 0;
        transform: scaleY(0.3);
    }
    15%,
    60% {
        opacity: 1;
        transform: scaleY(1);
    }
    100% {
        opacity: 0;
        transform: scaleY(1);
    }
}

@keyframes accentPop {
    0% {
        transform: scale(1);
    }
    15%,
    80% {
        transform: scale(1.045);
    }
    100% {
        transform: scale(1);
    }
}