/* =========================================================================
   信息选题参考 · Newsroom 卡片式设计
   参考 Stripe Newsroom / Anthropic News / Morning Brew 的排版气质，
   做项目特化（无题图 → 以分类眉标 + 粗标题 + 摘要 + 来源/日期元信息构成卡片）。
   桌面端与移动端是两套布局（风格统一）：
     · 桌面：顶部单行导航（品牌 | 栏目下划线 tab | 搜索）+ 多列卡片网格 + 头条大卡
     · 移动：品牌行 + 横滑 pill 栏目 + 搜索行 + 单列大卡片流
   ========================================================================= */
:root {
  --bg: #f4f3ef;
  --card: #ffffff;
  --ink: #17181c;
  --ink-2: #585e6a;
  --ink-3: #969ca6;
  --line: #e7e5df;
  --line-2: #eeece7;
  --accent: #4b56d2;
  --accent-deep: #3a44b8;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(20,22,30,.04), 0 1px 3px rgba(20,22,30,.05);
  --shadow-md: 0 6px 20px rgba(20,22,30,.08);
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.loading, .empty { text-align: center; color: var(--ink-3); padding: 60px 0; font-size: 14px; }
.empty small { color: var(--ink-3); }

/* =============== 抗抖动：加载失败重试 / 网络提示 =============== */
.card-grid > .loading, .card-grid > .empty, .card-grid > .issue-more { grid-column: 1 / -1; }
.load-error-msg { margin: 0 0 14px; color: var(--ink-2); line-height: 1.6; }
.retry-btn {
  display: inline-block; min-width: 96px; height: 36px; padding: 0 18px;
  border: 1px solid var(--accent); border-radius: 999px; background: var(--card);
  color: var(--accent); font-family: var(--font); font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.retry-btn:hover { background: var(--accent); color: #fff; }
.retry-btn:disabled { opacity: .6; cursor: default; }
.retry-link { display: inline-block; margin-left: 12px; color: var(--accent); font-size: 13px; }
.issue-more {
  justify-self: center; margin-top: 4px; padding: 9px 22px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  color: var(--ink-2); font-family: var(--font); font-size: 13px; cursor: pointer;
}
.issue-more:disabled { cursor: default; color: var(--ink-3); }
/* 顶部网络提示条：body.auth-pending 期间整页 visibility:hidden，提示条需单独设为可见 */
.net-banner {
  position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 1000;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px);
  padding: 10px 12px 10px 16px; border-radius: 12px; background: #fff7e8;
  border: 1px solid #f3d19e; box-shadow: 0 8px 24px rgba(23,24,28,.12);
  color: #7a4b00; font-size: 13.5px; line-height: 1.5; visibility: visible;
}
.net-banner[hidden] { display: none; }
.net-banner .retry-btn { height: 30px; min-width: 72px; font-size: 13px; flex-shrink: 0; }
/* 鉴权确认前页面不可见，给一个可见的加载提示，避免弱网下长时间白屏 */
body.auth-pending::before {
  content: '正在加载…'; visibility: visible; position: fixed; left: 0; right: 0; top: 42%;
  text-align: center; color: var(--ink-3); font-size: 14px;
}

/* =============== 顶部导航 =============== */
.site-header {
  background: rgba(244,243,239,.92);
  border-bottom: 1px solid var(--line);
}
.sh-bar {
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 50%;
  background: transparent; flex-shrink: 0; overflow: hidden; display: block;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.03); }
.brand-txt { display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.2; }
.brand-kicker { font-size: 14px; font-weight: 700; letter-spacing: .01em; color: var(--ink-2); }
.brand-name { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }

.tabbar { display: flex; gap: 4px; flex: 1 1 auto; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.tabbar::-webkit-scrollbar { display: none; }
.tab {
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font); font-size: 16.5px; font-weight: 600; color: var(--ink-2);
  padding: 6px 12px; white-space: nowrap; border-radius: 999px;
  transition: color .15s, background .15s;
}
.tab:hover { color: var(--ink); }

.sh-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.search-box {
  display: flex; align-items: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 0 14px; height: 40px; width: 240px;
  transition: border-color .15s, box-shadow .15s;
}
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(75,86,210,.12); }
.search-icon { color: var(--ink-3); flex-shrink: 0; }
.search-box input {
  border: none; outline: none; flex: 1; font-size: 14px; margin-left: 8px;
  background: transparent; color: var(--ink); font-family: var(--font);
}
.sort-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 40px;
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 0 15px; font-size: 13px; color: var(--ink-2); cursor: pointer;
  font-family: var(--font); white-space: nowrap; transition: border-color .15s, color .15s;
}
.sort-btn:hover { border-color: var(--accent); color: var(--ink); }
.sort-btn svg { color: var(--accent); transition: transform .18s; }
.sort-btn.asc svg { transform: scaleY(-1); }
.sh-tagline { display: none; }

/* =============== 账号中心（右上角）=============== */
body.auth-pending { visibility: hidden; }
.acc-widget { position: relative; }
.acc-btn {
  display: flex; align-items: center; gap: 8px; height: 40px;
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 0 12px 0 4px; cursor: pointer; font-family: var(--font);
}
.acc-btn:hover { border-color: var(--accent); }
.acc-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}
.acc-name { font-size: 13px; color: var(--ink-2); max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); padding: 10px; z-index: 40;
}
.acc-menu.hidden { display: none; }
.acc-menu-email { font-size: 12px; color: var(--ink-2); padding: 6px 8px; word-break: break-all; }
.acc-menu-role {
  font-size: 11px; color: var(--accent); background: rgba(75,86,210,.1);
  display: inline-block; padding: 2px 8px; border-radius: 999px; margin: 2px 8px 8px;
}
.acc-menu-item {
  width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  font-size: 13px; color: var(--ink); padding: 8px; border-radius: var(--r-sm);
  font-family: var(--font); transition: background .15s;
}
.acc-menu-item:hover { background: var(--bg); }
@media (max-width: 759px) {
  .acc-name { display: none; }
}

