/* ============================================================
   zh-page-shell.css —— 中文站点「页面大模板 + 顶部导航」公共样式
   ------------------------------------------------------------
   适用范围：/zh/index.html、/zh/about/about.html、/zh/about/faq/index.html、
   /zh/docs/rules.html、/zh/download/index.html
   （各页顶部模板与导航条本应完全一致，此前却分散在各页专属文件里：
     .zh-nav 全套定义在 zh/css/zh-index.css，但容器规则分别挂在
     .zh-stack(index) / .zh-about-stack(about) 等容器上，
     导致同一套导航被多套不同容器规则包裹 —— 这就是顶部样式不一致的
     结构性根因。）

   本文件只承载「各页共用」的部分：
     1. 页面宽度与顶部让位（--brand-h / --zh-nav-h / --z-nav）
     2. 内容栈 .zh-stack（大屏双栏平铺）
     3. 顶部导航条 .zh-nav 全套（左中右三列 + 返回/标签/搜索/焦点态）
     4. 入场渐显 .zh-reveal
   各页专属内容（二维码、公告、图表、about 栅格等）仍留在各自的
   zh-index.css / zh-about.css 中，不在此文件。

   约定：
   - 配色一律走主题变量（/css/data/theme-default.json 注入），无硬编码色值
   - 尺寸/层级一律走变量，不写魔法数字
   - 断点与 /css/index.css、/zh/css/zh-about.css 保持一致
   ============================================================ */

/* ===== 页面外壳：内容栈 ===== */
.zh-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;

  /* ===== 吸顶导航所需的尺寸 / 层级变量 =====
     --z-nav 命名沿用站内独立页面既有约定（zh/about/faq/index.html、
       zh/smtp/index.html 等均以 --z-nav 承载导航层级），取值 3 依据
       /css/index.css 的既有层级规划：
         .main-stage 2  →  本导航 3  →  .brand 4  →  .theme-toggle 5
         → .hamburger 6  →  .settings-menu 7
       导航须低于 .brand（吸顶时停靠在品牌栏下沿，不与之争层级），
       且低于 .hamburger / .settings-menu（汉堡侧栏须盖在导航之上）。 */
  --brand-h: 70px;   /* .brand 固定栏实测高度：padding 18*2 + logo 34 */
  --zh-nav-h: 50px;  /* 导航条实测高度：padding 10*2 + 控件约 30 */
  --z-nav: 3;
}

/* ===== 解除窄列约束（大屏平铺）=====
   故障：/css/index.css 的 .main-stage 限宽 720→880→960→1040px 且居中，
   大屏下内容被压进中间一条窄列，两侧大片留白、信息被迫纵向堆叠。
   .main-stage 被 7 个页面共享，不能全局改，故用 :has() 精准命中
   「含有 .zh-stack 的 .main-stage」，只作用于采用本模板的三个页面。
   :has() 不被支持时整条规则被丢弃，退回原窄列布局（安全降级）。 */
