/* Click-to-copy buttons for code blocks.
   Injected by /js/code-copy.js into Hugo/Chroma `.highlight` blocks and the
   `.ps-terminal` shortcode. The button is positioned in the top-right corner
   of each block and fades in on hover (always visible on touch devices). */

.highlight,
.ps-terminal {
    position: relative;
}

.code-copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem;
    font-size: 0.75rem;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1;
    color: #e5e7eb;
    background: rgba(31, 41, 55, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.375rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.highlight:hover .code-copy-btn,
.ps-terminal:hover .code-copy-btn,
.code-copy-btn:focus-visible {
    opacity: 1;
}

.code-copy-btn:hover {
    background: rgba(31, 41, 55, 0.95);
}

.code-copy-btn:focus-visible {
    outline: 2px solid #00BCF2;
    outline-offset: 1px;
}

.code-copy-btn.copied {
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.5);
}

/* No hover affordance on touch devices — keep the button visible. */
@media (hover: none) {
    .code-copy-btn {
        opacity: 1;
    }
}