/* Support is a sibling of the reading surface, never a column inside it.
 * Keep the centered 78rem publication shell; use spare outer space only when
 * it can hold a useful rail. The narrow-screen fallback follows all reading.
 */
body.rv-publication .rv-reading-layout > .gh-main-content {
    min-inline-size: 0;
}

body.rv-publication .rv-outer-support {
    display: block;
    grid-area: auto;
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: none;
    margin: 0;
    padding: var(--rv-section-gap) var(--rv-gutter);
    border-block-start: 1px solid var(--rv-line);
    background: var(--rv-frame);
    color: var(--rv-ink);
}

body.rv-publication .rv-outer-support-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    align-items: start;
    gap: var(--rv-card-gap);
    max-inline-size: calc(var(--rv-page-width) - 2 * var(--rv-gutter));
    margin-inline: auto;
}

body.rv-publication .rv-outer-support-inner > * {
    min-inline-size: 0;
}

body.rv-publication .rv-outer-support .gh-article-right-sidebar {
    display: grid;
    gap: var(--rv-card-gap);
    inline-size: 100%;
    max-inline-size: none;
    margin: 0;
}

body.rv-publication .rv-outer-support :is(.rv-topic-support-card, .gh-sidebar-box, .gh-post-recommendations) {
    margin: 0;
    padding: var(--rv-panel-padding);
    border: 1px solid var(--rv-line);
    border-radius: var(--rv-radius);
    background: var(--rv-surface);
    box-shadow: none;
}

body.rv-publication .rv-outer-support :is(.gh-sidebar-ad, .rv-ad-slot) {
    max-inline-size: none;
    margin: 0;
}

body.rv-publication .rv-outer-support a {
    color: var(--rv-primary);
}

body.rv-publication .rv-outer-support .rv-topic-button {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    border-radius: .5rem;
    background: var(--rv-primary);
    color: var(--rv-on-primary);
    font-weight: 600;
    text-decoration: none;
}

body.rv-publication .rv-outer-support .rv-topic-button:hover {
    background: var(--rv-primary-hover);
}

body.rv-publication .rv-outer-support :is(a, button):focus-visible {
    outline: 2px solid var(--rv-primary);
    outline-offset: 4px;
}

/* Short, truthful support content in both the outer rail and footer grid. */
body.rv-publication .rv-outer-support .rv-support-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-inline-size: 0;
    text-align: start;
    overflow-wrap: anywhere;
}

body.rv-publication .rv-support-card :is(h2, p, ul) { margin: 0; }
body.rv-publication .rv-support-card .rv-support-eyebrow {
    margin-block-end: .5rem;
    color: var(--rv-primary);
    font-size: .75rem;
    font-weight: 650;
    line-height: 1.5;
    letter-spacing: .04em;
}
body.rv-publication .rv-support-card .rv-support-title {
    color: var(--rv-ink);
    font-size: var(--rv-text-card, 1.25rem);
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: -.015em;
}
body.rv-publication .rv-support-card :is(.rv-support-description, .rv-support-note, .rv-support-path-description) {
    color: var(--rv-muted);
    font-size: .875rem;
    line-height: 1.6;
}
.rv-support-footer { display: flex; flex-direction: column; gap: .75rem; }
body.rv-publication .rv-outer-support .rv-support-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-block-size: 2.75rem;
    padding: .625rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--rv-radius, .5rem);
    background: var(--rv-primary);
    color: var(--rv-on-primary);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    white-space: normal;
}
body.rv-publication .rv-outer-support .rv-support-action:hover { background: var(--rv-primary-hover); }
body.rv-publication .rv-support-card .rv-support-paths { padding: 0; list-style: none; }
body.rv-publication .rv-support-paths > li { margin: 0; border-block-start: 1px solid var(--rv-line); }
body.rv-publication .rv-support-paths a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .25rem .75rem;
    min-block-size: 2.75rem;
    padding-block: .875rem;
    text-decoration: none;
}
.rv-support-path-title { font-size: .875rem; font-weight: 650; line-height: 1.5; }
.rv-support-path-description { grid-column: 1; }
.rv-support-path-arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.rv-support-paths a:hover .rv-support-path-title { text-decoration: underline; text-underline-offset: .2em; }
.rv-support-paths > li:last-child a { padding-block-end: 0; }
.rv-support-zh { display: none; }
html[data-article-locale="cn"] .rv-support-en,
html:not([data-article-locale])[lang^="zh"] .rv-support-en { display: none; }
html[data-article-locale="cn"] .rv-support-zh,
html:not([data-article-locale])[lang^="zh"] .rv-support-zh { display: inline; }
@media (forced-colors: active) {
    body.rv-publication .rv-outer-support .rv-support-action { border-color: ButtonText; }
}

/* The former inner article/tag sidebars no longer reserve reading space. */
body.rv-publication .rv-reading-layout :is(.rv-sponsored-layout, .rv-topic-layout) {
    display: block;
}

body.rv-publication .rv-reading-layout .gh-main-post:not(:has(.gh-article-right-sidebar)) {
    grid-template-columns: minmax(0, 1fr);
}

body.rv-publication .rv-topic-layout .rv-topic-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

@media (min-width: 112rem) {
    body.rv-publication .rv-reading-layout:has(> .rv-outer-support) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--rv-page-width)) minmax(0, 1fr);
        grid-template-areas: ". reading support";
        align-items: start;
    }

    body.rv-publication .rv-reading-layout:has(> .rv-outer-support) > .gh-main-content {
        grid-area: reading;
    }

    body.rv-publication .rv-reading-layout > .rv-outer-support {
        grid-area: support;
        inline-size: min(100%, 21.75rem);
        border-block-start: 0;
    }

    body.rv-publication .rv-outer-support-inner {
        grid-template-columns: minmax(0, 1fr);
    }
}