/*
 * 公开前台的外壳样式。**在 `reader.css` 之后加载** —— 配色令牌、按钮、
 * `.grid`/`.card` 都用那一份，这里只加公开站自己有的东西（站头、面包屑、
 * 地区分区、年份分段、语言切换）。
 *
 * ## 为什么宽度是 1200 而不是平台那一档
 *
 * 平台内部页面是 `min(1720px, 84vw)`（`@vt/ui` 的 PAGE_WIDTH），
 * 那是给数据密集的后台表格定的。报纸归档是图片墙 + 长标题，
 * 1720 宽会让每行排到七八张卡、标题被挤成两三个字。
 * 这是**另一个设计系统**，不是同一个设计系统里的第二个数字 ——
 * 所以不共用那个常量，也不该被 `check:width` 的判据覆盖。
 */

:root {
  --site-max: 1200px;
  --gap: clamp(14px, 2.2vw, 26px);
}

/* ── 站头 ──────────────────────────────────────────────────
   `reader.css` 的 `header{}` 已经给了 sticky / 面板底色 / 横排，
   这里只补公开站要的：更大的站名、语言开关、主题钮 */
.site-head h1 { font-size: clamp(16px, 2.2vw, 20px); letter-spacing: .01em; }
.site-head h1 a { text-decoration: none; color: inherit; }
.langs { display: flex; gap: 2px; }
.lang {
  padding: 5px 8px; font-size: 12px; letter-spacing: .04em; border-radius: 5px;
  text-decoration: none; color: var(--muted);
}
.lang:hover { background: var(--bg); }
.lang.on { color: var(--ink); background: var(--bg); font-weight: 700; }
.theme-toggle { padding: 5px 10px; }

/* ── 报头与导航 ─────────────────────────────────────────────
   左上角那个哥特体 "Vision Times" 用的是**账号中心同一份字体文件**
   （它那边是 Next 的 next/font 自托管，CSS 变量叫 --font-masthead，
   字体文件 eaffcc9f34a77d14-s.p.woff2，weight 700）。

   ★ 为什么是字体不是图：一开始用的是官网那张 SVG 报头 + CSS mask。
     字体好在可选中、可缩放、任意文字都能排，而且与账号中心**逐像素一致**
     —— 两个站在读者眼里本来就该是一个站。

   ★ 必须自托管：CSP 是 default-src 'self'，没有 font-src —— 直接引
     账号中心那个地址会被浏览器掐掉，而表现是"字体就是不生效"、不报错。 */