@media (min-width: 1200px) {
  .main-stage:has(> .zh-stack) {
    /* 变量必须声明在使用者自身（或其祖先）上：CSS 自定义属性只向下继承，
       父级读不到子级定义的变量。声明在使用方上才能通过改它来调宽。 */
    --zh-index-w: 1440px;   /* 与 about 页 --layout-w-desktop 对齐 */
    max-width: var(--zh-index-w);
  }

  /* ===== 大屏双栏平铺 =====
     ⚠ 必须用 flex-wrap 而非 grid —— sticky 依赖包含块范围：
       grid 项的包含块是「它所在的网格区域」，导航条位于第 1 行、
       行高等于自身高度，sticky 没有可移动范围，会立刻滚走（吸顶静默失效）；
       flex 项的包含块是「整个 flex 容器」，覆盖下方全部板块，
       导航条才能在整个内容区滚动期间持续停靠。
     分栏：导航条与图表块独占整行，其余板块两两并排。 */
  .zh-stack {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .zh-stack > * { flex: 1 1 calc(50% - 10px); min-width: 0; }
  .zh-stack > .zh-nav { flex: 1 1 100%; }
  /* 图表块独占整行。用 :has() 按结构命中（内含图表容器即图表块），
     不依赖 aria-label 的中文文案 —— 否则 i18n 一改文案，布局会静默失效。 */
  .zh-stack > :has(.zh-chart-container) { flex: 1 1 100%; }
}

/* ===== 导航条吸顶 =====
   position:sticky（而非 fixed）—— 元素仍占据文档流位置，
   不会造成后续内容整体上移，也无需为它额外补偿占位高度。
   top 取 .brand 固定栏高度：品牌栏常驻视口 [0, --brand-h]，
   导航停靠在其下沿，避免被层级更高的 .brand 盖住。 */
.zh-stack .zh-nav {
  position: sticky;
  top: var(--brand-h);
  z-index: var(--z-nav);
}

/* 锚点跳转 / 键盘聚焦时，目标内容不被吸顶导航遮住 */
.zh-stack > * {
  scroll-margin-top: calc(var(--brand-h) + var(--zh-nav-h) + 18px);
}

/* ===== 桌面端顶部让位（让开固定品牌栏）===== */
@media (min-width: 641px) {
  .zh-stack {
    margin-top: 76px;          /* 20(body padding) + 76 = 96px 静止位 */
  }
}

/* ===== 顶部导航条（返回主站 | 首页/关于/下载 | 搜索） =====
   采用左中右三列等宽栅格：返回主站居左、主导航严格居中、搜索居右，
   修复此前 space-between 在两侧元素宽度不等时导致的居中错位。 */
.zh-nav {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-md);
  background:
    var(--layer-tint),
    var(--surface-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--surface-card-shadow);
  transition: background-color var(--theme-fade) ease, border-color var(--theme-fade) ease;
}

/* 左列：返回主站，justify-self:start 保证贴左 */
.zh-nav-left { display: flex; justify-content: flex-start; min-width: 0; }

/* 中列：主导航，严格居中于整条导航条 */
.zh-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  justify-self: center;
  min-width: 0;
}

/* 右列：搜索入口，justify-self:end 保证贴右 */
.zh-nav-right { display: flex; justify-content: flex-end; min-width: 0; }

.zh-nav-link {
  position: relative;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-decoration: none;
  color: var(--text-dim);
  white-space: nowrap;
  transition: color 0.28s var(--smooth), background 0.28s var(--smooth);
}
.zh-nav-link:hover {
  color: var(--text);
  background: var(--btn-ghost-bg-hover);
}
.zh-nav-link.active {
  color: var(--btn-primary-text);
  background: var(--btn-primary-bg);
  box-shadow: var(--btn-primary-shadow);
}
.zh-nav-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ===== 站内搜索入口（外链放大镜 SVG + 搜索文字） ===== */
.zh-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--search-border);
  background: var(--search-bg);
  color: var(--search-text);
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.28s var(--smooth), border-color 0.28s var(--smooth),
              color 0.28s var(--smooth), transform 0.3s var(--elastic-soft);
}
.zh-search-btn:hover {
  background: var(--btn-ghost-bg-hover);
  border-color: var(--btn-primary-border);
  color: var(--header-bar-accent);
  transform: translateY(-1px);
}
.zh-search-btn:active { transform: translateY(0) scale(0.97); }
.zh-search-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.zh-search-btn img {
  width: 15px;
  height: 15px;
  flex: none;
  filter: var(--icon-filter);
}

