/* ===========================================================================
   Bukids resource articles (2.0.226)
   Every resource post (animation, film, series, documentary, channel,
   textbook, course, picture book): one stylesheet, loaded after polish.css,
   cached by the browser. Replaces article-page.css, video-article.css and
   resource-article.css (2.0.162 – 2.0.223), which had grown into layers that
   overrode each other.

   Page:   title → [episodes] → series switcher → introduction → download
           → feedback → related → notes
   Cards:  white, 1px line, 8px corners, a 46px title row with a hairline,
           16px inner edge (14px on phones). Only the current item is tinted.
   Native B2 / Vue nodes (player, episode rows, download box) keep their
   events and permission checks; this file only lays them out.
   =========================================================================== */

body.bk-resource-article {
    --rs-ink: var(--bk-ui-ink, #1d2433);
    --rs-text: var(--bk-ui-text, #475467);
    --rs-muted: var(--bk-ui-muted, #667085);
    --rs-faint: var(--bk-ui-faint, #98a2b3);
    --rs-line: var(--bk-ui-line, #e6e9ef);
    --rs-line-strong: var(--bk-ui-line-strong, #d0d5dd);
    --rs-hair: #f0f2f5;
    --rs-brand: var(--bk-ui-brand, var(--b2color, #fd4c4c));
    --rs-brand-soft: var(--bk-ui-brand-soft, #fff1f1);
    --rs-r-sm: var(--bk-ui-r-sm, 6px);
    --rs-r-md: var(--bk-ui-r-md, 8px);
    --rs-pad: 16px;
    --rs-gap: 20px;
    --rs-row: 46px;
    --rs-control: 44px;
}
@media (max-width: 768px) {
    body.bk-resource-article { --rs-pad: 14px; --rs-gap: 16px; }
}

/* 1. Title area ------------------------------------------------------------ */
body.bk-resource-article .entry-header .post-user-info { display: none !important; }
body.bk-resource-article .single-article .entry-header { margin-bottom: 0; padding-bottom: 0; }
body.bk-resource-article .single-article .entry-header .post-meta-row { align-items: center; margin-bottom: var(--rs-gap); }
/* 2.0.225: video posts keep the title outside the article; on phones B2 adds
   12px padding + 12px margin + the meta row's 16px under the chips. */
@media (max-width: 1180px) {
    body.bk-resource-article.post-style-5 .entry-header { margin-bottom: 0; padding-bottom: 12px; }
    body.bk-resource-article.post-style-5 .entry-header .post-meta-row { margin-bottom: 0; }
}
body.bk-resource-article:not(.post-style-5) .single-article > .entry-content { padding-top: 0; }
/* Category chip and "前往下载" share one height (36px) and corner. */
body.bk-resource-article .entry-header .post-list-cat { display: flex; flex-wrap: wrap; gap: 6px; }
body.bk-resource-article .post-list-cat .post-list-cat-item,
body.bk-resource-article .entry-header .post-meta .post-list-cat a {
    display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--rs-r-sm);
    font-size: 13px; line-height: 1;
}
body.bk-resource-article .single-button-download button {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    box-sizing: border-box; height: 32px; min-height: 0; margin: 0; padding: 0 12px;
    border: 1px solid var(--rs-line-strong); border-radius: var(--rs-r-sm); background: #fff; color: var(--rs-text);
    font: inherit; font-size: 13px; line-height: 1; box-shadow: none;
}
body.bk-resource-article .single-button-download button::after { content: ""; position: absolute; inset: -6px 0; } /* 44px tap area */
body.bk-resource-article .single-button-download button:hover { border-color: var(--rs-brand); color: var(--rs-brand); }

/* Video posts: B2's style-5 article box has its own padding; the cards set
   the edges instead (12px from the screen on phones, like the player). */
body.bk-video-resource .single-article { padding: 0; }
body.bk-video-resource .single-article > .entry-content { padding: 0; }
@media (max-width: 1180px) {
    body.bk-video-resource .single-article > .entry-content { padding: 0 12px; }
    body.bk-video-resource .single-article > .bk-res { margin-left: 12px; margin-right: 12px; }
}

/* 2. Card base --------------------------------------------------------------- */
body.bk-resource-article .bk-res,
body.bk-resource-article .single-article .entry-content > .bk-video-intro,
body.bk-resource-article .single-article .bk-resource-overview,
body.bk-ep-v2.bk-resource-article #post-5-list {
    box-sizing: border-box; margin: 0 0 var(--rs-gap); background: #fff; color: var(--rs-ink);
    border: 1px solid var(--rs-line); border-radius: var(--rs-r-md); box-shadow: none;
}
/* Title rows: "教材介绍", "教材下载", the topic name. */
body.bk-resource-article .single-article .bk-video-intro-title,
body.bk-resource-article .single-article .bk-download-heading,
body.bk-resource-article .bk-res-head {
    box-sizing: border-box; min-height: var(--rs-row); margin: 0; padding: 11px var(--rs-pad);
    border: 0; border-bottom: 1px solid var(--rs-line); border-radius: 0; background: #fff;
    color: var(--rs-ink); font: inherit; font-size: 15px; font-weight: 500; line-height: 24px;
}
body.bk-resource-article .single-article :is(.bk-video-intro-title, .bk-download-heading)::before { content: none; }

/* 3. Series switcher (.bk-res) ---------------------------------------------- */
body.bk-resource-article .bk-res { font-size: 14px; line-height: 1.5; }
body.bk-resource-article .bk-res * { box-sizing: border-box; }
body.bk-resource-article .bk-res-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 0; }
body.bk-resource-article .bk-res-name { min-width: 0; overflow: hidden; font-size: 15px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
body.bk-resource-article .bk-res-topic {
    display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: var(--rs-control);
    color: var(--rs-muted); font-size: 13px; line-height: 1; white-space: nowrap; text-decoration: none;
}
body.bk-resource-article .bk-res-topic::after,
body.bk-resource-article a.bk-res-tab .bk-res-tab-note::after {
    content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg);
}
body.bk-resource-article .bk-res-topic:hover { color: var(--rs-brand); }
body.bk-resource-article :is(.bk-res-switch, .bk-res-tabs) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px var(--rs-pad);
}
body.bk-resource-article .bk-res-switch[data-columns="1"] { grid-template-columns: minmax(0, 1fr); }
body.bk-resource-article .bk-res-tabs[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.bk-resource-article .bk-res-levels { grid-template-columns: repeat(var(--bk-res-cols, 4), minmax(0, 1fr)); }
body.bk-resource-article .bk-res-levels:is([data-columns="7"], [data-columns="8"]) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.bk-resource-article .bk-res-field {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; min-width: 0; height: var(--rs-control);
    margin: 0; overflow: hidden; background: #fff; border: 1px solid var(--rs-line-strong); border-radius: var(--rs-r-sm);
}
body.bk-resource-article .bk-res-field:focus-within { border-color: var(--rs-brand); }
body.bk-resource-article .bk-res-field-label {
    display: flex; align-items: center; justify-content: center; min-width: 64px; padding: 0 12px;
    color: var(--rs-muted); font-size: 13px; line-height: 1; white-space: nowrap; border-right: 1px solid var(--rs-line);
}
body.bk-resource-article .bk-res-field.is-current { border-color: var(--rs-brand); }
body.bk-resource-article .bk-res-field.is-current .bk-res-field-label { color: var(--rs-brand); background: var(--rs-brand-soft); border-right-color: rgba(253, 76, 76, .25); }
body.bk-resource-article .bk-res .bk-res-select {
    -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; height: 100%; margin: 0;
    padding: 0 32px 0 12px; overflow: hidden; color: var(--rs-ink); font: inherit; font-size: 14px;
    line-height: calc(var(--rs-control) - 2px); white-space: nowrap; text-overflow: ellipsis;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 12px;
    border: 0; border-radius: 0; outline: 0; box-shadow: none; cursor: pointer;
}
body.bk-resource-article .bk-res .bk-res-select:has(option[value=""]:checked) { color: var(--rs-muted); }
body.bk-resource-article .bk-res .bk-res-tab {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; height: var(--rs-control);
    padding: 0 14px; color: var(--rs-ink); font-size: 14px; line-height: 1; text-decoration: none;
    background: #fff; border: 1px solid var(--rs-line-strong); border-radius: var(--rs-r-sm);
}
body.bk-resource-article .bk-res .bk-res-levels .bk-res-tab { justify-content: center; padding: 0 8px; }
body.bk-resource-article .bk-res-tab-name { overflow: hidden; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
body.bk-resource-article .bk-res-tab-note { display: inline-flex; align-items: center; gap: 5px; color: var(--rs-muted); font-size: 12px; white-space: nowrap; }
body.bk-resource-article .bk-res a.bk-res-tab:hover { color: var(--rs-brand); border-color: var(--rs-brand); }
body.bk-resource-article .bk-res .bk-res-tab.is-current { color: var(--rs-brand); background: var(--rs-brand-soft); border-color: var(--rs-brand); }
body.bk-resource-article .bk-res .bk-res-tab.is-current .bk-res-tab-note { color: var(--rs-brand); }

/* 4. Introduction ---------------------------------------------------------- */
body.bk-resource-article .single-article .bk-video-intro { position: relative; min-width: 0; padding: 0 0 var(--rs-pad); overflow: hidden; scroll-margin-top: 140px; }
body.bk-resource-article .single-article .bk-video-intro-title { padding-right: 112px; }
body.bk-resource-article .bk-video-intro-panel,
body.bk-resource-article .bk-video-intro-details { min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; }
body.bk-resource-article .bk-video-summary {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
    margin: 14px var(--rs-pad) 0; padding: 0; color: var(--rs-text); font: inherit; font-size: 15px; line-height: 1.8;
    text-align: left; word-break: normal; overflow-wrap: anywhere;
}
body.bk-resource-article .bk-video-intro-panel:has(> .bk-video-intro-details[open]) > .bk-video-summary { display: none; }
/* "显示全部 / 收起介绍" sits in the title row. */
body.bk-resource-article .bk-video-intro-toggle {
    position: absolute; top: 1px; right: var(--rs-pad); display: flex; align-items: center; gap: 6px;
    min-height: var(--rs-control); margin: 0; padding: 0; border: 0; background: transparent;
    color: var(--rs-muted); font: inherit; font-size: 13px; line-height: 1.4; list-style: none; cursor: pointer;
}
body.bk-resource-article .bk-video-intro-toggle::-webkit-details-marker { display: none; }
body.bk-resource-article :is(.bk-video-intro-toggle, .bk-rights-toggle, .bk-file-toggle)::after {
    content: ""; flex: 0 0 8px; width: 8px; height: 5px; background: currentColor;
    clip-path: polygon(0 0, 50% 70%, 100% 0, 100% 30%, 50% 100%, 0 30%);
}
body.bk-resource-article .bk-video-intro-details[open] > .bk-video-intro-toggle::after,
body.bk-resource-article [aria-expanded="true"]:is(.bk-file-toggle, .bk-rights-toggle)::after { transform: rotate(180deg); }
body.bk-resource-article .bk-video-intro-toggle .bk-intro-open-label,
body.bk-resource-article .bk-video-intro-details[open] > .bk-video-intro-toggle .bk-intro-closed-label { display: none; }
body.bk-resource-article .bk-video-intro-details[open] > .bk-video-intro-toggle .bk-intro-open-label { display: inline; }
body.bk-resource-article :is(.bk-video-intro-toggle, .bk-rights-toggle, .bk-file-toggle, .bk-intro-collapse):hover { color: var(--rs-brand); }
body.bk-resource-article .bk-video-intro-full.entry-content { min-width: 0; max-width: 100%; margin: 14px 0 0; padding: 0 var(--rs-pad); }
body.bk-resource-article .bk-video-intro-full > :first-child { margin-top: 0; }
body.bk-resource-article .bk-video-intro-full > :last-child { margin-bottom: 0; }
body.bk-resource-article .bk-video-intro-full > :is(.eb-card, .content-excerpt),
body.bk-resource-article .single-article > .entry-content:has(.bk-video-intro) > :is(.eb-card:has(.eb-excerpt), .content-excerpt) { display: none; }
body.bk-resource-article .bk-video-intro-full :is(table, figure, img) { max-width: 100%; }
/* The full text's own first "…介绍" heading repeats the card title (hidden by article-tools.js). */
body.bk-resource-article .bk-video-intro-full > .bk-intro-dup { display: none; }
/* "收起介绍" again at the end of a long text. */
body.bk-resource-article .bk-intro-collapse {
    display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: var(--rs-control);
    margin: 16px 0 0; padding: 0; border: 0; border-top: 1px solid var(--rs-hair); border-radius: 0; background: transparent;
    color: var(--rs-muted); font: inherit; font-size: 13px; cursor: pointer;
}
body.bk-resource-article .bk-intro-collapse::after {
    content: ""; width: 8px; height: 5px; background: currentColor; transform: rotate(180deg);
    clip-path: polygon(0 0, 50% 70%, 100% 0, 100% 30%, 50% 100%, 0 30%);
}

/* Cover + introduction (textbooks, picture books): one card, cover left. */
body.bk-resource-article .single-article .bk-resource-overview {
    position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: var(--rs-row) auto auto;
    column-gap: var(--rs-pad); row-gap: 0; align-items: start; padding: 0 0 var(--rs-pad); overflow: hidden;
}
body.bk-resource-article .bk-resource-overview :is(.bk-video-intro, .bk-video-intro-panel) { display: contents; }
body.bk-resource-article .single-article .bk-resource-overview .bk-video-intro-title { grid-column: 1 / -1; grid-row: 1; }
body.bk-resource-article .bk-resource-cover { grid-column: 1; grid-row: 2; min-width: 0; margin: 14px 0 0 var(--rs-pad); }
body.bk-resource-article .bk-resource-cover > :is(figure, p) { margin: 0; padding: 0; }
body.bk-resource-article .bk-resource-cover img {
    display: block; width: 100%; height: auto; max-height: 176px; aspect-ratio: 3 / 4; object-fit: contain; margin: 0;
    border: 0; border-radius: var(--rs-r-sm);
}
body.bk-resource-article .bk-resource-overview .bk-video-summary {
    grid-column: 2; grid-row: 2; align-self: start; margin: 14px var(--rs-pad) 0 0; -webkit-line-clamp: 5;
}
/* The cover stays; the summary stays beside it while the full text opens below. */
body.bk-resource-article .bk-resource-overview .bk-video-intro-panel:has(> .bk-video-intro-details[open]) > .bk-video-summary { display: -webkit-box; }
body.bk-resource-article .bk-resource-overview .bk-video-intro-details { grid-column: 1 / -1; grid-row: 3; }
body.bk-resource-article .bk-resource-overview .bk-video-intro-full { margin-top: var(--rs-pad); padding-top: var(--rs-pad); border-top: 1px solid var(--rs-hair); }

/* 5. Episodes (video posts) -------------------------------------------------
   Computers: B2's rail beside the player. Phones / tablets: B2's strip under
   the player. B2's tab list (#post-5-list) is not used. */
/* Permanent layout uses the server-rendered class: never wait for JS to hide
   the old tabs. Keep their Vue roots, the real episode rail and comments. */
body.bk-video-resource .post-video-table,
body.bk-video-resource #post-5-list { display: none !important; }
body.bk-video-resource .comments-box { display: block; }
body.bk-ep-v2 .post-video-list .post-video-list-link { box-shadow: none; }
body.bk-ep-v2 .post-video-list .video-list-title span { font-weight: 400; text-shadow: none; }
body.bk-ep-v2 .post-video-list li[hidden] { display: none !important; }
body.bk-ep-v2 .post-video-list .video-list-play-icon { position: static; inset: auto; flex: 0 0 16px; width: 16px; margin: 0; padding: 0; }
@media (min-width: 1181px) {
    body.bk-ep-v2 .post-video-list { display: flex; flex-direction: column; height: var(--bk-player-block-height, auto) !important; }
    body.bk-ep-v2 .post-video-list > ul { flex: 1 1 auto; min-height: 0; height: auto !important; }
    body.bk-ep-v2 .post-video-list > :is(.post-video-list-title, .bk-rail-find) { flex: 0 0 auto; }
    body.bk-ep-v2 .post-video-list :is(.bk-strip-head, .bk-strip-segs) { display: none !important; }
    body.bk-ep-v2 .post-video-list .post-video-list-title { font-size: 16px; font-weight: 400; }
    body.bk-ep-v2 .post-video-list .post-video-list-link { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px; border: 0; }
    body.bk-ep-v2 .post-video-list .post-video-list-link > div:last-child { flex: 1; min-width: 0; padding: 0; }
    body.bk-ep-v2 .post-video-list .video-list-title span { font-size: 14px; line-height: 1.5; }
    body.bk-ep-v2 .post-video-list .bk-rail-find {
        display: block; box-sizing: border-box; width: calc(100% - 20px) !important; height: 36px !important; min-height: 36px;
        margin: 0 10px 8px !important; padding: 0 10px !important; border: 1px solid rgba(255, 255, 255, .16); border-radius: 4px;
        background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-size: 13px; -webkit-appearance: none; appearance: none;
    }
    body.bk-ep-v2 .post-video-list .bk-rail-find::placeholder { color: rgba(255, 255, 255, .5); }
    body.bk-ep-v2 .post-video-list .bk-rail-find:focus { outline: 0; border-color: var(--rs-brand); }
    body.bk-ep-v2 .post-video-list .bk-rail-find[hidden] { display: none !important; }
}
@media (max-width: 1180px) {
    /* B2's strip, refined: a header, range buttons for long lists, flat chips. */
    body.bk-ep-v2 .post-style-5-top .post-video-list {
        display: block; width: auto !important; height: auto !important; max-height: none !important;
        margin: 0 !important; padding: 10px 0 12px !important; background: #fff; border-bottom: 1px solid var(--rs-line);
    }
    body.bk-ep-v2 .post-video-list :is(.post-video-list-title, .bk-rail-find) { display: none !important; }
    /* One row: "选集  共 52 集 ……… [1–30] [31–52]". */
    body.bk-ep-v2 .bk-strip-head { display: flex; align-items: center; gap: 8px; min-height: 22px; padding: 0 12px 10px; }
    body.bk-ep-v2 .bk-strip-title { flex: 0 0 auto; margin: 0; padding: 0; border: 0; font: inherit; font-size: 15px; font-weight: 500; line-height: 22px; color: var(--rs-ink); }
    body.bk-ep-v2 .bk-strip-title::before { content: none; }
    body.bk-ep-v2 .bk-strip-meta { flex: 0 0 auto; min-width: 0; color: var(--rs-muted); font-size: 13px; line-height: 22px; white-space: nowrap; }
    body.bk-ep-v2 .bk-strip-segs { display: flex; flex: 0 1 auto; gap: 6px; min-width: 0; margin: 0 0 0 auto; padding: 4px 4px 4px 0; overflow-x: auto; scrollbar-width: none; }
    body.bk-ep-v2 .bk-strip-segs::-webkit-scrollbar { display: none; }
    body.bk-ep-v2 .bk-strip-segs[hidden] { display: none; }
    body.bk-ep-v2 .bk-strip-segs button {
        position: relative; flex: 0 0 auto; min-width: 44px; height: 44px; margin: 0; padding: 0 10px; border: 1px solid var(--rs-line); border-radius: var(--rs-r-sm);
        background: #fff; color: var(--rs-text); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; line-height: 1; box-shadow: none; cursor: pointer;
    }
    body.bk-ep-v2 .bk-strip-segs button.is-on { border-color: var(--rs-brand); background: #fff5f5; color: var(--rs-brand); }
    /* The range that holds the playing episode. */
    body.bk-ep-v2 .bk-strip-segs button.has-play::after {
        content: ""; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border: 1.5px solid #fff; border-radius: 50%; background: var(--rs-brand);
    }
    body.bk-ep-v2 .post-style-5-top .post-video-list > ul {
        display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px; width: auto !important; height: auto !important; max-height: none !important;
        margin: 0; padding: 0 12px; overflow-x: auto; overflow-y: hidden; scroll-padding: 0 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    body.bk-ep-v2 .post-style-5-top .post-video-list > ul::-webkit-scrollbar { display: none; }
    body.bk-ep-v2 .post-style-5-top .post-video-list > ul > li { flex: 0 0 148px; width: 148px !important; min-width: 0; max-width: none; margin: 0 !important; padding: 0 !important; float: none; }
    body.bk-ep-v2 .post-style-5-top .post-video-list .post-video-list-link {
        display: flex; align-items: flex-start; gap: 8px; box-sizing: border-box; width: 100%; height: 100%; min-height: 64px; margin: 0;
        padding: 10px 12px; border: 1px solid var(--rs-line); border-radius: var(--rs-r-sm); background: #fff; color: var(--rs-ink);
    }
    body.bk-ep-v2 .post-style-5-top .post-video-list .video-list-play-icon { margin-top: 2px; color: var(--rs-faint); }
    body.bk-ep-v2 .post-style-5-top .post-video-list .post-video-list-link > div:last-child { flex: 1 1 0; min-width: 0; padding: 0; }
    body.bk-ep-v2 .post-style-5-top .post-video-list .video-list-title { display: block; height: auto; padding: 0; overflow: visible; text-align: left; }
    body.bk-ep-v2 .post-style-5-top .post-video-list .video-list-title span {
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: auto; max-height: none;
        white-space: normal; color: inherit; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; word-break: normal;
    }
    body.bk-ep-v2 .post-style-5-top .post-video-list li.picked .post-video-list-link { border-color: var(--rs-brand); background: #fff5f5; color: var(--rs-brand); }
    body.bk-ep-v2 .post-style-5-top .post-video-list li.picked .video-list-play-icon { color: var(--rs-brand); }
    /* A two-part resource has no reason to hide its distinguishing titles. */
    body.bk-ep-v2.bk-ep-pair .post-style-5-top .post-video-list > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.bk-ep-v2.bk-ep-pair .post-style-5-top .post-video-list > ul > li { width: auto !important; }
    body.bk-ep-v2.bk-ep-pair .post-style-5-top .post-video-list .video-list-title span { display: block; -webkit-line-clamp: unset; overflow: visible; }
}
@media (max-width: 600px) {
    body.bk-ep-v2 .bk-strip-head { flex-wrap: wrap; }
    body.bk-ep-v2 .bk-strip-segs { flex: 1 0 100%; width: 100%; max-width: 100%; margin: 0; }
}
@media (max-width: 359px) {
    body.bk-ep-v2.bk-ep-pair .post-style-5-top .post-video-list > ul { grid-template-columns: minmax(0, 1fr); }
}
/* These must follow both rail layouts. Native B2's inline display:none for
   empty/single results is respected too; zero pending rows are not a film. */
body.bk-video-resource.bk-ep-single .post-style-5-top .post-video-list { display: none !important; }
body.bk-ep-v2 .bk-strip-segs button:focus-visible,
body.bk-ep-v2 .post-video-list li:focus-visible { outline: 2px solid var(--rs-brand); outline-offset: -3px; }

/* 6. Download --------------------------------------------------------------
   Card = "教材下载" title row + B2's box. Inside, top to bottom:
   what is included → the action (开通会员 / 已是会员？登录, or the member's
   download buttons) → "文件清单 ▾  下载权限 ▾" side by side → the opened list. */
body.bk-resource-article .single-article .bk-download-heading { margin-top: var(--rs-gap); border: 1px solid var(--rs-line); border-radius: var(--rs-r-md) var(--rs-r-md) 0 0; }
body.single-post.bk-resource-article .single-article #download-box { max-width: 100%; margin: 0 0 12px; scroll-margin-top: 70px; }
body.single-post.bk-resource-article .single-article #download-box .download-list { background: transparent !important; }
body.single-post.bk-resource-article .single-article #download-box .download-item {
    box-sizing: border-box; display: flex; flex-flow: row wrap; align-items: center; column-gap: 20px; row-gap: 0;
    min-width: 0; max-width: 100%; margin: 0; padding: 14px var(--rs-pad) 6px; background: #fff;
    border: 1px solid var(--rs-line); border-radius: var(--rs-r-md); box-shadow: none;
}
body.single-post.bk-resource-article .single-article .bk-download-heading + #download-box .download-item { border-top: 0; border-radius: 0 0 var(--rs-r-md) var(--rs-r-md); }
body.single-post.bk-resource-article .single-article #download-box .download-list > .download-item + .download-item { border-radius: 0; }
body.single-post.bk-resource-article .single-article #download-box .download-thumb,
body.single-post.bk-resource-article .single-article #download-box .bk-download-duplicate,
body.single-post.bk-resource-article .single-article #download-box .bk-rights-compact > :is(.download-rights-title, .mobile-show) { display: none !important; }
/* Flatten the native wrappers so their parts can be ordered. */
body.single-post.bk-resource-article .single-article #download-box :is(.download-info, .download-rights, .bk-download-inventory) { display: contents; }
body.single-post.bk-resource-article .single-article #download-box .download-item > * ,
body.single-post.bk-resource-article .single-article #download-box .download-info > *,
body.single-post.bk-resource-article .single-article #download-box .download-rights > *,
body.single-post.bk-resource-article .single-article #download-box .bk-download-inventory > * { flex: 1 0 100%; min-width: 0; order: 2; }
body.single-post.bk-resource-article .single-article #download-box .download-rights-title { order: 1; margin: 0 0 8px; color: var(--rs-ink); font-size: 14px; overflow-wrap: anywhere; }
body.single-post.bk-resource-article .single-article #download-box .bk-download-inventory > p { order: 1; margin: 0 0 12px; color: var(--rs-ink); font-size: 14px; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; }
body.single-post.bk-resource-article .single-article #download-box .download-info > ul:not(.bk-file-list) { order: 1; margin: 0 0 12px; padding: 0; }
body.single-post.bk-resource-article .single-article #download-box .download-info > ul > li { min-width: 0; padding: 6px 0; background: transparent; border: 0; border-radius: 0; color: var(--rs-text); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
body.single-post.bk-resource-article .single-article #download-box .download-attr-name { flex-shrink: 0; color: var(--rs-muted); }
/* The action. */
body.single-post.bk-resource-article .single-article #download-box .bk-cta-download { display: block; margin: 0; padding: 0; border: 0; }
body.single-post.bk-resource-article .single-article #download-box .bk-cta-download p { margin: 0 0 12px; color: var(--rs-text); font-size: 14px; line-height: 1.7; }
body.single-post.bk-resource-article .single-article #download-box .bk-cta-actions { display: flex; flex-flow: row wrap; align-items: center; gap: 4px 0; width: auto; justify-content: flex-start; }
body.single-post.bk-resource-article .single-article #download-box .bk-cta-actions > .bk-cta-join {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 140px; min-height: var(--rs-control);
    margin: 0; padding: 0 22px; border-radius: var(--rs-r-sm); font-size: 14px; font-weight: 500; line-height: 1;
}
body.single-post.bk-resource-article .single-article #download-box .bk-cta-actions > .bk-cta-login {
    order: 9; flex: 0 0 100%; display: inline-flex; align-items: center; justify-content: flex-start; min-height: 36px;
    margin: 0; padding: 0; background: transparent; color: var(--rs-text) !important; font-size: 13px;
}
body.single-post.bk-resource-article .single-article #download-box .download-button-box { display: flex; flex-wrap: wrap; gap: 10px; }
body.single-post.bk-resource-article .single-article #download-box .download-button-box button {
    display: inline-flex; align-items: center; justify-content: center; min-height: var(--rs-control); margin: 0; padding: 0 18px;
    border-radius: var(--rs-r-sm); white-space: normal; max-width: 100%;
}
/* "文件清单 ▾   下载权限 ▾" in one row under the action. */
body.single-post.bk-resource-article .single-article #download-box :is(.bk-file-toggle, .bk-rights-toggle) {
    order: 5; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; min-height: var(--rs-control);
    margin: 4px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
    color: var(--rs-muted); font: inherit; font-size: 13px; font-weight: 400; line-height: 1.4; text-align: left; cursor: pointer;
}
body.single-post.bk-resource-article .single-article #download-box .bk-rights-toggle { order: 6; }
body.single-post.bk-resource-article .single-article #download-box .bk-file-list { order: 7; display: grid; grid-template-columns: minmax(0, 1fr); margin: 0 0 8px; padding: 8px 0 0; border-top: 1px solid var(--rs-hair); background: transparent; }
body.single-post.bk-resource-article .single-article #download-box .bk-files-collapsed { display: none !important; }
body.single-post.bk-resource-article .single-article #download-box .bk-file-list > li { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 6px 0; font-size: 13px; }
body.single-post.bk-resource-article .single-article #download-box .bk-file-list > li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
body.single-post.bk-resource-article .single-article #download-box .bk-rights-compact > ul { display: none; }
body.single-post.bk-resource-article .single-article #download-box .bk-rights-open > ul { order: 8; display: block; margin: 0 0 8px; padding: 8px 0 0; border-top: 1px solid var(--rs-hair); list-style: none; }
body.single-post.bk-resource-article .single-article #download-box .bk-rights-open > ul > li { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; padding: 6px 0; font-size: 13px; line-height: 1.5; }
/* Order: pitch 2 → rights line 3 → button 4 → toggles 5 / 6 → lists 7 / 8.
   2.0.225: same right for every level → one quiet line under the pitch,
   then the button; no "查看下载权限" row and no list. */
body.single-post.bk-resource-article .single-article #download-box .bk-cta-download { display: contents; }
body.single-post.bk-resource-article .single-article #download-box .bk-cta-download > * { flex: 1 0 100%; min-width: 0; order: 2; }
body.single-post.bk-resource-article .single-article #download-box .bk-rights-summary { flex: 1 0 100%; order: 3; margin: 0 0 12px; color: var(--rs-muted); font-size: 13px; line-height: 1.6; }
body.single-post.bk-resource-article .single-article #download-box .download-item:has(.bk-rights-same) .bk-cta-download > p { margin-bottom: 2px; }
/* Members: the line sits under their download buttons. */
body.single-post.bk-resource-article .single-article #download-box .download-item:not(:has(.bk-cta-download)) .bk-rights-summary { margin: 10px 0 8px; }
body.single-post.bk-resource-article .single-article #download-box .bk-cta-actions { order: 4; }
body.single-post.bk-resource-article .single-article #download-box .bk-rights-same > :is(ul, .bk-rights-toggle) { display: none !important; }
@media (max-width: 768px) {
    body.single-post.bk-resource-article .single-article #download-box .bk-cta-actions > .bk-cta-join { flex: 1 1 100%; }
    body.single-post.bk-resource-article .single-article #download-box .bk-cta-actions > .bk-cta-login { justify-content: center; }
}

/* 7. After the download ------------------------------------------------------- */
body.bk-resource-article .single-article .entry-content .bk-related-topics > h2 { margin: var(--rs-gap) 0 12px; padding: 0; font-size: 16px; font-weight: 500; line-height: 1.5; }
body.bk-resource-article .entry-content .bk-related-topics :is(.bukids-card-cn, .bukids-card-stats, .bukids-card-stats > span) { color: var(--rs-muted) !important; font-size: 13px; }
body.bk-resource-article .single-article .entry-content .post-note,
body.bk-resource-article .single-article .entry-content .post-note * { color: var(--rs-muted) !important; font-size: 12px; }
body.bk-resource-article .b2-widget-post-order.widget-order-2 span { color: #422a00; }
body.bk-resource-article .bk-article-language { margin: 0; padding: 0; }

/* Stable native container: B2 removes post-content-footer on a phone's first
   load. Same in-flow, centered action group on every width, without new nodes. */
body.bk-resource-article .single-article > .content-footer {
    box-sizing: border-box; display: block !important; position: static !important;
    inset: auto !important; width: auto !important; height: auto !important; min-height: 0 !important;
    margin: var(--rs-gap) 0 0; padding: 16px 0; border-top: 1px solid var(--rs-hair); transform: none !important;
}
body.bk-resource-article .single-article > .content-footer .inner-wrapper-sticky {
    position: static !important; inset: auto !important; width: auto !important; height: auto !important; transform: none !important;
}
body.bk-resource-article .single-article > .content-footer .post-content-footer-in { display: flex; justify-content: center; align-items: center; margin: 0 !important; padding: 0; transform: none !important; }
body.bk-resource-article .single-article > .content-footer .content-footer-poster {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(100%, 340px); margin: 0 auto; padding: 0;
}
body.bk-resource-article .single-article > .content-footer .content-footer-poster button {
    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; min-width: 0; height: 44px; margin: 0; padding: 0 6px; line-height: 1.4;
    border: 1px solid var(--rs-line); border-radius: var(--rs-r-sm); background: #fff; box-shadow: none;
    color: var(--rs-text); font: inherit; font-size: 13px; white-space: nowrap;
}
body.bk-resource-article .single-article > .content-footer .content-footer-poster button i { margin: 0; font-size: 16px; line-height: 1; color: inherit; }
body.bk-resource-article .single-article > .content-footer .content-footer-poster button b { display: inline !important; font-weight: 400; }
body.bk-resource-article .single-article > .content-footer .content-footer-poster button.sc { color: var(--rs-brand); border-color: var(--rs-brand); background: var(--rs-brand-soft); }
body.bk-resource-article .single-article > .content-footer .content-footer-poster button:focus-visible { outline: 2px solid var(--rs-brand); outline-offset: 2px; }
body.bk-resource-article .single-article > .content-footer .content-footer-poster button:active { background: var(--rs-brand-soft); }
body.bk-resource-article .single-article > .content-footer .comment-span,
body.bk-resource-article .single-article > .content-footer .content-footer-zan-cai,
body.bk-resource-article .single-article > .content-footer[v-cloak],
body.bk-resource-article .single-article > .content-footer button[v-cloak] { display: none !important; }
@media (hover: hover) and (pointer: fine) {
    body.bk-resource-article .single-article > .content-footer .content-footer-poster button:hover { border-color: var(--rs-brand); color: var(--rs-brand); }
}
@media (max-width: 1180px) {
    body.bk-video-resource .single-article > .content-footer { margin-inline: 12px; }
}
@media (max-width: 359px) {
    body.bk-resource-article .single-article > .content-footer .content-footer-poster { gap: 6px; }
    body.bk-resource-article .single-article > .content-footer .content-footer-poster button { gap: 4px; padding-inline: 4px; }
}

/* 8. Sidebar ------------------------------------------------------------------ */
body.bk-resource-article .bk-download-compact > .b2-widget-box { display: none; }
body.bk-resource-article .bk-download-shortcut {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--rs-control); box-sizing: border-box;
    border: 1px solid var(--rs-line-strong); border-radius: var(--rs-r-sm); background: #fff; color: var(--rs-ink); font-size: 14px; text-decoration: none;
}
body.bk-resource-article .bk-download-shortcut:hover { border-color: var(--rs-brand); color: var(--rs-brand); }
/* B2 omits the sticky sidebar on video-style posts; native CSS sticky, no
   scroll listener. Tall lists scroll fully first; the parent stops them. */
@media (min-width: 1024px) {
    body.bk-resource-article.post-style-5 { overflow-x: clip; overflow-y: visible; }
    body.bk-resource-article.post-style-5 .widget-area > .sidebar.bk-resource-sticky-ready {
        position: sticky;
        top: min(var(--bk-resource-sticky-top, 132px), calc(100vh - var(--bk-resource-sidebar-height, 0px) - 20px));
        top: min(var(--bk-resource-sticky-top, 132px), calc(100dvh - var(--bk-resource-sidebar-height, 0px) - 20px));
    }
}

/* 9. Focus ----------------------------------------------------------------------- */
body.bk-resource-article :is(.bk-video-intro-toggle, .bk-rights-toggle, .bk-file-toggle, .bk-intro-collapse, .single-button-download button, .bk-res-topic, .bk-res-tab, .bk-strip-segs button):focus-visible {
    outline: 2px solid var(--rs-brand); outline-offset: 2px;
}

/* 10. Phones -------------------------------------------------------------------- */
@media (max-width: 599px) {
    body.bk-resource-article .bk-res-switch[data-columns] { grid-template-columns: minmax(0, 1fr); }
    body.bk-resource-article .bk-res-field-label { min-width: 62px; padding: 0 9px; font-size: 12px; }
    /* 16px stops iOS from zooming into the dropdown. */
    body.bk-resource-article .bk-res .bk-res-select { padding: 0 24px 0 9px; font-size: 16px; background-position: right 8px center; background-size: 10px 10px; }
    /* Rows of equal length: 5–6 levels in 3 columns, 7–8 in 4. */
    body.bk-resource-article .bk-res-levels:is([data-columns="5"], [data-columns="6"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.bk-resource-article .bk-res-levels:is([data-columns="7"], [data-columns="8"]) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body.bk-resource-article .single-article .bk-resource-overview { grid-template-columns: 96px minmax(0, 1fr); }
    body.bk-resource-article .bk-resource-cover img { max-height: 128px; }
    body.bk-resource-article .bk-resource-overview .bk-video-summary { -webkit-line-clamp: 4; font-size: 14px; line-height: 1.75; }
    body.bk-resource-article .single-article .bk-video-intro-title { padding-right: 104px; }
    /* The centre notice remains on the player; drop its duplicate corner badge. */
    body.bk-video-resource .video-role-info[data-bk-cta] .video-tips { display: none; }
}
@media (max-width: 359px) {
    body.bk-resource-article .single-article .bk-resource-overview { grid-template-columns: 80px minmax(0, 1fr); }
    body.bk-resource-article .bk-res-levels { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Textbooks whose text could not be summarised keep the cover at book size. */
body.bk-textbook-post .single-article .entry-content > figure.wp-block-image:first-child { max-width: 300px; margin-right: auto; margin-left: auto; }
body.bk-textbook-post .single-article .entry-content > figure.wp-block-image:first-child img { display: block; width: 100%; height: auto; border: 1px solid var(--rs-line); border-radius: var(--rs-r-sm); }
@media (max-width: 599px) { body.bk-textbook-post .single-article .entry-content > figure.wp-block-image:first-child { max-width: 62%; } }
body.bk-resource-article .bk-video-intro-full > .bk-intro-dup + * { margin-top: 0; }