@font-face {
  font-family: "VT Masthead";
  src: url("/assets/masthead.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;      /* 与账号中心一致；配合 <link rel=preload> 基本看不到换字 */
}
.site-head h1.brand { font-size: inherit; margin: 0; }
/*
 * ★ 报头与副标题用**竖直居中**，不是基线对齐。
 *
 *   基线对齐在这里看着不对：哥特体的字母只占 em 框的中间一段，
 *   而 `e-Paper` 是普通衬线体 —— 两者落在同一条基线上时，小字看起来
 *   吊在报头的左下角，中间那根分隔线也只有小字那么高。
 *
 *   分隔线的高度用**副标题自己的 em** 给（1.7em ≈ 哥特体字母的视觉高度），
 *   而不是让它拉满整个 em 框：拉满的话线比字母还高一截，同样不齐。
 */
.site-head h1.brand a {
  display: inline-flex; align-items: center; gap: 0;
  text-decoration: none; color: inherit; padding: 4px 0;
}
.wordmark {
  font-family: "VT Masthead", serif;
  font-weight: 700; line-height: 1; color: var(--ink);
  font-size: clamp(23px, 3.4vw, 30px);
  white-space: nowrap;
}
.brand .section {
  display: inline-flex; align-items: center; height: 1.7em;
  font-size: clamp(12px, 1.5vw, 14px); font-weight: 500; color: var(--muted);
  letter-spacing: .02em;
  margin-left: 11px; padding-left: 11px; border-left: 1px solid var(--line);
}
/* 窄屏收起副标。
   ★ 断点从 760px 收到 480px 是 2026-11-07 顶栏那四条账号导航拆掉之后的事 ——
     原来那一档挤的是五条链接，现在同一排上只剩报头 + 三语 + 主题键，
     760px 下放得很宽松。真正放不下的是 480px 以下的手机竖屏。 */
@media (max-width: 480px) {
  .brand .section { display: none; }
}

/* ── 页脚 ──────────────────────────────────────────────────
   形状对齐账号系统那一份：品牌一段 + Company / Legal 两列 + 版权。 */
.site-foot {
  margin-top: clamp(40px, 7vw, 76px); padding: clamp(24px, 4vw, 40px) var(--gap) 28px;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 14px;
}
.foot-wrap {
  max-width: var(--site-max); margin: 0 auto;
  display: grid; gap: clamp(20px, 4vw, 48px);
  grid-template-columns: minmax(200px, 2fr) 1fr 1fr;
}
.foot-brand .wordmark { display: block; font-size: 24px; margin-bottom: 9px; }
.foot-brand p { margin: 0; max-width: 34em; }
.foot-col h2 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 9px; }
.foot-col a { display: block; padding: 4px 0; color: var(--muted); text-decoration: none; }
.foot-col a:hover { color: var(--accent); text-decoration: underline; }
.foot-rights {
  max-width: var(--site-max); margin: clamp(22px, 3vw, 34px) auto 0;
  padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px;
}
@media (max-width: 640px) {
  .foot-wrap { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
/* 阅读页 `#main` 里那份服务端兜底清单（版面链接）。**默认藏起来** ——
   它服务的是爬虫（读 HTML 源码，不受 display 影响）与没有 JS 的浏览器
   （由 readFallback 里那段 <noscript> 显出来）。
   不藏的话，app.js 下载的那几百毫秒里读者会先看到一屏裸链接再被整块换掉。 */
.read-fallback { display: none; }

/* 阅读页要占满视口、没有页脚（bodyClass=reading） */
body.reading .site-foot { display: none; }

/* ── 触控目标 ──────────────────────────────────────────────
   WCAG 2.5.8（AA）要求 24×24 CSS px。2026-09-13 实测手机上有五处不够：
   站名 149×17、首页地区标题 82×21、「更多 →」48×22、目录里的版号 17×15。

   ★ 判据里**有一条例外**：句子中的行内链接（面包屑那种「首页 / 纽约 / 第 273 期」）
     不适用，因为它们的高度由周围文字的行高决定。所以那一处只把行高放松一点，
     不加 padding —— 加了会把面包屑撑成两行，那是用可读性换可点性。

   ★ 一律用 `display:inline-block` + 纵向 padding，**不动字号**。
     字号是排版的一部分，为了可点性去调它会让标题层级乱掉。 */
.site-head h1 a { display: inline-block; padding: 4px 0; }
.region-head h2 a { display: inline-block; padding: 3px 0; }
/* 负外边距抵消 padding，让它在视觉上仍然贴着右边 */
.region-head .more { display: inline-block; padding: 4px 6px; margin-right: -6px; }
/* 目录里的版号。旁边虽然有整张缩略图可点，但"瞄着 A1 这两个字按"是常见动作 ——
   撑成整格宽的块级目标，既够大又不改变外观 */
.toc-grid h3 a { display: block; padding: 5px 0; }
/* 触屏上面包屑行高放松（鼠标不需要，所以只给 hover:none） */
@media (hover: none) { .crumbs { line-height: 1.9; } }

/* ── 通用容器 ── */
.wrap { max-width: var(--site-max); margin: 0 auto; padding: clamp(18px, 3vw, 34px) 16px 64px; }
.wrap.center { text-align: center; }
.tagline { color: var(--muted); margin: 0 0 6px; font-size: 15px; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.crumbs a { color: inherit; }
.empty { color: var(--muted); font-style: italic; }
/* 只给读屏软件的标签。`reader.css` 里那条叫 .sr，同一套，这里不再定义 */

/* ── 地区分区 ── */
.region-block { margin-top: clamp(26px, 4vw, 46px); }

/* 首页地区标签页。四个地区各 8 期叠起来要滚很久，而读者通常只看一个地区。
   服务端把四个面板都渲染出来、后三个带 hidden；没有 JS 时 <noscript> 会撤掉
   hidden 并藏起标签条，退回成四段堆叠。 */
/* ★ 分隔线只有**一条**，画在 .tabbar 上。「更多 →」原来在面板里那条
   `.region-head` 上，而那条自带一根 2px 线 —— 两条线夹一段空白，说的却是
   同一件事。所以把链接挪进这一排，`.region-head` 整条收起（见文末）。 */
.tabbar {
  display: flex; align-items: flex-end; gap: 12px;
  margin: 14px 0 0; border-bottom: 2px solid var(--ink);
}
.tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tab-more-slot { margin-left: auto; padding-bottom: 7px; white-space: nowrap; }
.tab-more { font-size: 14px; color: var(--muted); text-decoration: none;
  display: inline-block; padding: 4px 6px; margin-right: -6px; }
.tab-more:hover { color: var(--accent); text-decoration: underline; }
.tab-more[hidden] { display: none; }
.tab {
  appearance: none; background: none; cursor: pointer;
  font-family: inherit; color: var(--muted);
  font-size: clamp(16px, 2.2vw, 19px); letter-spacing: .01em;
  padding: 7px 12px; border: 0; border-bottom: 3px solid transparent;
  margin-bottom: -2px;                      /* 压在 .tabbar 那条线上，选中态才连得上 */
  display: inline-flex; align-items: baseline; gap: 6px;
  white-space: nowrap; border-radius: 6px 6px 0 0;
}
.tab:hover { color: var(--ink); background: var(--hot); }
.tab[aria-selected="true"] {
  color: var(--ink); font-weight: 600; border-bottom-color: var(--accent);
}
/* 键盘用户要看得见焦点；鼠标点击不要留下一圈框 */
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── 手机：地区标签排成两排「标签块」，选中整块填色（用户 2026-10-10）──
   用户：「手机版顶部的 Tab 改为两排，选中效果更明显一些」。10-10 后台加了香港，
   五个地区在手机上要换行，而上面那套选中态是靠 `margin-bottom:-2px` 把下划线
   压在 `.tabbar` 那条线上 —— **一换行就压不到了**：实测 390px 下红线悬在分隔线
   上方 45px，320px 上是 89px，看着像一条画歪的线。

   ★ 这不是「调一下边距」能了的：那套选中态要求选中的那个**必须在最后一排**，
     而排数是宽度与地区数的函数。再加一个地区，电脑上也会换行。所以手机这一档
     换成不依赖排位的做法 —— 整块填色，在哪一排都成立。

   ★ 选中块的字用 `--panel` 而不是写死 `#fff`：深色主题的 `--accent` 是浅红
     （#e07a7a），白字压上去对比度只有 2.6。`--panel` 浅色主题是白、深色主题
     是近黑，两边都够。

   ★ `.tabs` 在这一档是 `display:contents`，让标签直接成为 `.tabbar` 的 flex 项，
     这样「更多 →」排进同一个换行流、落在最后一排右边，而不是单独占一行。

   与另一台读者站（media-visiontimes/epaper-web，8875018）同一套做法与同一个
   断点，只是类名不同（它那边是 .region-tabs-head / .region-tabs / .region-tab）。 */
@media (max-width: 700px) {
  .tabbar { flex-wrap: wrap; align-items: center; gap: 6px; padding-bottom: 10px; }
  .tabs { display: contents; }
  .tab {
    font-size: 15px; padding: 6px 11px;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--panel); color: var(--ink);
    margin-bottom: 0;          /* 撤掉压线的 -2px —— 换行之后它压不到任何线上 */
  }
  .tab:hover { background: var(--hot); }
  .tab:focus-visible { border-radius: 999px; outline-offset: 2px; }
  .tab[aria-selected="true"] {
    background: var(--accent); border-color: var(--accent); color: var(--panel);
  }
  .tab-more-slot { margin-left: auto; padding-bottom: 0; }
}
/* 标签条上已经写着地区名，面板里那个 h2 就重复了。只在标签页真的生效时收起来 */
/* 标签页生效时，面板里那条 `.region-head` 整条收起：地区名已经写在标签上、
   「更多 →」已经挪到标签那一排，剩下的只有一根重复的分隔线和一段空白。
   ★ 只在 JS 真的接管时才收 —— 没有 JS 的那条路上它仍然是这一段的标题。 */
[data-region-tabs="on"] .region-block { margin-top: 14px; }
[data-region-tabs="on"] .region-head { display: none; }
.region-head {
  display: flex; align-items: baseline; gap: 12px;
  border-bottom: 2px solid var(--ink); padding-bottom: 6px; margin-bottom: 4px;
}
.region-head h2 { margin: 0; font-size: clamp(19px, 2.6vw, 26px); letter-spacing: .01em; }
.region-head h2 a { text-decoration: none; color: inherit; }
.region-head h2 a:hover { color: var(--accent); }
.region-head .more { margin-left: auto; font-size: 14px; white-space: nowrap; }
.region-head .count { margin-left: auto; color: var(--muted); font-size: 14px; }

/* ── 年份分段（地区归档） ── */
.year-block { margin-top: clamp(22px, 3vw, 36px); }
.year-block h3 {
  margin: 0 0 4px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 5px;
}

/* ── 卡片上的标题 ──────────────────────────────────────────
   `reader.css` 的 `.card` 只有「城市 · 期号」与一行小字。公开站多一行标题，
   而标题长度差得很远（"秋季特刊" vs 一整句英文头条）——
   限两行并省略，否则同一行的卡片高度会参差不齐。 */
.card-title {
  padding: 0 11px 4px; font-size: 13px; line-height: 1.4; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
/* 没有封面时的占位。**保持同一个长宽比**，否则这一行的其它卡会被拉歪 */
.card-nocover {
  aspect-ratio: 864 / 1548; display: grid; place-items: center;
  background: var(--bg); font-size: 34px; opacity: .35;
}

/* ── 归档筛选框 ── */
.filter { display: block; margin: 14px 0 4px; }
.filter input {
  width: min(420px, 100%); padding: 8px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: inherit;
}
/* 被筛掉的卡与空掉的年份段。用 hidden 属性而不是加类：
   一个属性两处共用，JS 那边不用记住类名叫什么 */
.grid > .card[hidden], .year-block[hidden] { display: none !important; }

/* ── 阅读页 ──────────────────────────────────────────────
   `body.reading` 下页面要占满视口（阅读器自己算高度），所以不要页脚留白 */
.read-head {
  max-width: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.read-head .crumbs { margin: 0; }
/* 搜索框从顶栏搬到这一排，样式要自己带 —— 原来靠的是 reader.css 里
   `header input{…}`，出了 <header> 就不适用了 */
.read-head #q {
  padding: 7px 11px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: inherit; font-size: 14px;
  width: min(34vw, 260px);
}
.read-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.read-actions .btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.read-actions .btn.primary:hover { filter: brightness(1.08); background: var(--accent); }

/* ── 桌面上「整期」只留一颗 ──────────────────────────────────
   用户 2026-09-13：「电脑版的 Whole issue 的按钮可以去掉」。

   顶部 `.read-actions` 与底栏 `.dl` 各有一个「下载整期」入口。手机上那是
   有道理的（顶部在首屏、底栏在滚动之后），桌面上两颗同时在视野里，
   就只是重复。

   ★ 藏的是**底栏**那颗，不是顶部那颗：顶部那个是 SSR 出来的，
     关掉脚本、给抓取器看的也是它。藏一个纯客户端渲染的按钮不会损失任何东西。
   ★ 体积（「· 16 MB」）原来只挂在底栏那颗上，所以顶部那颗补了一个
     `#dlSizeTop` 由 app.js 一起填 —— 否则桌面读者点之前不知道要下多大，
     而"点之前就该知道量级"正是当初给它加体积的理由。
   ★ 用 display:none 而不是从 DOM 里删：断点两边要能来回切
     （桌面窗口拖窄就该回来），JS 删掉的话拖回去就没有了。 */
@media (min-width: 701px) {
  #dlIssue { display: none; }
}

/* 手机上站头与阅读头都很占高度，而阅读器要靠高度显示版面 */
@media (max-width: 700px) {
  .read-head { padding: 6px 10px; font-size: 13px; }
  /* 手机上这一排换行：第一排面包屑 + 上下期/下载，第二排搜索框 + A−A+。
     搜索框用 `flex:1 1 160px` 而不是 100% —— 占满一行的话 A−A+ 会被挤到第三排 */
  .read-head #q { order: 3; flex: 1 1 160px; width: auto; min-width: 0; }
  .read-head .fs { order: 4; }
  .site-head { padding: 8px 10px; }

  /*
   * ★★ 「上一期 / 下一期」在手机上**不做成按钮**。
   *
   * 用户 2026-09-13：「视觉上有两个向右按钮，一个在外面一个在里面，
   * 应该是宽度响应的时候没处理好」。
   *
   * 那不是响应式 bug —— 是**两个不同功能长得一模一样**：
   *   · `.read-actions` 里的「下一期 →」跳到**下一期报纸**
   *   · 底栏里的 `›` 翻到**本期下一版**
   * 两个都是 `.btn` + 右箭头，手机上又只隔着一屏，于是读起来像同一个键
   * 出现了两次。用户点了外面那个，它确实"翻页"了 —— 翻的是期。
   *
   * 解法不是挪位置（挪到哪儿都还是两个一样的按钮），是**把层级说清楚**：
   * 换期是导航（与面包屑同一类，做成文字链接），换版是阅读操作（保留按钮）。
   * 下载仍然是按钮 —— 它是个动作，不是导航。
   */
  .read-actions { gap: 14px; }
  .read-actions .btn:not(.primary) {
    border: 0; padding: 4px 0; background: none;
    color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
  }
  .read-actions .btn.primary { padding: 5px 10px; font-size: 13px; }
}

/* ── 卡片是 <a> 了，不是 <button> ─────────────────────────
   `reader.css` 里的 `.card` 是给旧阅读器那个 `<button class="card">` 写的，
   所以它没管 `text-decoration` 与 `color`。换成 `<a>` 之后，
   `a{color:var(--accent)}` 与浏览器默认的下划线一起赢过 `.card` ——
   整张卡片变成**红色带下划线的文字块**。

   ★ 同一个坑这个仓踩过第二次了：`a.btn` 也是这样（reader.css 里有一行
     专门修它，注释写着"2026-09-04 从截图里看出来的"）。
     形状换了而样式规则按旧形状写，症状永远只在截图里现形。 */
a.card { text-decoration: none; color: inherit; }

/* ★ `<img width height>` 会带来一个 UA 层的 `height` 值，而**显式 height 赢过
     aspect-ratio** —— 于是封面按 1548px 高铺开，一张卡有一屏多高。
     实测：naturalHeight 366，渲染出来 1548。
     加这两个属性是为了图到之前就占好位（否则整页跳动），
     所以不能因此把比例弄坏：补一条 height:auto，让 aspect-ratio 说了算。 */
.card img { height: auto; }

/* 报纸封面要看得清标题，169px 太小（reader.css 那档是给后台预览的密集列表定的） */
.grid { grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); }

/* ── 底栏上补的三颗工具键 ── */
.tools { display: flex; gap: 6px; flex-shrink: 0; }
.tools .btn { padding: 5px 9px; line-height: 1; font-size: 15px; }

/* ── 快捷键说明 ──────────────────────────────────────────
   默认不在文档流里（`display:none`），而不是只把它移出屏幕：
   移出屏幕的那种做法会让 Tab 走进一个看不见的对话框里。 */
.keys { display: none; }
body.keys-open .keys {
  display: block; position: fixed; z-index: 60;
  right: clamp(12px, 3vw, 28px); bottom: 76px; width: min(380px, calc(100vw - 24px));
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow); padding: 16px 18px;
}
.keys h3 { margin: 0 0 10px; font-size: 15px; }
.keys dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13.5px; }
.keys dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 6px; white-space: nowrap; align-self: start;
}
.keys dd { margin: 0; color: var(--muted); line-height: 1.5; }
.keys .btn { margin-top: 14px; }

