/**
 * @file
 * Citation Card Component
 *
 * A shadow-based box holding a full academic citation, with a single
 * one-click Copy button. The citation text is also natively selectable
 * so ⌘/Ctrl-C on manual selection still works if JS is disabled.
 *
 * The Copy behaviour is wired up by js/citation-copy.js (loaded via the
 * matching library entry). It targets `.citation-card__text` inside the
 * containing `.citation-card` and swaps the button label to "Copied ✓"
 * for ~1.8s on success.
 *
 * USAGE:
 *   <div class="citation-card">
 *     <p class="citation-card__text">Heine, K. (2026) <em>…</em>, Upmarkit. DOI: …</p>
 *     <div class="citation-card__actions">
 *       <span class="citation-card__links">
 *         <a href="…">DOI</a> · <a href="…">Zenodo</a>
 *       </span>
 *       <button type="button" class="citation-card__copy">
 *         <svg …></svg> Copy
 *       </button>
 *     </div>
 *   </div>
 */

.citation-card {
    max-width: 780px;
    margin: 0 auto;
    padding: 1.5rem 1.75rem;
    background: var(--color-surface-base);
    border-radius: var(--radius-lg, 1rem);
    box-shadow: var(--card-shadow-base);
    transition: box-shadow 0.25s ease;
}

.citation-card:hover { box-shadow: var(--card-shadow-hover); }

.citation-card__text {
    margin: 0;
    font-family: var(--font-family-base, inherit);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    user-select: text;
    -webkit-user-select: text;
}

.citation-card__text em {
    font-style: italic;
    color: var(--color-ink);
}

.citation-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.citation-card__links {
    font-family: var(--font-family-base, inherit);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.citation-card__links a {
    color: var(--color-primary-deep);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.citation-card__links a:hover { color: var(--color-primary); }

/* One-click Copy button. Uses --btn-* tokens for size + shape. */
.citation-card__copy {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    min-height: 2.25rem;
    background: var(--color-primary-deep);
    color: #ffffff;
    border: 0;
    border-radius: var(--radius-full, 9999px);
    font-family: var(--font-family-heading, inherit);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: 0 6px 16px
        color-mix(in srgb, var(--color-primary-deep) 30%, transparent);
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.citation-card__copy:hover {
    transform: translateY(-1px);
    background: var(--color-primary);
    box-shadow: 0 8px 20px
        color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.citation-card__copy:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.citation-card__copy svg {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
}

/* Success state — JS toggles this class for ~1.8s */
.citation-card__copy.is-done {
    background: var(--color-success, #16A34A);
    box-shadow: 0 6px 16px
        color-mix(in srgb, var(--color-success, #16A34A) 30%, transparent);
}

@media (max-width: 560px) {
    .citation-card__actions {
        flex-direction: column;
        align-items: flex-start;
    }
}