/* ============================================================
   AI Infra 每日情报站 — 编辑部晨报风
   纸感、衬线标题、去卡片化、排版驱动。零外部依赖。
   ============================================================ */

/* ---------------- 语义 token（light 为主，暗色只重定义 token） ---------------- */
:root {
  --paper:       oklch(97.5% 0.007 85);  /* 暖纸白底 */
  --ink:         oklch(24% 0.012 60);    /* 墨色正文 */
  --ink-2:       oklch(46% 0.015 70);    /* 次级 */
  --ink-3:       oklch(62% 0.012 70);    /* 弱化（placeholder 下限，4.5:1） */
  --rule:        oklch(86% 0.012 80);    /* 细线 */
  --rule-strong: oklch(72% 0.014 75);    /* 加重细线 */
  --accent:      oklch(52% 0.18 28);     /* 编辑红：只用于序号 hover/选中、当前日期、关键操作、报头装饰 */
  --new:         oklch(55% 0.13 145);    /* 「新」标记 */
  --hot:         oklch(60% 0.13 65);     /* 「热门」标记 */
  /* 玻璃胶囊（iOS 控制中心质感） */
  --glass:          oklch(100% 0 0 / .42);      /* 玻璃底：纸白半透 */
  --glass-edge:     oklch(100% 0 0 / .6);       /* 玻璃边界 */
  --glass-hi:       oklch(100% 0 0 / .85);      /* 顶部内高光（玻璃厚度感） */
  --glass-shadow:   oklch(25% 0.02 60 / .09);   /* 投影 */
  --glass-on:       oklch(52% 0.18 28 / .10);   /* 选中：编辑红薄玻璃 */
  --glass-on-edge:  oklch(52% 0.18 28 / .5);
  /* 侧栏玻璃身后的色彩光斑（呼应主题色，让磨砂有内容可折射） */
  --glow-1: oklch(66% 0.17 25 / .16);   /* 红 */
  --glow-2: oklch(68% 0.13 240 / .14);  /* 蓝 */
  --glow-3: oklch(70% 0.12 165 / .12);  /* 青 */
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", SimSun,
           Georgia, "Times New Roman", serif;
  --sans: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:       oklch(17% 0.008 70);  /* 暖黑，禁纯黑 */
    --ink:         oklch(89% 0.008 80);
    --ink-2:       oklch(70% 0.010 75);
    --ink-3:       oklch(58% 0.010 72);
    --rule:        oklch(30% 0.010 70);
    --rule-strong: oklch(42% 0.012 72);
    --accent:      oklch(65% 0.17 28);
    --new:         oklch(68% 0.12 145);
    --hot:         oklch(70% 0.12 65);
    /* 暗色玻璃：暖黑上的深玻璃，靠内高光勾边 */
    --glass:          oklch(78% 0.012 75 / .09);
    --glass-edge:     oklch(78% 0.012 75 / .2);
    --glass-hi:       oklch(95% 0.005 80 / .13);
    --glass-shadow:   oklch(0% 0 0 / .38);
    --glass-on:       oklch(65% 0.17 28 / .16);
    --glass-on-edge:  oklch(65% 0.17 28 / .55);
    --glow-1: oklch(60% 0.15 25 / .13);
    --glow-2: oklch(60% 0.12 240 / .12);
    --glow-3: oklch(62% 0.11 165 / .10);
  }
}

/* ---------------- 基础 ---------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* 纸底 + 侧栏后方几团极淡的色彩光斑：玻璃胶囊的磨砂就是磨的它们 */
  background:
    radial-gradient(480px 360px at 6% 20%, var(--glow-1), transparent 68%),
    radial-gradient(420px 340px at 11% 46%, var(--glow-2), transparent 68%),
    radial-gradient(400px 320px at 4% 72%, var(--glow-3), transparent 68%),
    var(--paper);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button { font-family: inherit; }
::placeholder { color: var(--ink-3); opacity: 1; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px 72px; }

/* ---------------- 报头 masthead ---------------- */
.masthead { padding: 36px 0 0; }
.masthead-inner {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.brand { max-width: 640px; }
/* 编辑红装饰细条 */
.brand .flag { display: block; width: 52px; height: 5px; background: var(--accent); margin-bottom: 14px; }
.masthead-title {
  margin: 0;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2rem, 4vw + 1rem, 3.2rem);
  line-height: 1.15; letter-spacing: .02em;
}
.masthead-tagline { margin: 10px 0 0; font-size: .85rem; color: var(--ink-2); letter-spacing: .08em; }