/* 放大之后鼠标停在版面上要看出"能拖" */
body.reading .spread { cursor: grab; }

/* ── 打印：只印那一版报纸 ────────────────────────────────
   ★ 不加这一段的话，浏览器会把顶栏、面包屑、右栏文章、底栏缩略图
     一起印出来，而读者按下打印时想要的只有版面本身。
   ★ 用 `display:none` 而不是 `visibility:hidden`：后者留着空白占位，
     印出来是一张大半空白的纸。 */
@media print {
  .site-head, .read-head, .bar, .keys, .skip, .article { display: none !important; }
  .reader { display: block !important; height: auto !important; }
  .spread { overflow: visible !important; padding: 0 !important; background: #fff !important; }
  /* 缩放档位是屏幕上的偏好，打印要按纸宽来 */
  .page { width: 100% !important; max-width: 100% !important; box-shadow: none !important; }
  .hot, .wordhit { display: none !important; }
  @page { margin: 8mm; }
}

/* ── 整期总览（阅读器里的「目录」）──────────────────────────
   原来是纯文字的版号列表。对**纯 PDF 的期**（迁过来的 84 期全是这一档）
   那就是一串「这一版没有标注任何条目」—— 而翻旧报纸时唯一的问题
   恰恰是"我要的那一版长什么样、在哪"。缩略图是导入时就渲好的现成资源。 */
.toc-grid {
  display: grid; gap: clamp(14px, 2vw, 22px);
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  margin-top: 18px;
}
.toc-grid .toc-pg { margin: 0; border-top: 0; padding-top: 0; }
.toc-thumb { display: block; line-height: 0; box-shadow: var(--shadow); background: var(--panel); }
/* ★ 与首页卡片同一个坑：<img width height> 带来的 UA height 赢过 aspect-ratio。
     加 height:auto 让比例说了算，同时保留那两个属性（图到之前就占好位）。 */
.toc-thumb img { width: 100%; height: auto; display: block; }
.toc-nocover { display: grid; place-items: center; aspect-ratio: 864 / 1548; font-size: 28px; opacity: .3; }
.toc-grid h3 { margin: 8px 0 4px; font-size: 13px; letter-spacing: .06em; }
.toc-grid ul { padding-left: 16px; font-size: 12.5px; }
.toc-grid .empty { font-size: 12.5px; }

/* ★★ `[hidden]` 在这个页面上**不管用**，除非加这一条。
     `reader.css` 里有 `a.btn{display:inline-block}` —— 那是 (0,1,1)，
     而 UA 样式表里的 `[hidden]{display:none}` 只有 (0,1,0)，被压过去了。
     后果：JS 里 `el.hidden = true` 之后属性确实是 true、
     `getComputedStyle` 也照样是 inline-block，按钮还在屏幕上。
     2026-09-12 从截图里看出来的 —— 纯翻页版没有单版 PDF，
     那颗「本版」按钮藏不住，点了就是 404。
     检查这类问题必须看 computed display，光读 `.hidden` 属性会得到"已隐藏"。 */
[hidden] { display: none !important; }

/* 纯翻页版没有单版 PDF，逐版勾选与「已选 N 版」也就没有意义 —— 一起收起来 */
.reader-no-pagepdf .selall,
.reader-no-pagepdf .thumbs input[type=checkbox],
.reader-no-pagepdf #dlPicked { display: none !important; }

/* ★★ canvas 要和 `<img>` 一样按容器缩放。
     `reader.css` 里那条 `width:100%;height:auto` **只写给了 `.page img`** ——
     纯翻页版把元素换成 `<canvas>` 之后它不适用，于是 canvas 按自己的**像素数**
     铺开（DPR 2 的屏上是 1336 CSS px），在 864px 宽的 .page 里溢出、右边被裁掉，
     而画出来的内容本身是对的。2026-09-12 从截图里看出来的。

     ★ 这是同一类坑的第三次：`a.card` 的下划线、`a.btn[hidden]` 藏不住、
       现在是 canvas 不缩放 —— 全都是"样式按旧元素写的，元素换了"。
       换元素时要连着把针对旧标签的规则一起过一遍。 */
.page canvas { width: 100%; height: auto; display: block; }

/* ── 未标注版：整屏读版面 ──────────────────────────────────
   标注版的右半屏是文章正文（点版面上一块 → 右边出全文），那是它的主交互。
   **未标注版没有这个交互** —— 右半屏只放一句「这一期是原版翻页」，
   等于把一半视口用来写一句话，而读者要的恰恰是版面大一点。

   所以未标注版默认单栏。搜索有结果时再把右栏放回来（那时候它有内容了）。 */
.reader[data-solo="1"] { grid-template-columns: 1fr; }
.reader[data-solo="1"] > .article { display: none; }

/* ★★ 画好之前让 canvas 透明，好让 `.page` 的底图（17dpi 缩略图）透出来。
     canvas 用的是 `alpha:false` 的上下文，未绘制时是一块**不透明**的纯色，
     正好把底图盖住 —— 症状就是"先白屏，一两秒后出现"。
     底图一直在那儿，只是被一块空画布压着（2026-09-12 实测）。
     `transition` 让它画好时淡入，而不是"啪"地换一张。 */
.page canvas[data-pending] { opacity: 0; }
.page canvas { transition: opacity .18s ease-out; }

/* ── 首页：别处托管的电子报（后台 index.json 1.4 的 links[]）──
   不是地区标签：点了就离开本站。所以视觉上要和标签**分开** ——
   做成小一号的一行，排在标签条下面，带 ↗ 表示外跳。
   英文版的 links 是空数组，这一段在那边根本不渲染。 */
.ext-list {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin: 10px 0 0; font-size: 14px;
}
.ext-lbl { color: var(--muted); font-size: 13px; }
.ext { color: var(--muted); text-decoration: none; white-space: nowrap; padding: 2px 0; }
.ext:hover { color: var(--accent); text-decoration: underline; }
.ext:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
@media (max-width: 700px) { .ext-list { gap: 4px 12px; font-size: 15px; } }

/* ── 中文版（看中國電子報）────────────────────────────────────
   顶栏只有报头与主题键：VT 字标、账号导航、语言切换都拆了（用户 2026-10-29）。 */
/* ★ 顶上**不是一条菜单栏**（用户 2026-10-29：「顶部的菜单栏可以去掉，不用有明显分隔」）。
   报头居中、没有底色也没有分隔线 —— 它只是这一页的标题，不是一条导航。 */
.zh-head {
  justify-content: center; background: none; border: 0; box-shadow: none;
  padding: clamp(14px, 2.4vw, 24px) 16px 2px; min-height: 0;
  /* ★ 共用的 .site-head 是 position:sticky（英文版顶栏要一直跟着），
     中文版这里只是一个标题、不是导航，钉在顶上没有意义，还会压住地图。
     用户 2026-10-30：「不需要，正常放就行」。 */
  position: static; z-index: auto;
}
/* ★ 选择器要带上 .zh-head：外壳那两条 `.site-head h1`(0,1,1) 与
   `.site-head h1 a { color: inherit }`(0,1,2) 权重比裸 `.zh-brand` 高，
   不带的话字号和颜色都会被它们盖掉 —— 2026-10-29 就是这么漏的，
   标题被压成 20px 的黑字，而我以为自己写的是 32px 的红字。 */
.zh-head .zh-brand {
  margin: 0; font-size: clamp(22px, 3.4vw, 32px); font-weight: 700; letter-spacing: .04em;
}
.zh-head .zh-brand a { color: var(--accent); text-decoration: none; }
.zh-head .zh-brand a:hover { color: var(--accent-on); text-decoration: underline; }
.zh-foot { text-align: center; border-top: 0; }

/* 世界地图：静态 SVG 当底图，针是 HTML（见 views.ts 的 worldMap）。
   ★ 底图用 2:1 的等距圆柱投影，所以容器也必须是 2:1 —— 针是按百分比定位的，
     比例一变针就全偏。aspect-ratio 比 padding-top 那招直观，覆盖面也够了。 */
.worldmap {
  position: relative; aspect-ratio: 2 / 1; width: 100%;
  margin: 10px 0 18px; border-radius: 10px; overflow: hidden;
  background: var(--ocean, #dce8f2); border: 1px solid var(--line);
}
.worldmap-bg { display: block; width: 100%; height: 100%; object-fit: contain; }
/* ★ 没有深色分支：中文版在 layout 里写死 data-theme="light"（用户 10-29
   「明暗切换也拆掉，默认白底背景」）。底图是外链 SVG，CSS 变量本来也进不去，
   真要做深色得另出一张图 —— 现在不需要了。 */

.pins { position: absolute; inset: 0; }
.pin {
  position: absolute; transform: translate(-50%, -50%);
  text-decoration: none; color: inherit; line-height: 1;
}
.pin-dot {
  display: block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.4);
}
.pin-label {
  position: absolute; left: 50%; top: 50%; display: inline-block;
  padding: 1px 5px; border-radius: 4px; white-space: nowrap;
  font-size: clamp(10px, 1.15vw, 14px); font-weight: 600;
  color: #1a1a1a; background: rgba(255,255,255,.92);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.pin:hover .pin-dot, .pin:focus-visible .pin-dot { background: #0a7; }
.pin:hover .pin-label, .pin:focus-visible .pin-label { background: #fff; color: var(--accent); }
.pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
/* 手机上针挤成一团，标签全叠在一起 —— 只留圆点，名字看下面的列表。
   ★ 不是把地图整个藏起来：它仍然告诉读者"这些报纸分布在世界各地"。 */
@media (max-width: 620px) { .pin-label { display: none; } }

/* 地区目录：**按洲分组**（参照 pdf.secretchina.com）。
   第一层只是目录，点进去才是那个地区的期号列表。 */
.zh-dir { margin: 4px 0 8px; }
.zh-group { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; flex-wrap: wrap; }
/* ★ 组名用 --ink 不用 --muted。它是"北美 / 歐洲"这种结构标签，
   读者要靠它扫栏目；灰下去之后整页看着像没加载完（用户 2026-10-29 的反馈）。 */
.zh-group-h {
  flex: none; width: 3.2em; margin: 0; text-align: right;
  font-size: clamp(14px, 1.6vw, 16px); font-weight: 700; color: var(--ink);
}
/* 没有组名的那一行（全球版）也要对齐到同一条竖线上 */
.zh-group:not(:has(.zh-group-h)) .zh-row { margin-left: calc(3.2em + 10px); }
.zh-row { display: flex; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.zh-region {
  display: block; padding: 7px 13px; border-radius: 7px;
  color: var(--accent); text-decoration: none;
  font-size: clamp(15px, 1.7vw, 18px); white-space: nowrap;
}
.zh-region:hover { background: var(--hot); color: var(--accent-on); text-decoration: underline; }
.zh-region:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 外链弱一档 —— 点了会离开本站，不该和自有版面一样显眼。
   ★ 但"弱一档"是比自有版面低，不是灰到像禁用。用深灰而不是 --muted，
     真正区分它们的是后面那个 ↗。 */
.zh-ext { color: #4a4a4a; }
.zh-ext:hover { color: var(--accent-on); }
@media (max-width: 620px) {
  .zh-group { gap: 2px 8px; }
  .zh-group-h { width: auto; text-align: left; }
  .zh-group:not(:has(.zh-group-h)) .zh-row { margin-left: 0; }
}

/* 看中國的标志，摆在地图里 —— 位置照参照站 pdf.secretchina.com：
   水平居中、偏下，落在南大西洋那片空海上，不压住任何一个针。
   ★ 宽度用百分比：地图是按容器宽缩放的，标志跟着一起缩才不会在窄屏上变成一大块。 */
.worldmap-logo {
  position: absolute; left: 50%; top: 70%; transform: translate(-50%, -50%);
  width: 15%; height: auto; opacity: .92; pointer-events: none;
}
@media (max-width: 620px) { .worldmap-logo { width: 22%; opacity: .95; } }

/* ★ 中文版底色是**纯白**，不是浅色主题那个 #f4f4f2（用户 2026-10-29「底色用白色」）。
   作用域钉在 data-edition=zh 上，不去改 :root[data-theme=light] ——
   那一套英文版也在用，改它等于替英文版做决定。 */
:root[data-edition=zh] {
  /*
   * ★ **整套都写出来，不只是 --bg。** 只改背景的话，系统是深色的读者会拿到
   *   深色的 --ink / --muted / --accent 压在白底上 —— 标题近白、正文灰到看不清。
   *   2026-10-29 实测就是这样：--ink 算出来是 #e8e8e6。
   *
   * ★ 不靠 JS 兜底。site.js 那边也改了（不碰中文版的 data-theme），但样式
   *   不该依赖脚本有没有跑到 —— 脚本挂了页面还得能读。
   */
  --bg: #fff;
  --panel: #fff;
  /*
   * ★ 绿色系，取自 logo（用户 2026-10-29「字体颜色色系用绿色，参考 logo」）。
   *   `#156e5c` 是 logo 实际的主色（从 PNG 里数出来的，51.6 万个像素），
   *   对白底 6.15:1 —— 正文字号也过 AA，不只是大标题能用。
   *
   * ★ 正文不用纯绿，用**带一点绿的近黑**（#16211e，对白底 15.6:1）。
   *   整页绿字读久了累，而且强调色就不强调了 —— 绿留给可点的东西。
   *
   * ★ hover 用更深一档的 `--accent-on`，不是变浅：浅绿在白底上会掉对比度，
   *   "指上去反而看不清"是最差的 hover。
   */
  --ink: #16211e;
  --muted: #4b5c57;
  --line: #dde7e4;
  --accent: #156e5c;
  --accent-on: #0e4e41;
  --hot: rgba(21, 110, 92, .08);
  --hot-on: rgba(21, 110, 92, .24);
}
:root[data-edition=zh] body { background: #fff; }
/* 手机上报头也居中 —— 桌面已经是居中的，窄屏不该变成左对齐 */
@media (max-width: 760px) { .zh-head { justify-content: center; } }

/* 中文版地区页：不按年分组、一页 12 期，标签在封面上方（参照 pdf.secretchina.com） */
.zh-rh {
  margin: 6px 0 14px; font-size: clamp(19px, 2.6vw, 26px);
  font-weight: 700; color: var(--accent);
}
/* ★ 一页 12 期 = **3 行 4 列**（用户 2026-10-29「这样每一期可以大一些」）。
   列数写死 4 而不是 auto-fill：auto-fill 会按容器宽度自己decide，
   宽屏上排成 6 列、每张就又小回去了，那正是要改掉的事。
   窄屏降到 2 列（4 列的话每张只有 80px，报纸版面根本看不清）。 */
.zh-cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 18px; margin-bottom: 20px;
}
@media (max-width: 860px) { .zh-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .zh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } }
.zh-card { display: block; text-decoration: none; color: var(--accent); }
.zh-card b {
  display: block; margin-bottom: 5px; font-size: 14px; font-weight: 500;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zh-card img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); background: var(--panel);
}
.zh-card:hover b { text-decoration: underline; }
.zh-card:hover img { border-color: var(--accent); box-shadow: 0 2px 10px rgba(21,110,92,.22); }
.zh-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }