/*
 * X4A LONGFORM SINGULAR
 *
 * X4A DEPENDENCY CONTRACT:
 *
 * Used by x4a_article and x4a_research singular pages.
 * Base X4A controls/chart styles come from ui.css/feed.css.
 */

:root[data-x4a-theme="dark"] {
    --x4a-long-bg: #081019;
    --x4a-long-surface: #0f1822;
    --x4a-long-surface-2: #131f2b;
    --x4a-long-text: #e8eef5;
    --x4a-long-muted: #91a0ae;
    --x4a-long-border: #263443;
    --x4a-long-accent: #72b7ff;
    --x4a-long-accent-soft: rgba(114, 183, 255, 0.12);
}

:root[data-x4a-theme="light"] {
    --x4a-long-bg: #f5f7fa;
    --x4a-long-surface: #ffffff;
    --x4a-long-surface-2: #f8fafc;
    --x4a-long-text: #15202b;
    --x4a-long-muted: #596875;
    --x4a-long-border: #d8e0e7;
    --x4a-long-accent: #0866c6;
    --x4a-long-accent-soft: rgba(8, 102, 198, 0.08);
}

.x4a-longform-single-shell {
    min-height: 70vh;

    padding:
        28px
        20px
        68px;

    background:
        var(--x4a-long-bg);

    color:
        var(--x4a-long-text);
}

.x4a-longform-single-inner {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.x4a-longform-single-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 18px;
}

.x4a-longform-back {
    color:
        var(--x4a-long-muted);

    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.x4a-longform-back:hover {
    color:
        var(--x4a-long-accent);
}

.x4a-longform-single {
    overflow: hidden;

    border:
        1px solid
        var(--x4a-long-border);

    border-radius: 22px;

    background:
        var(--x4a-long-surface);

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.08);
}

.x4a-longform-single-header {
    padding:
        clamp(
            30px,
            6vw,
            68px
        );
}

.x4a-longform-kicker,
.x4a-longform-section-kicker {
    color:
        var(--x4a-long-accent);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.11em;
}

.x4a-longform-single-title {
    max-width: 1030px;

    margin:
        13px
        0
        0;

    color:
        var(--x4a-long-text);

    font-size:
        clamp(
            34px,
            5vw,
            62px
        );

    line-height: 1.04;
    letter-spacing: -0.038em;
}

.x4a-longform-single-byline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 22px;

    color:
        var(--x4a-long-muted);

    font-size: 13px;
}

.x4a-longform-single-tickers {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-top: 22px;
}

