/* ============================================================
 * 潮声议题
 * topics.css
 * ============================================================ */

.topic-detail-main{
    display: block;
    min-width: 0
}

/* 潮声详情：顶栏贴齐吸顶阈值，顶距改到主内容 */
.v6-topic-detail.section-page{
    padding-top: 0;
    /* 允许 chrome 全视口宽破出，避免被祖先裁切 */
    overflow: visible;
}

/* 桌面：页面居中栏内破出全宽时，防止横向滚动条抖动 */
.page:has([data-topic-page]){
    overflow-x: visible;
}

.topic-list-grid{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0
}

.topic-list-grid > li{
    margin: 0;
    border-bottom: 1px solid var(--line)
}

.topic-list-card{
    display: grid;
    gap: .45rem;
    padding: 0.8rem 0;
    border-radius: 6px;
    transition: background-color .2s ease, box-shadow .2s ease, margin .2s ease, padding .2s ease
}

.topic-list-title-row{
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0
}

.topic-list-card h3{
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--ink);
    font: 600 1.12rem var(--serif);
    transition: color .18s ease
}

.topic-list-card h3 a{
    height: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: color .18s ease
}

.topic-list-card.is-clickable{
    cursor: pointer
}

/* 潮声列表卡：与众声同套桌面指上交互 */
@media (hover: hover) and (pointer: fine){.topic-list-card.is-clickable{
        margin-inline: -0.55rem;
        padding-inline: 0.55rem
    }

    .topic-list-card.is-clickable:hover,
.topic-list-card.is-clickable:focus-visible{
        outline: none
    }

    .topic-list-card.is-clickable:hover h3,
.topic-list-card.is-clickable:focus-visible h3,
.topic-list-card.is-clickable:hover h3 a,
.topic-list-card.is-clickable:focus-visible h3 a{
        color: var(--red)
    }
}

@media (prefers-reduced-motion: reduce){.topic-list-card,
.topic-list-card h3,
.topic-list-card h3 a{
        transition: none
    }
}

.topic-list-card-meta{
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .85rem;
    color: var(--muted);
    font: .78rem/1.5 var(--sans)
}

.topic-list-card-meta strong{
    color: var(--ink);
    font-weight: 650
}

/* 讨论现场：为何引发 + 交锋画面 */

.topic-stage-kicker{
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .85rem;
    color: var(--red);
    font: 750 .82rem var(--sans);
    letter-spacing: .12em
}

.topic-stage-kicker.is-live{
    padding: .28rem .55rem;
}

.topic-heat-pulse{
    display: inline-block;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 0 rgba(180, 56, 47, .45);
    animation: topic-heat-pulse 1.6s ease-out infinite
}

@keyframes topic-heat-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(180, 56, 47, .45)
    }
    70% {
        box-shadow: 0 0 0 .55rem rgba(180, 56, 47, 0)
    }
    100% {
        box-shadow: 0 0 0 0 rgba(180, 56, 47, 0)
    }
}

.topic-stage-lead{
    margin: 0 0 .45rem;
    color: #2f3a40;
    font: 1rem/1.7 var(--serif)
}

.topic-stage-track:not(.is-expanded) .topic-track-item:not(:first-child){
    display: none
}

.topic-stage-track:not(.is-expanded) .topic-track-list::before{
    bottom: auto;
    height: calc(100% - 1.2rem)
}

.topic-stage-entry{
    display: grid;
    gap: 0.8rem;
    margin: 0.8rem 0 0;
}

.topic-brief-article{
    display: grid;
    gap: .35rem;
    margin: 0;
    padding: .95rem 1.15rem 1rem 1.2rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--red);
}

[data-topic-list] .v6-topic-detail{
    padding: 0 0 1.5rem;
    scroll-margin-top: 5.5rem
}

[data-topic-list] .topic-detail-stack > .v6-topic-detail{
    display: none;
    padding: 0;
    border: 0;
    margin: 0
}

