/**
 * ScholariaPress — "Copy Citation" sidebar card styling.
 * Scoped to .sap-cite-card; safe to load on any page (enqueued only on
 * SAP articles by CitationAssets, but has no effect where the markup
 * doesn't exist).
 *
 * Token sources (measured on staging article 66599, 2026-07-10 — see
 * docs/citation-module.md § 3 for the full audit):
 *   - #1f6994 (accent) and #183c55 (dark) — real site tokens, already in
 *     use sitewide (links, buttons, sidebar column border-left, headings).
 *   - Sidebar heading (h2) styling is NOT duplicated here: the "Citation"
 *     title is a pre-existing Divi text module using the same markup as
 *     "Authors" / "Keywords" / "Tags", untouched by this file.
 *   - Preview background, hint gray, and preview border-radius have no
 *     equivalent token anywhere on the site (no card system exists there —
 *     the sidebar is a single bordered column, not individual cards) —
 *     these are judgment calls, not measured values.
 */

/* Divi's default 10px p margin leaks into #citation-frame's Code module
   wrapper and pushes the card away from the "Citation" heading above it. */
#citation-frame p {
    margin-top: 0px;
    margin-bottom: 0px;
}

.sap-cite-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    font-family: 'Futura Medium', Helvetica, Arial, Lucida, sans-serif;
}

.sap-cite-preview {
    /* No equivalent "light card fill" token exists on the site (judgment
       call, not measured) — kept close to white with a faint tint of the
       site's #1f6994 accent rather than a arbitrary neutral gray. */
    background: #f4f6f7;
    border-radius: 6px;
    padding: 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #514f50;
}

.sap-cite-label-group {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}

.sap-cite-label {
    font-size: 13px;
    font-weight: 700;
    color: #514f50;
}

.sap-cite-hint {
    margin: 0;
    /* No distinct "muted" gray token exists on the site — lightened from
       the body text color (#514f50) as a judgment call, not measured. */
    color: #8a8a8a;
    font-size: 12px;
    line-height: 1.4;
}

.sap-cite-select {
    /* No native way to reposition the browser/OS-drawn select arrow, so the
       arrow is drawn here as a background-image chevron instead — this is
       what makes background-position below an actual, adjustable control
       point (there was none before this rule). */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 10px 6px;
    padding: 0.5em 2.5em 0.5em 1em;
    border: 1px solid #1f6994;
    border-radius: 4px;
    background-color: #1f6994;
    color: #fff;
    font-size: 1em;
    line-height: 1;
    cursor: pointer;
}

.sap-cite-select:hover,
.sap-cite-select:focus-visible {
    background-color: #17516f;
}

.sap-cite-toast {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.5em;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.5em 0.9em;
    background: #183c55;
    color: #fff;
    font-size: 0.8em;
    border-radius: 4px;
    white-space: nowrap;
    animation: sap-cite-toast-fade 2.2s ease forwards;
}

.sap-cite-toast-icon {
    display: inline-flex;
    color: #fff;
}

@keyframes sap-cite-toast-fade {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(6px);
    }
    8% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    85% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-4px);
    }
}