/* 车市回放（批次 5）——把半年的车市压成一条能拖的时间线
   四条轨道各用一个语义色：报道中性、调价金、召回红、承诺绿。
   金色只在调价这一条上（同屏 ≤3 仍成立）。 */

.replay {
    border:1px solid var(--line); border-radius:var(--r);
    background:var(--card); padding:var(--sp-5); margin-bottom:var(--sp-5);
}
.replay-head { display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:flex-start; }
.replay-title {
    font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:700;
    margin:0; color:var(--ink); line-height:1.2;
}
.replay-lede { margin:6px 0 0; font-size:var(--fs-sm); color:var(--ink-3); line-height:1.8; }
.replay-play {
    margin-left:auto; flex:none; cursor:pointer;
    border:1px solid var(--line); background:var(--paper); color:var(--ink-2);
    border-radius:var(--r-sm); padding:7px 16px; font-size:var(--fs-sm);
}
.replay-play:hover { border-color:var(--ink-4); }

/* 四条轨道：每天一根柱，高度按当天条数。柱子是 JS 生成的 */
.replay-tracks {
    display:grid; gap:3px; margin:var(--sp-4) 0 var(--sp-2);
    grid-template-rows:repeat(4, 1fr);
}
.replay-track {
    display:flex; align-items:flex-end; gap:1px; height:34px;
    border-bottom:1px solid var(--line-2);
}
.replay-bar {
    flex:1 1 0; min-width:0; border-radius:1px 1px 0 0;
    /* 未到的日子淡出：回放是「攒出来」的过程，未来那部分该是空的 */
    opacity:.18; transition:opacity .18s linear;
}
.replay-bar.is-past { opacity:1; }
.replay-track[data-kind="news"] .replay-bar { background:var(--ink-4); }
.replay-track[data-kind="price"] .replay-bar { background:var(--gold); }
.replay-track[data-kind="recall"] .replay-bar { background:var(--q-bad); }
.replay-track[data-kind="promise"] .replay-bar { background:var(--q-good); }
/* 当天有事件就至少画一格——1 条和 0 条必须看得出区别 */
.replay-bar.is-zero { background:transparent; }

.replay-slider-wrap { display:block; }
.replay-slider { width:100%; accent-color:var(--gold); cursor:pointer; }

.replay-readout {
    display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4);
    align-items:baseline; margin-top:var(--sp-2);
}
.replay-readout b {
    font-family:var(--font-display); font-size:var(--fs-lg);
    font-variant-numeric:tabular-nums; color:var(--ink);
}
.replay-cum { font-size:var(--fs-sm); color:var(--ink-3); }

.replay-brands {
    display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center;
    margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--line-2);
}
.replay-brands-cap { font-size:var(--fs-xs); color:var(--ink-3); }
.replay-brand {
    font-size:var(--fs-xs); color:var(--ink-2);
    border:1px solid var(--line); border-radius:var(--r-sm); padding:2px 8px;
}
.replay-brand i { font-style:normal; color:var(--ink-3); font-variant-numeric:tabular-nums; }

.replay-note { margin:var(--sp-3) 0 0; font-size:11px; line-height:1.8; color:var(--ink-3); }

@media (max-width:560px) {
    .replay { padding:var(--sp-4); }
    .replay-title { font-size:var(--fs-xl); }
    .replay-track { height:26px; }
}
@media (prefers-reduced-motion: reduce) {
    .replay-bar { transition:none; }
}