/* 返回主站（外链 SVG 箭头，向左旋转得到返回语义） */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--toggle-border);
  background: var(--toggle-bg);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-dim);
  white-space: nowrap;
  transition: color 0.28s var(--smooth), background 0.28s var(--smooth),
              border-color 0.28s var(--smooth), transform 0.3s var(--elastic-soft);
}
.back-link:hover {
  color: var(--text);
  background: var(--toggle-bg-hover);
  border-color: var(--btn-border-hover);
  transform: translateX(-2px);
}
.back-link:active { transform: translateX(0) scale(0.97); }
.back-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.back-link img {
  width: 14px;
  height: 14px;
  flex: none;
  transform: rotate(90deg);        /* 下箭头旋转为左箭头 */
  filter: var(--icon-filter);
}

/* ===== 入场渐显 =====
   .zh-reveal 初始 opacity:0，必须由 js/zh-page-shell.js 补 .show 才可见。
   不支持 JS 时由各页 <noscript> 兜底显示，避免内容永久不可见。 */
.zh-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--smooth), transform 0.7s var(--elastic-soft);
}
.zh-reveal.show {
  opacity: 1;
  transform: translateY(0);
}

/* ===== 响应式：平板 / 桌面 ===== */
@media (min-width: 641px) and (max-width: 1024px) {
  .zh-stack { gap: 16px; }
}

@media (min-width: 1025px) {
  .zh-stack { gap: 20px; }
}

/* ===== 响应式：移动端 ===== */
@media (max-width: 640px) {
  /* 断点覆盖：/css/index.css 在 ≤640px 把 .brand 收窄为
     padding 14px*2 + logo 28px = 56px，吸顶停靠位须同步下移；
     同时导航改为「返回主站 + 搜索」一行、主导航独占第二行的两行结构。 */
  .zh-stack {
    gap: 14px;
    --brand-h: 56px;
    --zh-nav-h: 82px;

    /* 修复小屏顶部过度留白：
       .main-stage margin-top:72px + body padding-top:20px = 起点 92px，
       而本断点 .brand 实际只有 56px → 中间空出 36px 死白。
       用负 margin 精确抵消：92 - 56 - 8(呼吸) = 28px。 */
    margin-top: -28px;
  }

  /* 移动端窄屏放弃三列栅格：返回主站与搜索同处首行两端，主导航独占第二行居中 */
  .zh-nav {
    display: flex;
    flex-wrap: wrap;
    padding: 8px 10px;
    gap: 8px;
    align-items: center;
  }
  .zh-nav-left { flex: 1 1 auto; justify-content: flex-start; }
  .zh-nav-right { flex: 1 1 auto; justify-content: flex-end; }
  .zh-nav-links {
    order: 3;
    flex: 1 1 100%;
    justify-content: center;
    justify-self: stretch;
    width: 100%;
  }
  /* ===== 移动端三控件统一（沿用 zh-about.css 的既有修复）=====
     故障成因（见原 zh-about.css 注释）：
       三控件在移动端取值互不一致 ——
         返回主站 13.5px / padding 6px 12px  → 实测高 32px
         导航标签 13px   / padding 5px 12px  → 实测高 28px
         搜索按钮 13px   / padding 5px 11px  → 实测高 30px
       同一行内三者高度参差（32/28/30），首行两端对齐时基线不齐。
     修复：统一字号与内边距；导航标签为纯文字，用行高补足到 32px；
       图标尺寸统一，避免不同图标高度反向撑大控件。
     此前这段修复只写在 zh-about.css（仅 about 页生效），
     index 页仍是参差状态 —— 这正是「两页不一致」在移动端的体现。 */
  .zh-nav .back-link,
  .zh-nav .zh-nav-link,
  .zh-nav .zh-search-btn {
    font-size: 13px;
    padding: 6px 12px;
    line-height: 1.4;
  }
  /* 搜索按钮左右内边距略收，保证「返回主站 + 搜索」在 360px 仍各居两端 */
  .zh-nav .zh-search-btn { padding: 6px 11px; }
  .zh-nav .zh-nav-link { line-height: 20px; }
  .zh-nav .back-link img,
  .zh-nav .zh-search-btn img {
    width: 14px;
    height: 14px;
  }
  /* 行内垂直居中：消除参差导致的基线错位 */
  .zh-nav-left,
  .zh-nav-right { align-items: center; }
  .zh-nav-links { gap: 6px; }
}

