/**
 * Hash Highlight + Anchor Copy System
 *
 * - .hash-highlight  : pulsing primary-color glow applied to whichever
 *                       container the URL-hash target resolved to. The
 *                       container also gets scroll-margin-top set in JS
 *                       so it clears the sticky header.
 * - .anchor-copy-btn : hover-revealed copy-link button rendered next to
 *                       group headers (in accordion-button) and field
 *                       labels (in the row above each input).
 */

/* -------------------------------------------------------------------------
   Hash highlight glow
   ------------------------------------------------------------------------- */

@keyframes hashGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-primary-500-rgb, 59, 130, 246), 0); }
    25%      { box-shadow: 0 0 14px 5px rgba(var(--color-primary-500-rgb, 59, 130, 246), 0.55); }
    50%      { box-shadow: 0 0 22px 7px rgba(var(--color-primary-500-rgb, 59, 130, 246), 0.32); }
    75%      { box-shadow: 0 0 14px 5px rgba(var(--color-primary-500-rgb, 59, 130, 246), 0.55); }
}

.hash-highlight {
    animation: hashGlow 1.5s ease-in-out 2;
    border-radius: var(--radius-md);
    position: relative;
    z-index: 2;
}

/* -------------------------------------------------------------------------
   Anchor copy button (group header + field row)
   ------------------------------------------------------------------------- */

.anchor-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted, #6c757d);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm, 0.25rem);
    cursor: pointer;
    font-size: 0.72rem;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
    user-select: none;
}
.anchor-copy-btn:hover {
    background: var(--bg-tertiary, rgba(0, 0, 0, 0.08));
    color: var(--color-primary-500, #3b82f6);
    opacity: 1;
}
.anchor-copy-btn:focus-visible {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 2px;
    opacity: 1;
}
.anchor-copy-btn.is-copied,
.anchor-copy-btn.is-copied:hover {
    background: rgba(var(--color-success-500-rgb, 34, 197, 94), 0.15);
    color: var(--color-success-500, #22c55e);
    opacity: 1;
}

/* Reveal on hover/focus of the row that hosts the button. */
.accordion-button:hover .anchor-copy-btn,
.accordion-button:focus-within .anchor-copy-btn,
[data-var-wrapper]:hover .anchor-copy-btn,
[data-var-wrapper]:focus-within .anchor-copy-btn {
    opacity: 0.65;
}

/* Keep keyboard users able to find it without hovering. */
.anchor-copy-btn:focus,
.anchor-copy-btn:focus-visible {
    opacity: 1;
}