/* 用户端周报:与控制台同一套设计语言,但信息密度更低、更可读 —— 给同事看的。 */

:root {
  color-scheme: light dark;
  --bg: #fbfbfa;
  --panel: #ffffff;
  --border: #e3e2df;
  --text: #1b1b19;
  --muted: #6b6a66;
  --accent: #2f6f4f;
  --accent-soft: #eaf3ee;
  --warn: #9a5b12;
  --chip: #f0efec;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16171a;
    --panel: #1e2024;
    --border: #303338;
    --text: #e8e8e6;
    --muted: #9b9a96;
    --accent: #6fbf8f;
    --accent-soft: #24352c;
    --warn: #d99a4e;
    --chip: #26282d;
  }
}

* { box-sizing: border-box; }

/* 作者样式的 display 会压过 hidden 属性的 UA 规则(.gate 是 flex),
   必须显式让 hidden 永远赢 —— 否则口令门关不上。 */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 1.5rem clamp(1rem, 4vw, 3rem) 4rem;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.7 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

h1 { font-size: 1.35rem; margin: 0; }
.muted { color: var(--muted); font-size: 0.88rem; }

/* ── 口令门 ── */
.gate {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gate-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem 2.5rem;
  width: min(22rem, 90vw);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  text-align: center;
}
.gate-card input {
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
}
.gate-card button {
  padding: 0.55rem;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}
.gate-error { color: var(--warn); margin: 0; font-size: 0.85rem; }

/* ── 头部 ── */
header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}
.subtitle { color: var(--muted); font-size: 0.88rem; margin: 0.35rem 0 0; }
.header-actions { display: flex; gap: 0.6rem; align-items: center; }
select {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
}
button.ghost {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
button.ghost:hover { color: var(--text); }

/* ── 布局:侧边筛选 + 卡片流 ── */
.layout {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 2rem;
  align-items: start;
}
.filters {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* 窄屏:单列,筛选栏跟着内容滚走。
 *
 * ⚠️ 这一段必须留在 .layout 与 .filters **之后**。媒体查询不增加特异性,
 * 而这里和上面用的都是 `.filters` —— 同权重时后写的赢。
 * 2026-08-26 之前它写在两条基础规则中间,后果是压得住写在它前面的 .layout
 * (单列确实生效了),却压不住写在它后面的 .filters:手机上筛选栏照旧
 * position: sticky,384px 高、占满 47% 屏幕并钉在顶部,卡片从它底下穿过去,
 * 标题和正文被 chips 压得没法读。看着像布局没做响应式,其实是层叠顺序。 */
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  .filters { position: static; }
}
.filters h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--chip);
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
  user-select: none;
}
.chip.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.chip .count { color: var(--muted); margin-left: 0.25rem; font-size: 0.75rem; }

/* ── 事件卡 ── */
.cards { display: flex; flex-direction: column; gap: 1.2rem; }
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem 1.5rem;
}
.card-head { display: flex; gap: 0.8rem; align-items: baseline; }
.card-rank {
  flex: none;
  font-size: 0.8rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.05rem 0.45rem;
}
.card-title { font-size: 1.05rem; font-weight: 600; margin: 0; }
.card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0; }
.tag {
  font-size: 0.78rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--chip);
  color: var(--muted);
}
/* 事件类型标签。争议单独用红,其余四类用可区分但不抢眼的色 ——
   标签是给人扫一眼归类的,不该比标题更响。
   lane-* 保留:冻结的历史快照里没有细标签,照旧按车道上色。 */