.masthead-stats { display: flex; gap: 30px; flex-wrap: wrap; }
.stat b {
  display: block;
  font-family: var(--serif); font-weight: 700;
  font-size: 1.6rem; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.stat span { display: block; margin-top: 2px; font-size: .72rem; color: var(--ink-3); letter-spacing: .14em; }

/* 粗线 + 细线双分隔 */
.masthead-rule {
  margin-top: 22px; height: 7px;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

/* ---------------- 工具条（上下 hairline 包住） ---------------- */
.toolbar {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  margin-top: 16px; padding: 10px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* 搜索：下划线式输入，无圆角无底框 */
.search-box { position: relative; flex: 1; min-width: 240px; display: flex; align-items: center; gap: 10px; }
.search-box svg { flex: none; color: var(--ink-3); }
.search-box input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--rule-strong);
  border-radius: 0; padding: 9px 2px;
  font: inherit; font-size: .94rem; color: var(--ink);
  outline: none; transition: border-color .15s;
}
.search-box input:focus { border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }

.toolbar select {
  background: transparent; border: 0; border-bottom: 1px solid var(--rule-strong);
  border-radius: 0; padding: 8px 2px;
  font: inherit; font-size: .85rem; color: var(--ink-2);
  cursor: pointer;
}

/* 类型筛选：纯文字按钮，选中 = 编辑红下划线 + 加粗 */
.type-list { display: flex; gap: 6px; flex-wrap: wrap; }
.type-list button {
  position: relative;
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 9px 2px;
  font-size: .85rem; color: var(--ink-2); cursor: pointer;
  transition: color .15s;
}
/* ::before 扩大命中区到约 44px */
.type-list button::before { content: ""; position: absolute; inset: -6px -4px; }
.type-list button:hover { color: var(--ink); }
.type-list button.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }

#reset {
  position: relative;
  background: none; border: 0;
  padding: 9px 2px;
  font-size: .85rem; color: var(--ink-3); cursor: pointer;
  transition: color .15s;
}
#reset::before { content: ""; position: absolute; inset: -6px -4px; }
#reset:hover { color: var(--accent); }

/* ---------------- 主体两栏 ---------------- */
.layout {
  display: grid; grid-template-columns: 232px 1fr; gap: 44px;
  align-items: start; margin-top: 10px;
}

/* 左栏「版面索引」：无背景块，纯排版 */
.side { position: sticky; top: 20px; }
.side h3 {
  margin: 28px 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif); font-size: .8rem; font-weight: 700;
  letter-spacing: .18em; color: var(--ink-2);
}
.side h3:first-of-type { margin-top: 22px; }

