/* ============================================================
   日报只读快照 · 视觉层
   ------------------------------------------------------------
   配色纪律：**不新造一套**。下面 :root 里的色值全部照抄 web/app.css 的 `:root`，
   变量名也同名（--bg / --surface / --text-2 / --line …），这样快照页和电脑端
   看起来是同一个站，而不是"另一个产品"。

   唯一新增的变量是 --warn（琥珀黄）。原因：app.js 那套只有 --ok 绿 / --danger 红，
   而"快照陈旧度 2–4 天"这一档需要一个中间态颜色，用 --text-2 灰会看不出差别，
   用 --danger 红又会把"3 天没更新"渲染得跟"5 天没更新"一样吓人。
   取 #D8B36A：与 --ok #7FB069 同明度区间，在 #0A0A0B 底上对比度 > 7:1（WCAG AAA）。

   布局：移动优先单列；≥768px 两列（只两列，不做三列 —— 三列时标题只剩两行，
   中文两行标题的末行容易只剩两三个字，读起来像断句）。
   ============================================================ */

:root {
  /* ── 以下 13 行与 web/app.css 的 :root 取值保持一致，改一边就要改另一边 ── */
  --bg: #0A0A0B;
  --surface: #141416;
  --surface-2: #1A1A1C;
  --surface-3: #222225;
  --line: #1F1F22;
  --line-2: #303035;

  --text: #FFFFFF;
  --text-2: #9B9BA1;
  --text-3: #6A6A70;

  --ok: #7FB069;
  --danger: #C4614F;

  --nav-text: #C9C9CE;
  --media-bg: #101012;

  --font-sans: -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-serif: var(--font-sans);

  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  --ease: cubic-bezier(.2, 0, 0, 1);
  --dur: 200ms;

  /* 本页唯一新增：陈旧度中间档 */
  --warn: #D8B36A;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.62 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid rgba(255, 255, 255, .30); outline-offset: 3px; border-radius: 4px; }

/* ---------------- 顶栏 ---------------- */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  /* flex-wrap 是必须的：375px 的窄机上「X·TERRITORY + 只读快照」和
     「快照 · 2026-11-08（1 天前）」加起来超过一行，硬挤会把日期截成「快照 · 202…」——
     而"哪一天、几天前"是这个页面唯一的身份信息，宁可换行也不能省略。 */
  flex-wrap: wrap; gap: 4px var(--sp-3);
  padding: 10px var(--sp-4);
  background: rgba(10, 10, 11, .92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.bar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mark { height: 20px; width: auto; display: block; filter: grayscale(1); }
.bar-name {
  font-size: 13px; font-weight: 600; letter-spacing: .055em;
  text-transform: uppercase; color: #D6D6D6; white-space: nowrap;
}
/* 「只读快照」四个字是身份声明，不是装饰 —— 任何情况下都要能被看见，别在本页藏它 */
.bar-tag {
  font-size: 11px; line-height: 1; padding: 4px 7px;
  border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--nav-text); white-space: nowrap;
}

.bar-right { display: flex; align-items: center; gap: 6px; min-width: 0; margin-left: auto; }
.stale-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--ok); transition: background var(--dur) var(--ease);
}
.stale-dot[data-level="warn"] { background: var(--warn); }
.stale-dot[data-level="bad"]  { background: var(--danger); box-shadow: 0 0 0 3px rgba(196, 97, 79, .16); }
.stale-text {
  font-size: 11.5px; color: var(--text-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stale-text[data-level="warn"] { color: var(--warn); }
.stale-text[data-level="bad"]  { color: var(--danger); }

/* ---------------- 日期条 ---------------- */
.dates {
  display: flex; gap: var(--sp-2); overflow-x: auto;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.dates::-webkit-scrollbar { display: none; }
.date-btn {
  flex: none; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface); color: var(--text-2);
  font-size: 12.5px; font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.date-btn:hover { color: var(--text); border-color: var(--line-2); }
.date-btn[aria-current="true"] {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .16);
  color: var(--text);
}

/* ---------------- 主区 ---------------- */
.wrap { padding: var(--sp-5) var(--sp-4) var(--sp-12); max-width: 980px; margin: 0 auto; }

.hd-title {
  margin: 0 0 var(--sp-1);
  font-size: 20px; font-weight: 600; letter-spacing: .01em;
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums;
}
.hd-sub { margin: 0 0 var(--sp-6); font-size: 12.5px; color: var(--text-3); }

.state { color: var(--text-3); font-size: 13px; padding: var(--sp-4) 0; }
.state.err { color: var(--danger); }

/* 栏目（三条线：家装 / 工装 / 待归类） */
.sect { margin: 0 0 var(--sp-10); }
.sect-head {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding-bottom: var(--sp-2); margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.sect-title { font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.sect-sub { font-size: 11.5px; color: var(--text-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sect-count { margin-left: auto; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; flex: none; }

/* 卡片流：移动单列 → ≥768px 两列 */
.grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
  .hd-title { font-size: 22px; }
}

.card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:active { transform: scale(.995); }
@media (hover: hover) {
  .card:hover { border-color: var(--line-2); }
}

/* 封面位：固定 4:3 占位，图没到之前高度就已经定了 → 不跳版
   --media-bg 比 --surface-2 更深一档，跟卡面同深度就分不出"这是图位" */
.media {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  background: var(--media-bg);
  overflow: hidden;
}
.media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  background: var(--media-bg);
}
/* 裂图占位：灰底 + 「无图」，绝不显示浏览器破图标 */
.noimg {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--surface-2);
  color: var(--text-3); font-size: 12px; letter-spacing: .08em;
}

.card-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: 8px; }

.card-title {
  margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45;
  color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

.meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line-2);
  color: var(--nav-text); white-space: nowrap;
}
.chip-line { background: transparent; border-color: var(--line); color: var(--text-3); }
.score {
  margin-left: auto; font-size: 12px; color: var(--text-2);
  font-variant-numeric: tabular-nums; flex: none;
}
.score b { font-size: 15px; font-weight: 600; color: var(--text); }

.why {
  margin: 0; font-size: 12px; line-height: 1.6; color: var(--text-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 「去原文 ↗」— 整张卡是一个链接，这是唯一的动作 */
.go {
  margin-top: 2px; font-size: 12px; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 4px;
}
.card:hover .go { color: var(--text); }

/* ---------------- 页脚 ---------------- */
.foot {
  padding: var(--sp-5) var(--sp-4) calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  text-align: center; font-size: 11.5px; color: var(--text-3);
}

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