/* ===== 极窄屏（≤380px）===== */
@media (max-width: 380px) {
  .zh-stack {
    --brand-h: 50px;   /* padding 12*2 + logo 26 */
    --zh-nav-h: 78px;
    /* 84(64+20) - 50 - 8 = 26px */
    margin-top: -26px;
  }
  .zh-nav-link { padding: 5px 10px; font-size: 12.5px; }
  .back-link { padding: 5px 10px; font-size: 12.5px; }
}

/* ===== 横屏矮视口 ===== */
@media (max-height: 480px) and (orientation: landscape) {
  .zh-stack { gap: 12px; }
}

/* ===== 无障碍：减少运动偏好 ===== */
@media (prefers-reduced-motion: reduce) {
  .zh-reveal { transition-duration: 0.15s; transform: none; }
  .back-link,
  .zh-nav-link,
  .zh-search-btn { transition-duration: 0.15s; }
}

/* ===== 动画加速开关 ===== */
.anim-slow .zh-reveal,
.anim-slow .back-link,
.anim-slow .zh-nav-link,
.anim-slow .zh-search-btn {
  transition-duration: 0.2s;
  transition-timing-function: ease;
}


/* ============================================================
   跨页共用的通用组件（操作按钮 / 加载指示 / 统计图表容器）
   ------------------------------------------------------------
   以下规则被 /zh/index.html 与 /zh/about/about.html 两页同时使用，
   原定义在 zh/css/zh-index.css（首页专属文件）中，导致 about 页
   依赖首页样式文件才能正常渲染 —— 这是跨页样式耦合的典型表现。
   现统一迁入公共壳，两页共用一份定义；取值与改造前逐字一致。
   ============================================================ */

/* 操作按钮组（下载二维码 / 打开 APP） */
.zh-action-row {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.zh-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--btn-border);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--btn-text);
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  background-size: 200% 200%;
  background-position: 0% 50%;
  box-shadow: 0 4px 16px var(--accent-glow), inset 0 1px 0 var(--btn-inset);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.32s var(--elastic-soft), box-shadow 0.32s var(--smooth),
              background-position 0.5s ease, border-color 0.28s var(--smooth);
}
.zh-action-btn:hover {
  transform: translateY(-2px);
  background-position: 100% 50%;
  border-color: var(--btn-border-hover);
  box-shadow: 0 10px 26px var(--accent-glow-strong), inset 0 1px 0 var(--btn-inset-hover);
}
.zh-action-btn:active { transform: translateY(0) scale(0.98); }
.zh-action-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.zh-action-btn.alt {
  background: linear-gradient(135deg, var(--orange), var(--gold));
  box-shadow: 0 4px 16px var(--orange-glow), inset 0 1px 0 var(--btn-inset);
}
.zh-action-btn.alt:hover { box-shadow: 0 10px 26px var(--orange-glow), inset 0 1px 0 var(--btn-inset-hover); }


/* 二维码错误面板 */
.zh-error-panel {
  display: none;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--orange);
  background: var(--bg-card);
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}
.zh-error-panel strong { color: var(--orange); font-weight: 600; }


/* ===== 访问统计图表 ===== */
.zh-chart-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
}
.zh-chart-title img {
  width: 20px;
  height: 20px;
  flex: none;
  filter: drop-shadow(0 0 6px var(--h2-icon-glow));
}
.zh-chart-container {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 240px;
  padding: 6px;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}
.zh-chart-container canvas { display: block; width: 100% !important; }
.zh-chart-mask {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  z-index: 2;
}
.zh-chart-mask-text {
  font-size: 13px;
  color: var(--text-dim);
}
/* 轻量加载指示：柔和缩放，无旋转抖动 */
.zh-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--bg-card-border);
  border-top-color: var(--blue);
  animation: zhSpinner 1s linear infinite;
}
@keyframes zhSpinner { to { transform: rotate(360deg); } }
.zh-chart-error {
  display: none;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--orange);
  background: var(--bg-card);
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}
.zh-chart-error a { color: var(--blue); text-decoration: underline; }