/* 主题条目：iOS 控制中心式磨砂玻璃胶囊 */
.topic {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 13px 8px 14px;
  margin-bottom: 7px;
  font-size: .88rem; color: var(--ink-2);
  cursor: pointer; user-select: none;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 2px 10px var(--glass-shadow);
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .2s cubic-bezier(.25, 1, .5, 1);
}
.topic:hover {
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 4px 14px var(--glass-shadow);
}
/* 选中态：编辑红薄玻璃 + 红边，不再用左侧竖线 */
.topic.on {
  color: var(--ink); font-weight: 600;
  background: var(--glass-on);
  border-color: var(--glass-on-edge);
}
.topic .dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 2px var(--glass-hi);  /* 圆点也带一圈玻璃高光 */
}
.topic .n { margin-left: auto; font-size: .75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* 无 backdrop-filter 时的兜底：半透底仍在，只是不糊 */
@supports not (backdrop-filter: blur(1px)) {
  .topic { background: var(--paper); border-color: var(--rule); }
}

.side-empty { padding: 6px 0 6px 12px; font-size: .78rem; color: var(--ink-3); }

.date-list { display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; }
.date-item {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 0 8px 12px;
  font-size: .82rem; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  cursor: pointer; transition: color .15s;
}
.date-item:hover { color: var(--ink); }
.date-item.on { color: var(--accent); font-weight: 700; }
.date-item .n { font-size: .75rem; color: var(--ink-3); }
.date-item.on .n { color: inherit; }

/* ---------------- 条目流（去卡片化：无卡片、无圆角底框） ---------------- */
.list { min-height: 200px; }

.entry { display: flex; gap: 20px; padding: 24px 0; }
.entry + .entry { border-top: 1px solid var(--rule); }

/* 序号：大号衬线数字，hover 变编辑红 */
.entry-rank {
  flex: none; min-width: 2.4rem; padding-top: 2px;
  font-family: var(--serif); font-size: 1.6rem; line-height: 1.3;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
  transition: color .15s;
}
.entry:hover .entry-rank { color: var(--accent); }

.entry-main { flex: 1; min-width: 0; }

.entry-title {
  margin: 0 0 6px;
  font-family: var(--serif); font-size: 1.25rem; font-weight: 700; line-height: 1.5;
}
.entry-title a {
  color: var(--ink); text-decoration: none;
  /* hover：下划线从左到右展开 */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .3s cubic-bezier(.25, 1, .5, 1);
}
.entry-title a:hover { background-size: 100% 1px; }

.entry-meta {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: .8rem; color: var(--ink-3);
  margin-bottom: 10px;
}
.entry-meta .sep { color: var(--rule-strong); }
.t-type { color: var(--ink-2); letter-spacing: .05em; }
/* 「新」「热门」：小号加粗彩色文字标记，不用胶囊底色 */
.mark { font-weight: 700; font-size: .72rem; letter-spacing: .05em; white-space: nowrap; }
.mark-new { color: var(--new); }
.mark-hot { color: var(--hot); }

.summary {
  font-size: .94rem; color: var(--ink-2); line-height: 1.8;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.entry.expanded .summary { -webkit-line-clamp: unset; }

/* hits 关键词：纯文字，用中点分隔 */
.hits { margin-top: 10px; display: flex; flex-wrap: wrap; font-size: .72rem; color: var(--ink-3); }
.hit + .hit::before { content: "·"; margin: 0 7px; color: var(--rule-strong); }

/* ---------------- 译文块（与侧栏一致的玻璃质感） ---------------- */
.tx {
  display: flex; gap: 12px; margin-top: 12px;
  padding: 12px 16px; border-radius: 12px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 2px 10px var(--glass-shadow);
}
.tx-mark {
  flex: none; width: 26px; height: 26px; margin-top: 2px;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: .82rem;
  color: var(--accent);
  border: 1px solid var(--glass-on-edge); border-radius: 8px;
  background: var(--glass-on);
}
.tx-title { font-family: var(--serif); font-weight: 700; font-size: .98rem; line-height: 1.6; }
.tx-sum { margin-top: 4px; font-size: .88rem; color: var(--ink-2); line-height: 1.8; }
.tx-via { margin-top: 8px; font-size: .7rem; letter-spacing: .05em; color: var(--ink-3); }
.tx-hint { font-size: .84rem; color: var(--ink-2); }
.tx-err .tx-mark { color: var(--hot); border-color: var(--hot); }
/* 请求中的呼吸动画 */
@keyframes tx-pulse { 50% { opacity: .45; } }
.tx-loading .tx-hint { animation: tx-pulse 1.2s ease-in-out infinite; }

.entry-foot {
  margin-top: 12px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: .78rem; color: var(--ink-3);
}
.entry-foot .score { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.entry-foot button {
  position: relative;
  background: none; border: 0; padding: 6px 2px;
  font-size: .78rem; color: var(--ink-3); cursor: pointer;
  transition: color .15s;
}
.entry-foot button::before { content: ""; position: absolute; inset: -4px -6px; }
.entry-foot button:hover { color: var(--accent); }
.entry-foot .grow { margin-left: auto; }
.entry-foot a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.entry-foot a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* 空态 */
.empty { text-align: center; padding: 90px 20px; color: var(--ink-3); font-family: var(--serif); }
.empty-hint { display: block; margin-top: 8px; font-family: var(--sans); font-size: .78rem; }

/* ---------------- 提示条（编辑部更正启事风） ---------------- */
.banner {
  margin: 18px 0 4px; padding: 12px 16px;
  font-size: .85rem; color: var(--ink-2);
  border: 1px solid var(--rule-strong);
  border-left: 4px solid var(--hot);
}
.banner.err { border-left-color: var(--accent); color: var(--ink); }

/* ---------------- 页脚 ---------------- */
footer {
  margin-top: 56px; padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: flex; gap: 8px 22px; flex-wrap: wrap;
  font-size: .75rem; color: var(--ink-3);
}
footer .icp a { color: var(--ink-2); text-decoration: none; }
footer .icp a:hover { color: var(--accent); text-decoration: underline; }
/* 还是占位状态时，用一点提示色提醒站长尽快填写 */
footer .icp[data-icp="todo"] a { color: var(--hot); }

/* ---------------- 动效（克制） ---------------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
/* 首屏进入 stagger：延迟由 JS 内联（每条 +30ms，上限 400ms） */
.entry.anim { animation: fade-up .55s cubic-bezier(.25, 1, .5, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .entry.anim { animation: none; }
  .tx-loading .tx-hint { animation: none; }
  * { transition: none !important; }
}

/* ---------------- 响应式 920px ---------------- */
@media (max-width: 920px) {
  .wrap { padding: 0 16px 56px; }
  .masthead { padding-top: 26px; }
  .masthead-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .masthead-stats { gap: 22px; }
  .layout { grid-template-columns: 1fr; gap: 0; }
  .side { position: static; }
  .side h3 { margin-top: 24px; }
  /* 侧栏变横向流：玻璃胶囊换行排布 */
  .topic-list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 7px; }
  .topic { margin-bottom: 0; }
  .date-list { flex-direction: row; flex-wrap: wrap; gap: 2px 20px; max-height: none; overflow: visible; }
  .entry { gap: 12px; padding: 20px 0; }
  .entry-rank { font-size: 1.25rem; min-width: 1.9rem; }
  .entry-title { font-size: 1.08rem; }
}