[data-topic-list] .topic-detail-stack > .v6-topic-detail[hidden]{
    display: none
}

@keyframes live-badge-blink {
    50% {
        opacity: .25
    }
}

@keyframes election-ticker-x {
    from {
        transform: translateX(0)
    }
    to {
        transform: translateX(-50%)
    }
}

@keyframes election-feed-y {
    from {
        transform: translateY(0)
    }
    to {
        transform: translateY(-50%)
    }
}

@keyframes election-needle-swing {
    0%, 100% {
        transform: rotate(var(--angle, -8deg))
    }
    50% {
        transform: rotate(calc(var(--angle, -8deg) * -1 + 6deg))
    }
}

@keyframes election-camp-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.985)
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

@keyframes election-take-in {
    from {
        opacity: 0;
        transform: translateY(14px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes election-feed-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(180, 56, 47, .45)
    }
    70% {
        box-shadow: 0 0 0 8px rgba(180, 56, 47, 0)
    }
    100% {
        box-shadow: 0 0 0 0 rgba(180, 56, 47, 0)
    }
}

/* 现场留言：与众声详情留言区同构 */
.topic-discuss-board{
    margin: 0 0 1.25rem;
    background: transparent;
    scroll-margin-top: 5.5rem
}

.topic-discuss-board .discussion-feed{
    display: grid;
    gap: 0;
    position: relative
}

.topic-discuss-board .discussion-feed-item{
    margin: 0;
    padding: .6rem .3rem;
    background: #fff;
    border-bottom: 0;
    overflow: visible
}

.topic-discuss-board .discussion-feed-item + .discussion-feed-item{
    border-top: 1px solid var(--line)
}

/* 未登录：最多 3 条一级留言 +「登录查看更多」（有留言且不足 3 条也显示 lock） */
.discussion-feed.is-guest-limited .discussion-feed-item:last-of-type{
    position: relative;
    z-index: 0
}

.discussion-feed-login-more{
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: -3.2rem;
    padding: 3.4rem 0 1.1rem;
    background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .72) 36%,
            #fff 68%,
            #fff 100%
    );
    pointer-events: none
}

.discussion-feed-login-more-btn{
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.4rem;
    margin: 0;
    padding: .55rem 1.35rem;
    border: 1.5px solid var(--red, #b4382f);
    border-radius: 999px;
    background: #fff;
    color: var(--red, #b4382f);
    font: 650 .92rem/1 var(--sans);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(17, 32, 42, .06)
}

.discussion-feed-login-more-btn:hover,
.discussion-feed-login-more-btn:focus-visible{
    background: rgba(180, 56, 47, .04);
    outline: none
}

.discussion-feed-login-more-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    line-height: 0
}

.discussion-feed-login-more-icon svg{
    display: block;
    width: 100%;
    height: 100%
}

.topic-discuss-filter-bar{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem .7rem;
    margin: 0 0 .85rem;
    padding: .55rem .75rem;
    border: 1px solid rgba(180, 56, 47, .22);
    border-radius: .2rem;
    background: rgba(180, 56, 47, .05);
    color: var(--muted);
    font: .86rem/1.45 var(--sans)
}

.topic-discuss-filter-bar[hidden]{
    display: none
}

.topic-discuss-filter-bar strong{
    color: var(--red);
    font-weight: 700
}

.topic-discuss-filter-clear{
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--red);
    font: 650 .82rem/1.2 var(--sans);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer
}

.topic-discuss-list{
    display: block
}

.topic-discuss-list .topic-discuss-remove{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    min-height: 1.5rem;
    margin: 0;
    padding: 0 .28rem;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #8a949c;
    cursor: pointer
}

.topic-discuss-list .topic-discuss-remove svg{
    width: .9rem;
    height: .9rem;
    display: block
}

.topic-discuss-list .topic-discuss-remove:hover,
.topic-discuss-list .topic-discuss-remove:focus-visible{
    color: var(--red);
    background: rgba(180, 56, 47, .06)
}