/* =============== 桌面：单行导航 + 下划线 tab =============== */
@media (min-width: 760px) {
  .site-header { position: sticky; top: 0; z-index: 30; }
  .sh-bar { flex-wrap: nowrap; }
  .tabbar { margin-left: 12px; }
  .tab { border-radius: 0; padding: 6px 4px; margin: 0 10px; position: relative; }
  .tab::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 2px;
    background: var(--accent); transform: scaleX(0); transition: transform .18s;
  }
  .tab.active { color: var(--ink); }
  .tab.active::after { transform: scaleX(1); }
}

/* =============== 移动：品牌行 + 横滑 pill 栏目 + 搜索行 =============== */
@media (max-width: 759px) {
  .sh-bar { padding: 12px 16px 10px; gap: 10px; }
  .brand { order: 1; flex: 1 1 auto; }
  .sort-box { display: none !important; }          /* 移动端排序移除以省空间 */
  .sh-tools { order: 3; flex-basis: 100%; }
  .search-box { width: 100%; height: 38px; }
  .tabbar { order: 2; flex-basis: 100%; gap: 8px; padding-bottom: 2px; }
  .tab {
    background: #ecebe6; color: var(--ink-2); border-radius: 999px;
    padding: 7px 15px; font-size: 15px; font-weight: 600;
  }
  .tab.active { background: var(--ink); color: #fff; }
}

/* =============== 分类筛选 chips =============== */
.cat-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 4px; }
.cat-filter[hidden] { display: none; }   /* 修复：hidden 时不再被 display:flex 覆盖 */
.chip {
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  font-size: 13px; padding: 6px 13px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font);
  transition: all .12s;
}
.chip:hover { border-color: var(--ink-3); }
.chip .chip-n { font-family: var(--mono); font-size: 11px; opacity: .55; }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.active .chip-n { opacity: .8; }