/* ===== 响应式：平板 / 桌面 ===== */
@media (min-width: 641px) and (max-width: 1024px) {
  .zh-stack { gap: 16px; }
  .zh-chart-container { min-height: 260px; }
}

@media (min-width: 1025px) {
  .zh-stack { gap: 20px; }
  .zh-chart-container { min-height: 280px; }
}

/* ===== 响应式：移动端 =====
   移动端降低运动跨度、关闭横向滚动公告，杜绝溢出与剧烈跳动 */
@media (max-width: 640px) {
  /* 断点覆盖：/css/index.css 在 ≤640px 把 .brand 收窄为
     padding 14px*2 + logo 28px = 56px，吸顶停靠位须同步下移；
     同时本页导航在该断点改为「返回主站 + 搜索」一行、主导航独占第二行的


  /* 移动端公告改为单行省略，关闭无限横向滚动，彻底消除溢出 */
  .zh-notice { flex-wrap: wrap; padding: 10px 12px; }
  .zh-notice-track { flex: 1 1 100%; }
  .zh-notice-text {
    display: block;
    animation: none;
    transform: none;
    padding-right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
  }
  .zh-notice-detail { flex: 1 1 auto; justify-content: center; text-align: center; }

  .zh-status-note { font-size: 12.5px; }

  .zh-intro-body p { font-size: 13.5px; line-height: 1.85; }
  .zh-intro-body .text-icon { margin-top: 5px; }

  .zh-group-tip { font-size: 12.5px; padding: 9px 12px; }

  /* 移动端二维码操作按钮加大点击区，避免与小屏图标重叠 */
  .zh-qr-wrap { width: min(240px, 72vw); }
  .zh-qr-action { width: 34px; height: 34px; }
  .zh-qr-info { right: 46px; }

  .zh-action-row { gap: 8px; }
  .zh-action-btn {
    flex: 1 1 100%;
    justify-content: center;
    padding: 12px 18px;
  }

  .zh-chart-container { min-height: 200px; }

  /* 入场位移收敛为极小值，避免向上弹出 */
  .zh-reveal { transform: translateY(8px); }
}

/* ===== 极窄屏（≤380px）===== */
@media (max-width: 380px) {
  .zh-nav-link { padding: 5px 10px; font-size: 12.5px; }
  .back-link { font-size: 12.5px; padding: 5px 10px; }
  .zh-social-btn { padding: 6px 13px; font-size: 12.5px; }
  .zh-qr-wrap { width: min(200px, 68vw); }
  .zh-notice-detail { font-size: 12px; padding: 5px 10px; }
}

/* ===== 横屏矮视口 ===== */
@media (max-height: 480px) and (orientation: landscape) {
  .zh-stack { gap: 12px; }
  .zh-chart-container { min-height: 180px; }
}

/* ===== 无障碍：减少运动偏好 ===== */
@media (prefers-reduced-motion: reduce) {
  .zh-notice-text { animation: none; }
  .zh-spinner { animation-duration: 2s; }
  .zh-reveal { transition-duration: 0.15s; transform: none; }
  .zh-action-btn,
  .zh-social-btn,
  .back-link,
  .zh-qr-action { transition-duration: 0.15s; }
}

/* ===== 动画加速开关：收敛过渡，保持柔和而非生硬跳变 ===== */
.anim-slow .zh-reveal,
.anim-slow .zh-action-btn,
.anim-slow .zh-social-btn,
.anim-slow .back-link,
.anim-slow .zh-qr-action,
.anim-slow .zh-nav-link,
.anim-slow .zh-status-indicator,
.anim-slow .zh-notice-detail {
  transition-duration: 0.2s;
  transition-timing-function: ease;
}