.topic-discuss-empty .topic-discuss-empty-compose{
    border: 0;
    background: transparent;
    color: var(--red);
}

.election-take .topic-discuss-foot .discussion-item-actions{
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .15rem .3rem;
    margin-left: auto
}

.election-take .topic-discuss-foot .discussion-vote-btn{
    min-height: 24px;
    padding: 0 .4rem;
    border: 0;
    background: transparent;
    color: #8a949c;
    font: 650 .82rem/1 var(--sans);
    cursor: pointer;
    border-radius: 4px
}

.election-take .topic-discuss-foot .discussion-vote-btn:hover,
.election-take .topic-discuss-foot .discussion-vote-btn:focus-visible{
    color: var(--red);
    background: rgba(180, 56, 47, .06)
}

.election-take .topic-discuss-foot .discussion-vote-btn.is-active[data-vote-value="up"]{
    color: var(--navy)
}

.election-take .topic-discuss-foot .discussion-vote-btn.is-active[data-vote-value="down"]{
    color: var(--red)
}

.topic-discuss-empty{
    margin: 0;
    padding: 1.15rem 0;
    color: var(--muted);
    font: .9rem/1.65 var(--serif);
    text-align: left;
    background: transparent;
    border: 0
}

.topic-discuss-empty strong{
    color: var(--ink);
    font-weight: 650
}

[data-topic-list] .topic-lead{
    margin-top: 1rem;
}

[data-topic-list] .topic-lead h2{
    font-size: clamp(1.35rem, 2.8vw, 1.75rem)
}

.topic-lead h2{
    margin: 0 0 .55rem;
    font: 600 clamp(1.24rem, 7.2vw, 1.46rem)/1.28 var(--serif)
}

.topic-sticky-chrome{
    /* 随页滚动，不再吸顶；滚入正文后标题/写留言改由 masthead 承接 */
    position: relative;
    top: auto;
    z-index: auto;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
}

.topic-sticky-chrome-inner{
    box-sizing: border-box;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: .65rem 0 .45rem;
}

/* 旧吸顶装饰已废弃，保留选择器避免残留 class 影响布局 */
.topic-sticky-chrome::after,
.topic-sticky-chrome.is-stuck::after{
    display: none
}

.topic-sticky-chrome.is-stuck{
    padding-top: 0;
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none
}

/* 潮声详情：滚入正文后 masthead 收成 brand-lockup | 标题 | 写留言
   显隐一律由 .is-topic-reading 控制，避免与 flex 的 display 抢优先级导致中间态抖动 */
.masthead.is-topic-reading .masthead-inner{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem 1.1rem
}

.masthead.is-topic-reading .primary-nav,
.masthead.is-topic-reading .header-actions,
.primary-nav[hidden],
.header-actions[hidden]{
    display: none !important
}

.masthead-topic-center{
    display: none;
    min-width: 0;
    flex-direction: column;
    gap: .18rem
}

.masthead.is-topic-reading .masthead-topic-center{
    display: flex;
    animation: topic-masthead-in .3s ease both
}