.panel { animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* =============== 眉标 / 迷你标签 =============== */
.eyebrow {
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 6px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mini-tag {
  display: inline-block; background: var(--line-2); color: var(--ink-2);
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px; line-height: 1.3;
}

/* =============== 卡片网格 =============== */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 20px; padding-bottom: 40px; }
@media (min-width: 720px) {
  #issue-list.card-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  #issue-list .issue-card.featured { grid-column: 1 / -1; }
  #clue-results.card-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (min-width: 1040px) {
  #clue-results.card-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 往期日报卡片 */
.issue-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.issue-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #dcdad3; }
.ic-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ic-kicker { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.ic-date { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.ic-headline { font-size: 17px; font-weight: 700; line-height: 1.42; color: var(--ink); }
.ic-meta { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ink-3); margin-top: auto; }
.ic-go { color: var(--accent); font-weight: 600; }

/* 头条大卡（桌面首条） */
.issue-card.featured { padding: 30px 32px; gap: 16px; background: linear-gradient(180deg, #fff, #fcfcfb); }
.issue-card.featured .ic-headline { font-size: clamp(22px, 3.2vw, 30px); line-height: 1.28; font-weight: 800; letter-spacing: -0.01em; }
.issue-card.featured .ic-kicker { color: var(--accent); }
.issue-card.featured .ic-meta { font-size: 14px; }

/* 全部线索：信息流卡片 */
.feed-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.feed-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #dcdad3; }
.fc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fc-meta { font-family: var(--mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.fc-title { font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--ink); }
.fc-excerpt {
  font-size: 14px; color: var(--ink-2); line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

/* 追踪线卡片 */
.timeline-list { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; padding-bottom: 40px; }
@media (min-width: 860px) { .timeline-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } }
.timeline-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.tl-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.tl-pin { font-size: 11px; font-weight: 700; color: #fff; background: var(--accent); padding: 2px 9px; border-radius: 999px; letter-spacing: .02em; }
.tl-span { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.tl-name { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--ink); margin-bottom: 10px; }
.tl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tl-steps { border-left: 2px solid var(--line); margin-left: 4px; padding-left: 16px; }
.tl-fold { margin-top: 2px; }
.tl-fold-sum {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--accent); padding: 4px 0;
}
.tl-fold-sum::-webkit-details-marker { display: none; }
.tl-fold-sum::after { content: "▾"; font-size: 11px; }
.tl-fold[open] .tl-fold-sum { color: var(--ink-3); }
.tl-fold[open] .tl-fold-sum::after { content: "▴"; }
.tl-fold[open] .tl-steps { margin-top: 8px; }
.tl-step { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; position: relative; }
.tl-step:active { opacity: .6; }
.tl-dot { position: absolute; left: -22px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--card); }
.tl-date { font-family: var(--mono); font-size: 12px; color: var(--accent); font-weight: 600; flex-shrink: 0; min-width: 42px; padding-top: 2px; }
.tl-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.tl-title { font-size: 14px; color: var(--ink); font-weight: 600; line-height: 1.5; }
.tl-excerpt { font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.timeline-card.pinned { border-color: rgba(75,86,210,.32); box-shadow: 0 1px 2px rgba(75,86,210,.06), var(--shadow-sm); }

/* 每周精选卡片（单列，内部主题磁贴一行 3-4 个）*/
.week-list { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; padding-bottom: 40px; }
.week-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 20px; box-shadow: var(--shadow-sm); min-width: 0; overflow: hidden;
}
.wk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.wk-tag { font-size: 11.5px; font-weight: 700; color: #fff; background: var(--accent); padding: 2px 9px; border-radius: 999px; margin-right: 8px; align-self: center; }
.wk-range { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.wk-meta { font-family: var(--mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }

/* B 版式：分类色顶条磁贴网格；点击 → 就地展开(其余隐藏，仅剩该板块+详情)，再点收起 */
.wk-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.wk-tile {
  border: 1px solid var(--line); border-top: 4px solid var(--cat, var(--accent));
  border-radius: var(--r-md); background: #fff; padding: 11px 13px; min-width: 0;
  transition: transform .12s, box-shadow .12s;
}
.wk-tile:not(.open):hover { transform: translateY(-2px); box-shadow: var(--shadow-md); cursor: pointer; }
.wk-tile-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; cursor: pointer; }
.wk-tcard-cat { font-size: 14px; font-weight: 700; color: var(--ink); }
.wk-tcard-n { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.wk-tcard-pv {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12px; color: var(--ink-3); line-height: 1.55;
}
/* 展开态：该磁贴占满整行，其余隐藏 */
.wk-themes.has-open .wk-tile:not(.open) { display: none; }
.wk-tile.open { grid-column: 1 / -1; background: #fcfbf9; padding: 14px 16px; }
.wk-tile.open .wk-tcard-pv { display: none; }
.wk-tile.open .wk-tile-head { margin-bottom: 10px; }
.wk-tile.open .wk-tile-head::after { content: "收起 ▴"; margin-left: auto; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.wk-body { }
.wk-digest { font-size: 14px; color: var(--ink-2); line-height: 1.85; margin-bottom: 12px; }
.wk-digest b { color: var(--ink); font-weight: 700; }
.wk-refs { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.wk-ref { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.wk-ref:hover { color: var(--accent); }
.wk-ref-date { font-family: var(--mono); font-size: 11.5px; color: var(--accent); margin-right: 6px; }
.wk-days { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wk-days-label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.wk-day {
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  border: 1px solid var(--line); background: var(--bg);
  padding: 3px 9px; border-radius: 999px; transition: all .12s;
}
.wk-day:hover { border-color: var(--accent); color: var(--accent); }

/* =========================================================================
   详情页
   ========================================================================= */
body.issue-page { background: var(--bg); }
.issue-topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(244,243,239,.92);
  padding: 12px 20px; border-bottom: 1px solid var(--line);
}
.back-link { color: var(--ink); font-size: 14px; font-weight: 600; }
.back-link:hover { color: var(--accent); }
.topbar-date { font-family: var(--mono); color: var(--ink-3); font-size: 12px; margin-left: 2em; }
/* 转发按钮 + 账号中心统一分组靠右，避免各自 margin-left:auto 互相打架导致位置漂移 */
.topbar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.issue-topbar .acc-btn { height: 34px; }

/* PC 端顶栏微调（不影响移动端）：往期列表字号+1、左组右移2字 */
@media (min-width: 760px) {
  .issue-topbar { padding-left: calc(20px + 2em); }
  .issue-topbar .back-link { font-size: 15px; }
}

.issue-container { max-width: 760px; padding-top: 30px; }
.issue-head { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.issue-head h1 { color: var(--ink); font-size: clamp(26px, 6vw, 36px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.12; }
.issue-date { font-family: var(--mono); font-size: 13px; color: var(--ink-2); margin-top: 12px; }
.issue-stats { font-size: 13px; color: var(--ink-3); margin-top: 6px; line-height: 1.6; }
.head-divider { display: none; }

/* 手机端：标题「信息选题参考」与吸顶栏拉开约 1-2 个字距离 */
@media (max-width: 759px) {
  .issue-head { margin-top: 24px; }
}

/* 深链定位高亮（从追踪线/全部线索点进来的那条线索） */
mark.q-hl { background: #ffe58a; color: inherit; border-radius: 2px; padding: 0 1px; }
.clue-card.clue-highlight { animation: clueFlash 2.6s ease; }
@keyframes clueFlash {
  0% { box-shadow: 0 0 0 3px rgba(75,86,210,.55); border-color: var(--accent); }
  60% { box-shadow: 0 0 0 3px rgba(75,86,210,.35); border-color: var(--accent); }
  100% { box-shadow: var(--shadow-sm); border-color: var(--line); }
}

.clue-list { padding-top: 22px; padding-bottom: 30px; display: flex; flex-direction: column; gap: 16px; }
.clue-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 24px 20px; box-shadow: var(--shadow-sm);
  scroll-margin-top: 72px;   /* 深链跳转时为吸顶栏留出空间，避免被遮挡 */
}
.clue-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.cat-badge {
  display: inline-block; color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .02em; padding: 3px 10px; border-radius: 999px; line-height: 1.5;
}

/* ===== 卡片头部 · 版式C：左侧分类色竖条 + 放大彩色序号 + 标题 + 紧贴标题的分类标签 ===== */
.clue-card.cv-c { padding-left: 24px; }
.cv-c .clue-head { align-items: flex-start; gap: 12px; position: relative; padding-left: 16px; }
.cv-c .clue-bar {
  position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 3px;
  background: var(--cat, var(--accent));
}
.cv-c .clue-no {
  flex-shrink: 0; font-family: var(--mono); font-weight: 800;
  font-size: 30px; line-height: 1; letter-spacing: -0.02em;
  padding-top: 1px;
}
.cv-c .clue-titlewrap { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.cv-c .clue-title {
  font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.5;
}
/* ===== 分类标签 · 无框式（2026-09-16 改版）=====================================
   改版原因：15 大类的类名普遍很长（最长「智慧城市、智能交通与数字公共服务」
   16 字，加上小类「标准与技术组织（ITU/ICANN/ISO）」共 31 字），旧版是
   「一个胶囊色块 + 小类嵌在里面」，手机上一折行，背景就要把两行整个包住 ——
   撑出一个又宽又空的大色块，里面还套个半透明小块，非常难看。

   现在不再给标签任何背景：**分类色由卡片左侧那根 4px 竖条（.clue-bar）和
   彩色序号（.clue-no）承担**，它们本来就存在、颜色本来就是分类色。
   标签本身只保留「分类色粗体大类 + 灰色小类」。

   由此得到的三个好处：
     ① 类名再长也不可能难看 —— 没有色块要撑，文字自然折行即可；
     ② 同一个颜色不再重复表达 —— 旧版是「左竖条 + 序号 + 胶囊 + 小类块」
        四处同色，色彩噪音过高，反而压住了标题；
     ③ 与列表页统一 —— index.js 的 .eyebrow 早就是「彩色圆点 + 彩字」的
        无框风格，此前只有详情页还在用胶囊，两个页面语言不一致。

   刻意**不**在标签里再加一根小竖条：卡片左边已经有 4px 竖条了，再加就是
   两根竖条并列、同色重复，更冗余（PC 端 760px 下尤其明显）。
   ============================================================================ */
.cv-c .clue-cat {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin-top: 8px; max-width: 100%;
}
.cv-c .clue-cat-name {
  font-size: 12.5px; font-weight: 800; letter-spacing: .01em;
  line-height: 1.45; word-break: break-word;
}
.cv-c .clue-cat .clue-subcat {
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  line-height: 1.45; padding-left: 8px; border-left: 1px solid var(--line);
  word-break: break-word;
}
@media (max-width: 520px) {
  .cv-c .clue-no { font-size: 26px; }
  .cv-c .clue-cat { gap: 3px 8px; }
  .cv-c .clue-cat-name { font-size: 12px; }
  /* 手机窄屏下小类通常会折到第二行，此时 border-left 会变成「第二行行首
     孤零零一条竖线」，看着像误排 —— 去掉，靠颜色差与 gap 区分就够了。
     PC 端一行放得下，分隔线是有效的，故只在手机断点去掉。 */
  .cv-c .clue-cat .clue-subcat {
    font-size: 11px; padding-left: 0; border-left: none;
  }
}

/* 文本转发弹窗内的文本框 */
.text-share-area {
  width: 100%; min-height: 46vh; max-height: 60vh; resize: vertical;
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  font-size: 14px; line-height: 1.9; color: var(--ink); background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  white-space: pre-wrap; box-sizing: border-box;
}
@media (max-width: 520px) {
  .text-share-area { min-height: 40vh; font-size: 13.5px; }
}

.clue-summary { font-size: 15px; color: var(--ink); line-height: 1.8; margin-bottom: 14px; }
.clue-row { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: flex-start; }
.clue-label { flex-shrink: 0; color: var(--ink-2); font-size: 13px; font-weight: 700; margin-right: 8px; line-height: 24px; }
.topic-tags { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.topic-tag { display: inline-block; color: #fff; font-weight: 700; font-size: 12.5px; padding: 3px 11px; border-radius: 999px; line-height: 1.4; white-space: nowrap; }
/* 【手机端兜底】单个课题标签若本身就比屏幕宽（15 大类体系下出现过
   「标准与技术组织（ITU/ICANN/ISO）」这种 17 字标签），nowrap 会让它溢出
   卡片。容器已是 flex-wrap，这里只需允许**标签内部**折行。桌面端不变。 */
@media (max-width: 520px) {
  .topic-tag { white-space: normal; word-break: break-word; max-width: 100%; }
}
.source-block { margin-top: 14px; display: flex; align-items: flex-start; }
.source-list { flex: 1; font-size: 13.5px; line-height: 1.9; }
.source-link { color: var(--accent); word-break: break-all; }
.source-link:active { opacity: .6; }
.source-sep { color: var(--ink-3); }
.source-nolink { color: var(--ink-2); }

/* ===== 材料文章入口按钮（卡片底部，跳转独立文章页）===== */
.art-entry-row { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.art-entry-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--cat, var(--accent)); color: #fff;
  font-size: 13.5px; font-weight: 700; transition: opacity .15s, transform .1s;
}
.art-entry-btn:hover { opacity: .9; }
.art-entry-btn:active { transform: scale(.98); }
.art-entry-btn svg { flex-shrink: 0; }
.art-entry-arrow { font-weight: 700; }
.art-entry-none { font-size: 13px; color: var(--ink-3); }

.download-block { margin-top: 20px; padding: 12px 16px; background: #f0f1fb; border-radius: var(--r-md); font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.dl-label { color: var(--ink-2); font-weight: 700; white-space: nowrap; }
.dl-link { color: var(--accent); font-weight: 600; word-break: break-all; }

/* =========================================================================
   材料文章独立页 article.html
   ========================================================================= */
.article-container { max-width: 720px; padding-top: 30px; padding-bottom: 60px; }
.art-doc { }
.art-meta { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); margin-bottom: 10px; letter-spacing: .01em; }
.art-doc-title {
  font-size: clamp(24px, 5vw, 32px); font-weight: 800; color: var(--ink);
  line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 14px;
}
.art-note-hint {
  font-size: 12.5px; color: var(--ink-3); background: #f6f5f1;
  border-left: 3px solid var(--line); padding: 8px 12px; border-radius: 0 6px 6px 0;
  line-height: 1.7; margin-bottom: 24px;
}
.art-doc-body { }
.art-doc-body .art-h2 {
  font-size: 18px; font-weight: 800; color: var(--ink);
  margin: 26px 0 10px; line-height: 1.5;
}
.art-doc-body .art-p {
  font-size: 16px; color: var(--ink); line-height: 2; margin-bottom: 14px;
  text-indent: 2em; text-align: justify;
}
.art-fn-ref { font-size: .7em; }
.art-fn-ref a { color: var(--accent); text-decoration: none; }
.art-fn-block { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); }
.art-fn-title { font-size: 14px; font-weight: 800; color: var(--ink-2); margin-bottom: 10px; }
.art-fn-list { padding-left: 22px; }
.art-fn-item { font-size: 13px; color: var(--ink-2); line-height: 1.85; margin-bottom: 4px; word-break: break-all; }
.art-fn-item a { color: var(--ink-2); }
.art-fn-item a:hover { color: var(--accent); }
.art-fn-item:target { background: #ffe58a; border-radius: 3px; }
@media (max-width: 520px) {
  .art-doc-body .art-p { font-size: 15.5px; line-height: 1.95; }
}

/* =============== 材料文章（旧·卡片内嵌展开，已停用，保留兼容）=============== */
.art-toggle-row { margin-top: 16px; }
.art-toggle-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--bg); color: var(--accent);
  font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
  cursor: pointer; font-family: var(--font); transition: all .15s;
}
.art-toggle-btn:hover:not(:disabled) { border-color: var(--accent); background: #f0f1fb; }
.art-toggle-btn:disabled { color: var(--ink-3); cursor: default; opacity: .6; }
.art-toggle-btn .art-toggle-arrow { font-size: 11px; transition: transform .18s; }
.art-toggle-btn.open .art-toggle-arrow { transform: rotate(180deg); }

.art-wrap { margin-top: 18px; }
.art-divider { border-top: 1px dashed var(--line); margin-bottom: 18px; }
.art-title {
  font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1.4;
  text-align: center; margin-bottom: 18px; letter-spacing: -0.01em;
}
.art-para { margin-bottom: 14px; }
.art-heading { font-size: 15.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.art-body { font-size: 14.5px; color: var(--ink); line-height: 1.95; text-indent: 2em; text-align: justify; }
.art-fn-ref a { color: var(--accent); text-decoration: none; }
.art-fn-list { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.art-fn-item { font-size: 12.5px; color: var(--ink-2); line-height: 1.8; margin-left: 18px; word-break: break-all; }
.art-fn-item a { color: var(--ink-2); }
.art-fn-item a:hover { color: var(--accent); }
.art-fn-item:target { background: #ffe58a; }
.art-empty { font-size: 13px; color: var(--ink-3); padding: 10px 0; text-align: center; }

/* =============== 分享按钮 + 弹窗 =============== */
.share-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; background: var(--accent); border: none; border-radius: 999px;
  color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; white-space: nowrap; flex-shrink: 0;
}
.share-btn:hover { background: var(--accent-deep); }
.share-btn:active { transform: scale(.97); }
.share-btn svg { flex-shrink: 0; }
@media (max-width: 520px) { .share-btn { padding: 6px 11px; font-size: 12.5px; } .share-btn svg { width: 16px; height: 16px; } }

/* =============== 转发下拉（方案A：移动端顶栏不再被挤爆） =============== */
.share-dd { position: relative; flex-shrink: 0; }
.share-dd-caret { font-size: 10px; opacity: .85; margin-left: 1px; }
.share-dd-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 208px; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(23,24,28,.16);
  display: none; z-index: 60;
}
.share-dd.open .share-dd-menu { display: block; animation: ddIn .16s ease; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.share-dd-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 11px; border: none; border-radius: 8px; background: transparent;
  font-family: inherit; font-size: 14px; color: var(--ink);
  text-align: left; cursor: pointer;
}
.share-dd-item:hover, .share-dd-item:focus-visible { background: var(--bg); outline: none; }
.share-dd-item:active { background: var(--line-2, #eee); }
.share-dd-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); }
.share-dd-txt { display: block; line-height: 1.35; }
.share-dd-txt small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; font-weight: 400; }

/* 扫码访客的登录入口：小胶囊，紧跟「往期列表」放左侧 */
.login-hint {
  display: inline-block; margin-left: 10px; padding: 3px 10px;
  font-size: 11.5px; line-height: 1.6; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px;
  background: #fff; white-space: nowrap; text-decoration: none;
}
.login-hint:hover { background: var(--accent); color: #fff; }

@media (max-width: 520px) {
  /* 手机上日期让位，保证「往期列表 + 登录入口 + 转发 + 头像」都能排开 */
  .issue-topbar .topbar-date { display: none; }
  .share-dd-menu { min-width: 190px; }
  .share-dd-item { font-size: 13.5px; padding: 11px 10px; }
  .login-hint { margin-left: 8px; font-size: 11px; padding: 3px 8px; }
}

.share-modal { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(23,24,28,.55); justify-content: center; align-items: center; padding: 20px; }
.share-modal.active { display: flex; }
.share-modal-content { background: #fff; border-radius: var(--r-lg); max-width: 420px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; animation: modalIn .25s ease; }
@keyframes modalIn { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: none; } }
.share-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.share-modal-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.share-modal-close { background: none; border: none; color: var(--ink-3); font-size: 22px; cursor: pointer; line-height: 1; padding: 4px; }
.share-modal-close:hover { color: var(--ink); }
.share-modal-body { padding: 20px; text-align: center; }
.share-preview-wrap { display: inline-block; border-radius: var(--r-md); box-shadow: 0 4px 24px rgba(0,0,0,.14); overflow: hidden; margin-bottom: 16px; background: #f8f8f8; }
.share-preview-wrap img { display: block; max-width: 100%; height: auto; }
.share-tip { font-size: 13px; color: var(--ink-2); margin: 0 0 14px; line-height: 1.6; }
.share-tip b { color: var(--accent); }
.share-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.share-action-btn { display: flex; align-items: center; gap: 6px; padding: 10px 18px; border: none; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s; }
.share-save-btn { background: var(--accent); color: #fff; }
.share-save-btn:hover { background: var(--accent-deep); }
.share-copy-btn { background: var(--line-2); color: var(--ink-2); }
.share-copy-btn:hover { background: var(--line); }
.share-loading { display: inline-flex; align-items: center; gap: 8px; padding: 40px 30px; color: var(--ink-3); font-size: 14px; }
.share-spinner { width: 20px; height: 20px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =============== 页脚 =============== */
.site-footer { background: transparent; padding: 8px 20px 40px; }
.disclaimer { max-width: 1120px; margin: 0 auto; font-size: 12px; color: var(--ink-3); line-height: 1.8; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; }
.disclaimer strong { color: var(--ink-2); }
body.issue-page .disclaimer { max-width: 760px; }
/* PC 端：底部免责声明横向比上方内容更宽 */
@media (min-width: 760px) {
  .site-footer { padding: 8px 8px 40px; }
  .disclaimer { max-width: 1200px; }
  body.issue-page .disclaimer { max-width: 880px; }
}

/* =============== 移动端信息密度 =============== */
@media (max-width: 520px) {
  .container { padding: 0 16px; }
  .card-grid { gap: 12px; margin-top: 16px; }
  .issue-card, .feed-card { padding: 16px 17px; border-radius: var(--r-md); }
  .ic-headline, .fc-title { font-size: 16.5px; }
  .clue-card { padding: 18px 18px 16px; }
  .clue-title { font-size: 17px; }
  .issue-topbar { padding: 11px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =============== 【WIC 版专属】每周报告（体例对照秘书处《动态》周报）=============== */
.wr-box { margin-top: 18px; }
.wr-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px 14px; box-shadow: var(--shadow-sm);
}
.wr-title { font-weight: 700; font-size: 15px; color: var(--ink); }
.wr-title::before {
  content: ""; display: inline-block; width: 3px; height: 14px;
  background: var(--accent); border-radius: 2px; margin-right: 8px;
  vertical-align: -2px;
}
.wr-select {
  flex: 1 1 200px; min-width: 160px; max-width: 320px;
  padding: 7px 10px; font: inherit; font-size: 14px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
}
.wr-btn {
  padding: 7px 14px; font: inherit; font-size: 14px; cursor: pointer;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: background .15s, border-color .15s;
}
.wr-btn:hover { background: #faf9f6; border-color: var(--ink-3); }
.wr-btn-primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.wr-btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

/* 报告正文：模拟《动态》版式——板块居中大标题、条目黑体、正文首行缩进两字 */
.wr-doc {
  margin-top: 12px; padding: 26px 30px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
.wr-head-meta { font-size: 15px; color: var(--ink-2); margin-bottom: 20px; }
.wr-section { margin-bottom: 26px; }
.wr-sec-name {
  text-align: center; font-size: 20px; font-weight: 700;
  color: var(--ink); margin: 18px 0 16px;
}
.wr-item { margin-bottom: 18px; }
.wr-item-title {
  font-size: 16px; font-weight: 700; color: var(--ink);
  margin: 0 0 8px; text-indent: 2em; line-height: 1.7;
}
.wr-p {
  font-size: 15.5px; line-height: 1.95; color: var(--ink);
  margin: 0 0 6px; text-indent: 2em; text-align: justify;
}
.wr-ref { font-size: 13px; color: var(--accent); text-decoration: none; margin-left: 2em; }
.wr-ref:hover { text-decoration: underline; }
.wr-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

@media (max-width: 520px) {
  .wr-doc { padding: 18px 16px; }
  .wr-sec-name { font-size: 18px; }
  .wr-p { font-size: 15px; line-height: 1.85; }
  .wr-select { max-width: none; }
}

/* =============== 【反垄断版专属】专家/机构观点汇总 =============== */
.op-block { margin-top: 22px; }
.op-block-t {
  font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 10px;
  padding-left: 10px; border-left: 3px solid var(--accent); line-height: 1.3;
}
.op-item {
  padding: 14px 16px; margin-bottom: 12px;
  background: #faf9f6; border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.op-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.op-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
}
.op-who { font-size: 15px; font-weight: 700; color: var(--ink); }
.op-aff { font-size: 12.5px; color: var(--ink-2); }
.op-stance {
  font-size: 12px; color: var(--accent-deep);
  background: rgba(75, 86, 210, .1); border-radius: 4px; padding: 2px 8px;
}
/* 观点发表时间：弱化显示（次数要多，不能抢视觉） */
.op-date {
  font-size: 12px; color: var(--ink-3, var(--ink-2));
  font-variant-numeric: tabular-nums; margin-left: auto;
}
.op-text {
  font-size: 15.5px; line-height: 1.9; color: var(--ink);
  margin: 0; text-align: justify;
}
@media (max-width: 520px) {
  .op-item { padding: 12px 13px; }
  .op-text { font-size: 15px; line-height: 1.85; }
}

/* ===== 案件追踪（反垄断版专属，替代通用追踪线）===============================
   两种视图：
     · cs-card  方案 B 阶段进度条 —— 默认。法务真正要的是「这案子到哪一步、
                下一步是什么」，这是语义聚类的追踪线完全给不了的。
     · cs-table 方案 D 专业表格 —— 信息密度最高，便于扫描与后续导出。
   配色沿用现有 --cat-* 体系与卡片圆角，不引入新的视觉语言。
   ========================================================================== */
.cs-bar {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  margin-bottom: 14px;
}
.cs-views, .cs-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-filters { flex: 1; }
.cs-chip {
  border: 1px solid var(--line); background: #fafaf8; color: var(--ink-2);
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer;
  font-family: inherit; line-height: 1.5; transition: all .15s;
}
.cs-chip:hover { border-color: var(--ink-3); }
.cs-chip.on {
  background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 700;
}
.cs-views .cs-chip.on { background: #4b56d2; border-color: #4b56d2; }

/* ---- 案件卡片（方案 B）---- */
.cs-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 17px 19px; margin-bottom: 13px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.cs-top {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px;
}
.cs-name { font-size: 16.5px; font-weight: 700; flex: 1; min-width: 180px; }
.cs-meta { font-size: 12px; color: var(--ink-3); margin-bottom: 14px; }
.cs-juris {
  display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 7px;
  border-radius: 4px; background: #eef0f3; color: #5b636e; white-space: nowrap;
}
.cs-badge {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 5px; line-height: 1.5; white-space: nowrap;
}
.cs-ok     { background: #e6f6ec; color: #166f3c; }
.cs-warn   { background: #fff4e0; color: #9a5b08; }
.cs-danger { background: #fdeaea; color: #a5251c; }
.cs-info   { background: #e8f0fc; color: #1b4fa8; }

/* ---- 案件总进度条（A 方案）：整体进度一眼可见 ---- */
.cs-pbar {
  height: 4px; background: #edebe7; border-radius: 2px;
  margin: 12px 0 3px; overflow: hidden;
}
.cs-pfill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #1f9d57, #48b97a);
}
.cs-pinfo {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; font-size: 11.5px; color: var(--ink-3); margin-bottom: 11px;
}
.cs-pinfo b { color: #9a5b08; font-weight: 700; font-size: 12.5px; }

/* ---- 阶段进度条（变体 2：圆点连线 + 文字，自动折行）----
   【为什么改成折行而不是横向滚动】
   原来是 overflow-x:auto 的单行横滚，配合两列网格（每列约 460px），
   而 92 个案件里有 40 个是 8 步链，带文字需要 660px 以上 ——
   结果是内容溢出屏幕、必须左右拖动才能看到后面的阶段，
   在手机上几乎不可用。
   改为 flex-wrap:wrap 之后：宽屏一行完整展开，窄屏与手机自动折行，
   任何屏宽都不会横向溢出，也不再需要拖动。
   配合下面 .timeline-list.cs-mode 的单列布局，8 步在 PC 上一行放得下。 */
.cs-steps {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 0; margin-bottom: 4px;
}
.cs-step { display: flex; align-items: center; flex-shrink: 0; }
.cs-dot {
  width: 19px; height: 19px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 10px;
  font-weight: 800; flex-shrink: 0;
}
.cs-dot.done { background: #1f9d57; color: #fff; }
.cs-dot.cur  { background: #d97706; color: #fff; box-shadow: 0 0 0 3.5px #fdf0dc; }
.cs-dot.todo { background: #e4e1db; color: #fff; }
.cs-lbl { font-size: 11.5px; margin-left: 5px; white-space: nowrap; }
.cs-lbl.done { color: var(--ink-2); }
.cs-lbl.cur  { color: #9a5b08; font-weight: 800; }
.cs-lbl.todo { color: var(--ink-3); }
/* 连接线压短到 14px：折行时行尾残留的线头更不明显 */
.cs-line {
  width: 14px; height: 2px; background: #e4e1db;
  margin: 0 5px 0 6px; flex-shrink: 0; border-radius: 1px;
}
.cs-line.done { background: #1f9d57; }
.cs-next {
  font-size: 12.5px; color: #9a5b08; background: #fffbf2;
  border-radius: 8px; padding: 7px 11px; margin-top: 10px;
}

/* ==========================================================================
   案件追踪：单列布局 + 移动端适配
   ==========================================================================
   案件卡片原本复用 .timeline-list 的两列网格（≥860px 时 1fr 1fr），
   每列仅约 460px，而 8 步阶段链带文字需要 660px 以上 —— 这是内容
   超出屏幕的直接原因。
   案件追踪改用**单列宽卡片**：横向空间全部留给阶段链，8 步在 PC 上
   一行即可完整展开；窄屏由 .cs-steps 的 flex-wrap 自动折行兜住。
   用 .cs-mode 限定作用域，不影响综合版与 WIC 版的追踪线两列布局。 */
.timeline-list.cs-mode { display: flex; flex-direction: column; gap: 13px; }
@media (min-width: 860px) {
  .timeline-list.cs-mode { display: flex; grid-template-columns: none; }
}

@media (max-width: 700px) {
  .cs-card { padding: 14px 15px; border-radius: 12px; }
  .cs-name { font-size: 15px; min-width: 100%; }
  .cs-meta { font-size: 11.5px; margin-bottom: 12px; }
  /* 手机上阶段必然折行，行距略放大以免视觉粘连 */
  .cs-steps { gap: 7px 0; }
  .cs-dot { width: 17px; height: 17px; font-size: 9.5px; }
  .cs-lbl { font-size: 11px; margin-left: 4px; }
  .cs-line { width: 9px; margin: 0 4px; }
  .cs-next { font-size: 12px; padding: 6px 10px; }
  /* 筛选器在手机上占满整行，横向滑动查看 */
  .cs-bar { gap: 8px 10px; }
  .cs-chip { padding: 4px 10px; font-size: 12px; }
  .cs-pinfo { font-size: 11px; }
}

/* 表格视图（C 方案）的完整样式定义在下方「表格视图（方案 D）」一节，
   那里用 table.cs-table 选择器、优先级更高，此处不再重复定义，
   只补一个案件专用的迷你阶段点阵（表格里把 8 步压成一列用）。 */
.cs-mini { display: inline-flex; align-items: center; gap: 2.5px; vertical-align: middle; }
.cs-mini i {
  width: 6.5px; height: 6.5px; border-radius: 50%; background: #e4e1db;
  display: block;
}
.cs-mini i.done { background: #1f9d57; }
.cs-mini i.cur { background: #d97706; box-shadow: 0 0 0 2px #fdf0dc; }

/* ---- 案件时间线（折叠）---- */
.cs-fold { margin-top: 12px; }
.cs-fold-sum {
  cursor: pointer; font-size: 12.5px; color: var(--ink-2); font-weight: 600;
  padding: 6px 0; list-style: none;
}
.cs-fold-sum::-webkit-details-marker { display: none; }
.cs-fold-sum::before { content: '▸ '; color: var(--ink-3); }
.cs-fold[open] .cs-fold-sum::before { content: '▾ '; }
.cs-trunc {
  font-size: 11.5px; color: var(--ink-3); background: #fafaf8;
  border-radius: 6px; padding: 6px 9px; margin: 6px 0 10px;
}
.cs-tl { position: relative; padding-left: 19px; margin-top: 6px; }
.cs-tl::before {
  content: ''; position: absolute; left: 4px; top: 6px; bottom: 8px;
  width: 2px; background: var(--line);
}
.cs-ev { position: relative; padding-bottom: 13px; }
.cs-ev:last-child { padding-bottom: 0; }
.cs-ev::before {
  content: ''; position: absolute; left: -19px; top: 6px; width: 10px; height: 10px;
  border-radius: 50%; background: #4b56d2; box-shadow: 0 0 0 3px #fff;
}
.cs-ev.old::before { background: var(--line); }
.cs-ev-d { font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--ink-3); }
.cs-ev-t {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--ink);
  text-decoration: none; margin: 2px 0 3px;
}
a.cs-ev-t:hover { color: #4b56d2; text-decoration: underline; }
.cs-ev-s { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.cs-src { font-size: 11.5px; color: var(--ink-3); }

/* ---- 表格视图（方案 D）---- */
.cs-table-wrap {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  overflow-x: auto; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
table.cs-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 780px; }
table.cs-table th {
  text-align: left; padding: 10px 11px; background: #fafaf8; color: var(--ink-2);
  font-weight: 600; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.cs-table td {
  padding: 10px 11px; border-bottom: 1px solid var(--line-2); vertical-align: top;
}
table.cs-table tr:last-child td { border-bottom: none; }
.cs-td-name { font-weight: 700; min-width: 140px; }
.cs-td-step { white-space: nowrap; color: var(--ink-2); }
.cs-td-latest { color: var(--ink-2); min-width: 200px; }
.cs-td-date { font-family: ui-monospace, monospace; color: var(--ink-3); white-space: nowrap; }
.cs-n {
  display: inline-block; font-family: ui-monospace, monospace; font-size: 11px;
  background: #eef0f3; color: var(--ink-2); border-radius: 4px; padding: 1px 6px;
  font-weight: 700;
}

@media (max-width: 520px) {
  .cs-card { padding: 15px 15px; }
  .cs-name { font-size: 15.5px; }
  .cs-bar { gap: 8px; }
  .cs-chip { padding: 3px 10px; font-size: 12px; }
  /* 手机上表格必须横滑，这里给个视觉提示，避免用户以为内容被截断 */
  .cs-table-wrap { position: relative; }
  .cs-table-wrap::after {
    content: '← 左右滑动查看更多 →'; display: block; text-align: center;
    font-size: 11px; color: var(--ink-3); padding: 6px 0;
    border-top: 1px solid var(--line-2);
  }
}