.x4a-longform-single-ticker {
    display: inline-flex;
    align-items: center;

    min-height: 34px;

    padding:
        6px
        12px;

    border:
        1px solid
        var(--x4a-long-border);

    border-radius: 999px;

    background:
        var(--x4a-long-accent-soft);

    color:
        var(--x4a-long-accent);

    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.x4a-longform-hero {
    margin: 0;

    border-top:
        1px solid
        var(--x4a-long-border);

    border-bottom:
        1px solid
        var(--x4a-long-border);

    background:
        var(--x4a-long-surface-2);
}

.x4a-longform-hero img {
    display: block;

    width: 100%;
    max-width: 100%;
    max-height: 720px;

    margin: 0 auto;

    object-fit: contain;
}

.x4a-longform-content {
    width:
        min(
            860px,
            calc(100% - 56px)
        );

    margin: 0 auto;

    padding:
        clamp(
            38px,
            6vw,
            72px
        )
        0;

    color:
        var(--x4a-long-text);

    font-size:
        clamp(
            17px,
            1.7vw,
            20px
        );

    line-height: 1.78;
}

.x4a-longform-content > :first-child {
    margin-top: 0;
}

.x4a-longform-content > :last-child {
    margin-bottom: 0;
}

.x4a-longform-content p {
    margin:
        0
        0
        1.35em;
}

.x4a-longform-content h2 {
    margin:
        2.1em
        0
        0.7em;

    font-size:
        clamp(
            25px,
            3vw,
            34px
        );

    line-height: 1.18;
}

.x4a-longform-content h3 {
    margin:
        1.8em
        0
        0.65em;

    font-size:
        clamp(
            21px,
            2.5vw,
            27px
        );

    line-height: 1.22;
}

.x4a-longform-content a {
    color:
        var(--x4a-long-accent);

    text-underline-offset: 3px;
}

.x4a-longform-content blockquote {
    margin:
        1.7em
        0;

    padding:
        0.3em
        0
        0.3em
        1.25em;

    border-left:
        3px solid
        var(--x4a-long-accent);

    color:
        var(--x4a-long-muted);
}

.x4a-longform-content ul,
.x4a-longform-content ol {
    padding-left: 1.5em;
}

.x4a-longform-content figure,
.x4a-longform-content img {
    max-width: 100%;
    height: auto;
}

.x4a-longform-content figcaption {
    color:
        var(--x4a-long-muted);

    font-size: 12px;
}

.x4a-longform-content table {
    display: block;

    max-width: 100%;

    overflow-x: auto;

    border-collapse: collapse;
}

.x4a-longform-content pre {
    max-width: 100%;

    overflow-x: auto;

    padding: 16px;

    border-radius: 12px;

    background:
        var(--x4a-long-surface-2);
}

.x4a-longform-section {
    padding:
        38px
        clamp(
            28px,
            5vw,
            58px
        );

    border-top:
        1px solid
        var(--x4a-long-border);
}

.x4a-longform-section-heading {
    margin-bottom: 20px;
}

.x4a-longform-section-heading h2 {
    margin:
        8px
        0
        0;

    color:
        var(--x4a-long-text);

    font-size:
        clamp(
            22px,
            3vw,
            30px
        );
}

.x4a-longform-chart {
    margin: 0;
}

.x4a-longform-chart-heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 12px;
}

.x4a-longform-chart-heading strong {
    font-size: 17px;
}

.x4a-longform-market-note {
    margin:
        12px
        0
        0;

    color:
        var(--x4a-long-muted);

    font-size: 12px;
}

.x4a-longform-share-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.x4a-longform-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding:
        10px
        16px;

    border:
        1px solid
        var(--x4a-long-border);

    border-radius: 11px;

    background:
        var(--x4a-long-surface-2);

    color:
        var(--x4a-long-text);

    font: inherit;
    font-size: 14px;
    font-weight: 800;

    cursor: pointer;
}

.x4a-longform-copy:hover {
    border-color:
        var(--x4a-long-accent);

    color:
        var(--x4a-long-accent);
}

.x4a-longform-copy-status {
    color:
        var(--x4a-long-muted);

    font-size: 13px;
}

@media (max-width: 720px) {

    .x4a-longform-single-shell {
        padding:
            14px
            10px
            44px;
    }

    .x4a-longform-single {
        border-radius: 16px;
    }

    .x4a-longform-single-header {
        padding:
            28px
            20px;
    }

    .x4a-longform-content {
        width:
            calc(
                100% - 40px
            );

        padding:
            34px
            0;
    }

    .x4a-longform-section {
        padding:
            30px
            20px;
    }
}


/* ==========================================================
 * X4A LONGFORM RETURN BUTTON 0.15.4
 * ========================================================== */

.x4a-longform-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    padding: 8px 14px;

    border:
        1px solid
        var(--x4a-long-border);

    border-radius: 999px;

    background:
        var(--x4a-long-surface);

    color:
        var(--x4a-long-text);

    font-size: 14px;
    font-weight: 800;

    text-decoration: none;

    transition:
        border-color 140ms ease,
        background 140ms ease,
        color 140ms ease;
}


.x4a-longform-back:hover,
.x4a-longform-back:focus-visible {
    border-color:
        var(--x4a-long-accent);

    background:
        var(--x4a-long-accent-soft);

    color:
        var(--x4a-long-accent);
}


.x4a-longform-back:focus-visible {
    outline:
        2px solid
        var(--x4a-long-accent);

    outline-offset:
        3px;
}