.masthead-topic-title{
    display: block;
    margin: 0;
    min-width: 0;
    font: 650 1.02rem/1.3 var(--serif);
    color: var(--ink, #171b1f);
    letter-spacing: .01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.masthead-topic-stats{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .85rem;
    margin: 0;
    min-width: 0;
    color: #8a949c;
    font: .78rem/1.35 var(--sans)
}

.masthead-topic-stats[hidden],
.masthead-topic-stats:empty{
    display: none
}

.masthead-topic-stats .stat-item{
    display: inline-flex;
    align-items: baseline;
    gap: .15em;
    white-space: nowrap
}

.masthead-topic-stats .stat-item.is-action{
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #8a949c;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: all .15s ease;
}

.masthead-topic-stats .stat-item.is-action:hover,
.masthead-topic-stats .stat-item.is-action:focus-visible{
    color: var(--red, #b4382f);
    border-color: var(--red, #b4382f);
    outline: none
}

@keyframes topic-masthead-in {
    from {
        opacity: 0;
        transform: translateY(8px)
    }
    to {
        opacity: 1;
        transform: none
    }
}

@media (prefers-reduced-motion: reduce){.masthead.is-topic-reading .masthead-topic-center{
        animation: none
    }

    .header-actions-swap .header-topic-title,
.header-actions-swap .header-search-trigger{
        transition: none;
        transform: none !important
    }
}

.topic-sticky-chrome .topic-lead{
    margin-bottom: 0.3rem;
}

.topic-detail-aside .topic-track{
    margin: 0;
    padding: 0 0.4rem;
}

.topic-detail-aside .topic-track-item{
    padding: .75rem 0 .4rem 1.25rem
}

.topic-detail-aside .topic-track-view{
    font-size: .82rem;
    line-height: 1.55
}

.topic-detail-aside .topic-track-relation{
    padding: .4rem .55rem;
    font-size: .82rem
}

/* 相关文章：全屏遮罩 + 右侧通栏；打开时由 html.topic-track-drawer-open 隐藏页面滚动条 */
html.topic-track-drawer-open,
html.topic-track-drawer-open body{
    overflow: hidden !important;
}

.topic-track-drawer{
    position: fixed;
    inset: 0;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(17, 50, 74, .38);
    color: var(--ink);
    z-index: 1100
}

.topic-track-drawer:not([open]):not(.open){
    display: none
}

.topic-track-drawer[open],
.topic-track-drawer.open{
    display: flex;
    justify-content: flex-end
}

.topic-track-drawer::backdrop{
    display: none
}

.topic-track-drawer-inner{
    display: flex;
    flex-direction: column;
    gap: .55rem;
    width: min(42rem, 100%);
    height: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 1.1rem calc(1.2rem + env(safe-area-inset-bottom));
    box-sizing: border-box;
    border-left: 1px solid var(--line);
    background: var(--paper-strong, #fff);
    box-shadow: -16px 0 36px rgba(17, 50, 74, .16)
}

.topic-track-drawer-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    padding: .65rem 1.1rem;
    margin: 0 -1.1rem;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: var(--paper-strong, #fff);
    z-index: 1
}

.topic-track-drawer-title-row{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .65rem;
    min-width: 0;
    flex: 1 1 auto
}

.topic-track-drawer-head h2{
    margin: 0;
    font: 650 1.22rem/1.25 var(--serif)
}

.topic-track-drawer-count{
    color: #9aa3ab;
    font: 500 .84rem/1.35 var(--sans);
    white-space: nowrap
}

.topic-track-drawer-close{
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    margin: -.15rem -.2rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer
}

.topic-track-drawer-close svg{
    width: 1.05rem;
    height: 1.05rem
}

.topic-track-drawer-close:hover,
.topic-track-drawer-close:focus-visible{
    color: var(--red);
    background: rgba(180, 56, 47, .08);
    outline: none
}

.topic-track-drawer .topic-track{
    margin: 0;
    padding: 0;
    border: 0
}

.topic-track-list{
    position: relative;
    margin: 0;
    padding: 0;
}

.topic-track-list::before{
    content: '';
    position: absolute;
    left: 0;
    top: 1.35rem;
    bottom: 1.35rem;
    width: 2px;
    height: calc(100% - 1.4rem);
    background: var(--ink);
    opacity: .18;
}

.topic-track-item{
    position: relative;
    padding: 1rem 0 0.5rem 1.65rem;
}

.topic-track-item .home-latest-head{
    margin: 0;
    gap: .28rem
}

.topic-track-item .home-latest-head h3{
    font-size: .98rem
}

.topic-track-response .home-latest-response-mark{
    width: .95rem;
    height: .95rem
}

.topic-track-item:last-child{
    border-bottom: 0
}

.topic-track-item::before{
    content: '';
    position: absolute;
    left: -4px;
    top: 1.1rem;
    width: 10px;
    height: 10px;
    border: 2px solid var(--red);
    border-radius: 50%;
    background: var(--paper);
    box-sizing: border-box
}

.topic-track-item.is-start::before{
    background: var(--red)
}

.topic-track-item time{
    font: .82rem var(--sans);
}

.topic-track-item .kicker{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .14rem;
    margin: 0 0 0.3rem 0;
    color: var(--muted);
    font-size: .82rem;
    letter-spacing: .04em
}

.topic-track-item .kicker time{
    flex: 0 0 auto
}

.topic-track-item h3{
    margin: .32rem 0 .3rem;
    font: 600 1.12rem/1.35 var(--serif)
}

.topic-track-item h3 a{
    color: var(--ink);
    text-decoration: none
}

.topic-track-item h3 a:hover{
    color: var(--red);
    text-decoration: underline;
    text-underline-offset: 3px
}

.topic-track-view{
    margin: .2rem 0 0;
    color: var(--muted);
    font: .9rem/1.62 var(--serif)
}

.topic-track-view strong{
    color: var(--navy);
    font-weight: 750
}

.topic-track-relations{
    display: grid;
    gap: .45rem;
    margin-top: .7rem
}

.topic-track-relation{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .45rem .55rem;
    margin: 0;
    padding: .55rem .7rem .6rem .62rem;
    border: 1px solid rgba(180, 56, 47, .2);
    border-radius: .28rem;
    background: linear-gradient(90deg, rgba(180, 56, 47, .08), rgba(180, 56, 47, .025) 78%);
    color: var(--ink);
    font: .88rem/1.5 var(--sans)
}

.topic-track-origin{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .45rem;
    margin: .55rem 0 0;
    color: var(--red-dark);
    font: 650 .82rem/1.4 var(--sans)
}

.topic-track-relation-body{
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: .28rem;
    min-width: 0
}

.topic-track-relation-label{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    align-self: center;
    min-width: 2.1rem;
    height: 1.32rem;
    padding: 0 .4rem;
    border-radius: 4px;
    background: var(--red);
    border: 1px solid var(--red);
    color: #fff;
    font: 500 .82rem/1 var(--sans);
    letter-spacing: .08em;
    box-sizing: border-box
}

/* 起点：实心红底白字；回应：浅红底红边红字 */
.topic-track-relation-label.is-start,
.topic-track-origin .topic-track-relation-label{
    background: var(--red);
    border: 1px solid var(--red);
    color: #fff
}

.topic-track-relation-label.is-reply{
    background: rgba(255, 255, 255, .45);
    border: 1px solid rgba(180, 56, 47, .35);
    color: var(--red)
}

.topic-track-relation-target{
    display: block;
    width: 100%;
    min-width: 0;
    font-weight: 500;
    text-decoration: none;
    overflow-wrap: anywhere
}

.topic-track-relation-target:hover,
.topic-track-relation-target:focus-visible{
    color: var(--red);
    border-bottom-color: var(--red)
}

.topic-track-relation-meta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem .4rem;
    margin: 0;
    min-width: 0;
    color: var(--muted);
    font: .8rem var(--sans)
}

.topic-track-relation-note{
    margin: 0;
    width: 100%;
    color: var(--muted);
    font: .82rem/1.4 var(--serif)
}

.v6-timeline-item .kicker{
    margin: .2rem 0 0;
    color: var(--muted);
    font-size: .82rem;
    letter-spacing: .04em
}

/* 潮声详情：讨论现场叙事 */

.topic-discuss-board,
.topic-track{
    scroll-margin-top: 5.5rem
}

/* 潮声详情：复用众声 comment-sticky-dock（SEO 桌面隐藏） */
[data-topic-page] > .comment-sticky-dock[data-topic-sticky-compose]{
    display: none
}