.tag.topic-controversy,
.tag.lane-controversy { background: #f6ecec; color: #a02c2c; }
.tag.topic-launch,
.tag.lane-product { background: var(--accent-soft); color: var(--accent); }
.tag.topic-tech { background: #eceff8; color: #3a4f8a; }
.tag.topic-market { background: #eaf3ec; color: #2f6b41; }
.tag.topic-company { background: #f4eff8; color: #6b4a8a; }
.tag.topic-policy { background: #f8f2e8; color: #8a5f2a; }
.tag.topic-adas { background: #e8f4f6; color: #1f6b78; }
/* 用户自定义板块统一用一个中性色 —— 颜色不开放自定义,免得周报变调色盘 */
.tag.topic-custom { background: #eef0e8; color: #5c6b2f; }
@media (prefers-color-scheme: dark) {
  .tag.topic-controversy,
  .tag.lane-controversy { background: #3a2727; color: #e07a7a; }
  .tag.topic-tech { background: #262b3a; color: #8fa4dd; }
  .tag.topic-market { background: #24332a; color: #79bd90; }
  .tag.topic-company { background: #302840; color: #b192d8; }
  .tag.topic-policy { background: #3a3327; color: #d4a869; }
  .tag.topic-adas { background: #223438; color: #6fc3d2; }
  .tag.topic-custom { background: #2e3226; color: #a9bd6f; }
}

.card section { margin-top: 0.9rem; }
.card section h3 {
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.3rem;
}
.card section p { margin: 0; }
.cite {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9em;
  cursor: pointer;
}
.pending { color: var(--muted); font-style: italic; }

/* ── 引用列表 ── */
details.sources { margin-top: 0.9rem; }
details.sources summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.85rem;
}
.sources ol { margin: 0.5rem 0 0; padding-left: 0; list-style: none; }
.sources li {
  font-size: 0.85rem;
  color: var(--muted);
  padding: 0.15rem 0;
}
.sources li a { color: var(--text); text-decoration: none; }
.sources li a:hover { text-decoration: underline; }
.sources .src-meta { margin-left: 0.4rem; font-size: 0.78rem; }

footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* 当前视角。跟标题并排,一眼能看见自己进的是哪个口令。 */
.persona-badge {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.12em 0.6em;
  border-radius: 999px;
  font-size: 0.5em;
  vertical-align: middle;
  background: var(--accent, #2f6f4f);
  color: #fff;
  font-weight: 600;
}

/* ── 周报 / 新闻 标签切换 ── */
.tabs { display: flex; justify-content: center; gap: 0.5rem; margin: 1rem 0; }
.tab {
  padding: 0.35rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.92rem;
  cursor: pointer;
}
.tab.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* ── 新闻卡片流 ── */
/* 整列居中;卡内文字仍左对齐 —— 居中的正文没法读 */
#news-view { max-width: 46rem; margin: 0 auto; }
#news-chips { margin-bottom: 0.8rem; justify-content: center; }
#news-status { text-align: center; }
.news-list { display: flex; flex-direction: column; gap: 0.8rem; }
.news-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  text-decoration: none;
  color: var(--text);
}
.news-card:hover { border-color: var(--accent); }
.news-meta {
  display: flex; gap: 0.6rem; align-items: baseline;
  font-size: 0.8rem; color: var(--muted);
}
/* 平台徽标。**底色是中性灰**,不是主题绿 —— 后端将来加一个新源时,
   它没有品牌色规则,落到这条基线上;若基线用主题色,新源会顶着腾讯的绿
   冒出来,看着像"已经配好了"。中性灰一眼能看出"这个还没上色"。 */
.news-source {
  background: var(--chip);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.05rem 0.6rem;
  white-space: nowrap;
}
.news-title { font-size: 1rem; font-weight: 600; margin: 0.35rem 0 0.25rem; }
.news-preview {
  margin: 0; font-size: 0.86rem; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-foot { margin-top: 1rem; text-align: center; }
.more {
  padding: 0.4rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.more:disabled { color: var(--muted); cursor: default; }

/* ── 平台品牌色 ──────────────────────────────────────────────────
   色号取自各站官网源码(2026-08-25 抓取核对):
     车质网    #007cc2  导航条底色 z_nav_b
     盖世汽车  #00568f  页尾区块底色 .part(其 #007bcd 是链接悬停色,
                        与车质网的蓝几乎同色,分不开,故取更深的墨蓝)
     车东西    #333     全站文字灰黑,站点本身无强品牌色
     搜狐汽车  #fdd000  搜狐标志黄
     腾讯新闻  #00c378  取其绿系(站内主色其实是蓝 #37f,但已有两家蓝,
                        且用户点名要绿)
     汽车之家  #d60000  站内强调红(其 #3b5998 蓝与前两家撞色,故取红)
     第一电动  #ff6600  全站橙 #f60
     流通协会  紫       站内是蓝 #296ecd,与前两家撞色,自选紫区分
   写死的是**颜色**不是平台清单:清单仍由接口下发。没配色的新源
   落到上面 .news-source 的中性灰基线,不会消失也不会冒充别人的颜色。
   浅深两套配色全部过 WCAG AA(最低 5.11:1)。 */
.news-source.src-che_12365_news   { background: #e8f2fa; color: #0a5c8f; }
.news-source.src-gasgoo_news      { background: #e9edf4; color: #0d4272; }
.news-source.src-cada_kuaixun,
.news-source.src-cada_zhengce     { background: #f1eaf8; color: #6a3fa0; }
.news-source.src-chedongxi_news   { background: #ececed; color: #3a3f45; }
.news-source.src-sohu_auto_news   { background: #fbf1cf; color: #7d5900; }
.news-source.src-tencent_auto_news{ background: #e6f5ee; color: #0a7350; }
.news-source.src-autohome_news    { background: #fbeaea; color: #b0231e; }
.news-source.src-d1ev_news        { background: #fdeee0; color: #a04f0a; }

@media (prefers-color-scheme: dark) {
  .news-source.src-che_12365_news   { background: #16303f; color: #5cb4e8; }
  .news-source.src-gasgoo_news      { background: #1b2840; color: #82a9d9; }
  .news-source.src-cada_kuaixun,
  .news-source.src-cada_zhengce     { background: #2b2440; color: #b494e0; }
  .news-source.src-chedongxi_news   { background: #2a2d31; color: #b9bec5; }
  .news-source.src-sohu_auto_news   { background: #3a3117; color: #f0c948; }
  .news-source.src-tencent_auto_news{ background: #1a3329; color: #4fc999; }
  .news-source.src-autohome_news    { background: #3a2323; color: #e88b86; }
  .news-source.src-d1ev_news        { background: #3b2919; color: #f0954a; }
}