/* snapshot-shell.css —— 站内文章快照的**外壳视觉层**
 * ------------------------------------------------------------------
 * 只管壳层的颜色 / 字体 / 内边距，几何对齐由 article.css 的 .snap-main / .snap-wrap 负责：
 *   .snap-crumb / .snap-bar / .snap-foot / .snap-related 都是**通栏块**
 *   （底色与上下分割线铺满视口），内容由内层 `.snap-wrap` 与正文列同轴。
 *
 * 严禁在此写入任何全局 body / html / * 规则，以免污染快照原文排版。
 *
 * 主题自适应：源稿 :root 上的主题变量已被提升到 :root（见 tools/article_shell.py），
 * article.css 又把它们别名成 --bg / --card / --line / --tx / --gold …
 * 本文件一律用 var(--别名, 兜底值) 取值 —— 同一份外壳在深浅两种正文里都成立。 */

/* --- 吸顶条 ------------------------------------------------------------ */
.snap-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg, #EFEAE2);
  border-bottom: 1px solid var(--line, #DDD6CB);
}

.snap-bar > .snap-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 44px;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 13px;
  line-height: 1;
  color: var(--tx2, #5C5652);
}

.snap-bar a {
  color: var(--tx2, #5C5652);
  text-decoration: none;
  transition: color .15s ease;
}

.snap-bar a:hover { color: var(--gold, #B8491C); }

.snap-bar .snap-back { flex: 0 0 auto; }

.snap-bar .snap-brand {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--tx, #221D1B);
}

.snap-bar .snap-src {
  flex: 0 0 auto;
  text-align: right;
}

/* --- 正文内的数据来源 / 免责声明页脚 ------------------------------------
 * 正文里的 <footer> 是「数据来源 + 风险提示」，属于文章内容而非站点页脚。
 * 浏览器默认样式（小字、裸排、与卡片脱节）会让文末显得散，这里把它收成
 * 一个低调的注记块：细边框 + 左侧细线，颜色跟随正文主题。
 * 选择器带上 .snap（html 上那个类）是为了压过源稿的 `.snap-body *{margin:0;padding:0}`。 */
.snap footer:not(.snap-foot) {
  display: block;
  box-sizing: border-box;
  margin: 14px 0 0;
  padding: 13px 15px;
  border: 1px solid var(--line, #E4DCCF);
  border-left: 3px solid var(--line2, #C9BFB0);
  border-radius: 9px;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 11.5px;
  line-height: 1.85;
  color: var(--tx3, #8C8275);
}

.snap footer:not(.snap-foot) b {
  color: var(--tx2, #6F665B);
  font-weight: 600;
}

/* --- 站点页脚（「一段三栏」· design-spec §4.19/§5.5 裁决为单元素形态） ----
 * 已否决「细条 + 三栏」两段堆叠：整块就是一个 <footer class="snap-foot">，
 * 内部复用下方 `.footer-inner/.footer-col/.footer-bottom/...`（裸类选择器，自动生效）。 */
.snap-foot {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: var(--block-y, clamp(56px, 8vw, 112px)) 0 0;
  padding: 0;
  background: var(--surface, #FFFFFF);
  border-top: 1px solid var(--border, #E5DED1);
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: var(--faint, #655E52);
  text-align: left;
}

.snap-foot a {
  color: var(--muted, #5C554C);
  text-decoration: none;
}

.snap-foot a:hover { color: var(--accent-ink, #1D4A66); }

.snap-foot a.snap-foot-back { color: var(--accent-ink, #1D4A66); }

.snap-foot a.snap-foot-back:hover { text-decoration: underline; }

/* --- SEO：可见面包屑 --------------------------------------------------- */
.snap-crumb {
  display: block;
  box-sizing: border-box;
  padding: 12px 0;
  background: var(--bg, #F3EFE7);
  border-bottom: 1px solid var(--line, #E4DCCF);
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tx3, #8C8275);
}

.snap-crumb > .snap-wrap { padding-block: 0; }

.snap-crumb a {
  color: var(--tx3, #8C8275);
  text-decoration: none;
}

.snap-crumb a:hover {
  color: var(--gold, #B8491C);
  text-decoration: underline;
}

.snap-crumb span[aria-hidden] {
  margin: 0 7px;
  color: var(--tx3, #C4B9A8);
}

.snap-crumb-cur {
  display: inline-block;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  color: var(--tx2, #5C5652);
}

/* --- SEO：相关阅读 ----------------------------------------------------- */
.snap-related {
  box-sizing: border-box;
  margin: 0;
  padding: 26px 0 34px;
  background: var(--bg, #F3EFE7);
  border-top: 1px solid var(--line, #E4DCCF);
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.snap-related-h {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tx, #3A332C);
}

.snap-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
}

.snap-related-list li { min-width: 0; }

.snap-related-list a {
  display: inline-block;
  color: var(--snap-link, #4A6884);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.5;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.snap-related-list a:hover {
  color: var(--gold, #B8491C);
  border-bottom-color: var(--gold, #B8491C);
}

.snap-related-more {
  margin: 18px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
}

.snap-related-more a {
  color: var(--tx3, #8C8275);
  text-decoration: none;
}

.snap-related-more a:hover {
  color: var(--gold, #B8491C);
  text-decoration: underline;
}

/* --- 文末公众号关注卡：微信搜一搜「AI Lookup」 ---------------------------
 * 位置在正文列的末尾（与正文、注记同轴），读者读完主干正好看到。
 *
 * 这是全站**同一张卡**的两种页面形态：站点原创页用 site.css 的 .gzh-cta（蓝色系），
 * 快照页用这里的 .snap-gzh。两者必须共用一套比例与排版配方 —— 圆角 12、内边距 16/20、
 * 二维码 88 方框、kicker 大写小字 + 标题 + 说明的三段式。差别只在配色：
 * 快照页跟随每篇文章的主题色（--gold），站点页跟随站点蓝。
 * 历史上两边各写各的（一头 h2 一头 p、一个 84 一个 88、一个带左侧色条一个不带），
 * 同一站点出现两种关注卡，就是用户说的「视觉不一致」。 */
.snap-gzh {
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  margin: 14px 0 0;
  padding: 16px 20px;
  border: 1px solid color-mix(in srgb, var(--gold, #B45309) 26%, var(--line, #E4DCCF));
  border-radius: 12px;
  background: color-mix(in srgb, var(--gold, #B45309) 5%, var(--card, #FDF9F4));
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.snap-gzh .gzh-qr {
  flex: none;
  box-sizing: border-box;
  width: 88px;
  height: 88px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line, #E4DCCF);
  border-radius: 10px;
}

.snap-gzh .gzh-qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.snap-gzh .gzh-body { min-width: 0; }

.snap-gzh .gzh-kicker {
  margin: 0 0 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold, #B45309);
}

.snap-gzh .gzh-title {
  margin: 0 0 3px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tx, #221D1B);
}

.snap-gzh .gzh-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--tx2, #5C5652);
}

.snap-gzh .gzh-text strong { color: var(--tx, #221D1B); }

/* --- 窄屏 -------------------------------------------------------------- */
@media (max-width: 520px) {
  .snap-bar > .snap-wrap {
    gap: 10px;
    font-size: 12px;
  }

  .snap-crumb-cur { max-width: 46%; }

  .snap-related { padding: 22px 0 28px; }
  .snap-related-list { grid-template-columns: minmax(0, 1fr); }

  .snap-gzh {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ---------------------------------------------------------------------------
 * R5 三栏站点页脚（design-spec §4.15 / content-plan §3.2「全站统一，含快照页」）
 * site.css 的 .footer 规则原样搬来——快照页不加载 site.css。取值全部走 html.snap
 * 上的 R5 令牌（见 article.css），故快照页页脚与主站完全一致。
 * ------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--border, #E5DED1);
  margin-top: var(--block-y, clamp(56px, 8vw, 112px));
  background: var(--surface, #FFFFFF);
}
.footer-inner {
  max-width: var(--wrap-max, 1120px);
  margin: 0 auto;
  padding: var(--sp-7, 48px) var(--wrap-pad, 24px) var(--sp-6, 32px);
  display: flex; flex-wrap: wrap; gap: var(--sp-6, 32px); justify-content: space-between;
}
.footer-col { min-width: 160px; }
.footer-h {
  font-size: var(--type-micro, 12px); font-family: var(--font-mono, monospace);
  letter-spacing: var(--track-caps, .14em); text-transform: uppercase;
  color: var(--faint, #655E52); margin-bottom: var(--sp-3, 12px);
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.footer-links a { color: var(--muted, #5C554C); font-size: .9375rem; text-decoration: none; }
.footer-links a:hover { color: var(--accent-ink, #1D4A66); }
.footer-gzh { color: var(--muted, #5C554C); font-size: .9375rem; }
.footer-bottom {
  border-top: 1px solid var(--border, #E5DED1);
  padding: var(--sp-5, 24px) var(--wrap-pad, 24px);
  max-width: var(--wrap-max, 1120px); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: var(--sp-3, 12px) var(--sp-5, 24px);
  align-items: center; justify-content: space-between;
  color: var(--faint, #655E52); font-size: var(--type-micro, 12px);
}
.footer-beian { display: flex; flex-wrap: wrap; gap: var(--sp-3, 12px) var(--sp-5, 24px); }
.footer-beian a { color: var(--faint, #655E52); display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.footer-beian a:hover { color: var(--muted, #5C554C); }