/* ==========================================================================
   WAP（2G 彩屏 / 手机门户）复刻样式表 —— public/wap.css

   ⚠️ 位置与缓存（2026-09-09）：
   本文件放在 public/ 下由 Pages 原样静态托管（路径 /wap.css），**无内容 hash**，
   缓存靠 `wap2g/Shell.astro` 里的 `WAP_CSS_VERSION` 查询串手动 bump ——
   改完本文件必须同步改那个版本号，否则线上拿不到新样式。
   2026-09-09 之前位于 src/styles/ 并以 `?raw` 内联进每个页面（8.4KB/页，不可缓存），已废弃该做法。

   作用域隔离契约：
   1. 不 @import "tailwindcss"；不被 global.css 引入；不写 @layer。
   2. 每条选择器以 html[data-template="wap2g"] 打头，default 页面零命中。
   3. 布局只用 block / inline-block / table 三种传统流式模型。
   4. 直角细线，无圆角、无阴影、无渐变、无断点查询。

   ⚠️ 观感基准（2026-09-07 用户拍板「完全复刻天下网观感」）：
   以 tx.com.cn 手机版实测参数为基准（Chrome 实测 2026-09-07）：
     - 内容列宽 340px（实测 338~360px；旧版 176px 过窄是「没感觉」主因）
     - 主导航条 深橙 #FF8F1A 白字加粗（实测 rgb(255,143,26)）
     - 区块标题条 浅琥珀 #FFD472 黑字加粗（实测 rgb(255,212,114)）
     - 正文链接 蓝 #005FEE（实测 rgb(0,95,238)）
     - 行分隔 1px #FFDABB（实测 0.8px solid rgb(255,218,187)）
     - 中文字体 SimSun/宋体 + 拉丁 Verdana；正文 13px
   本模板配色与站点默认陶土主题不同，属「完全复刻」指令下的有意为之。
   ========================================================================== */

/* --- 自带 reset：不依赖 Tailwind preflight，保证 WAP 页零外部样式依赖 --- */
html[data-template="wap2g"],
html[data-template="wap2g"] body {
  margin: 0;
  padding: 0;
  background-color: #d6d6d6;
  color: #000000;
}

html[data-template="wap2g"] body {
  /* 跨设备统一：关闭 iOS Safari 横竖屏自动放大字号 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 字体栈全局精确使用参考站取值；全局字号统一 16px */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* --- 容器：338px 居中单栏；max-width:100% 窄屏不溢出；最外层 padding:10px（参考 tx） --- */
html[data-template="wap2g"] #page {
  width: 338px;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-left: 1px solid #c8c8c8;
  border-right: 1px solid #c8c8c8;
  /* 跨设备放大：屏宽 338px 起等比放大，440px(338×1.3) 及以上封顶 1.3 倍（2026-09-09）
     —— 桌面端 338px 细栏观感过窄，手机上则刚好铺满 */
  zoom: clamp(1, calc(100vw / 338px), 1.3);
}

/* --- 正文基础排版 --- */
html[data-template="wap2g"] #main {
  padding: 0 0 2px;
  word-break: break-all;
}

html[data-template="wap2g"] h1 {
  margin: 4px 0;
  padding: 0;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
}

/* 文章详情页标题：居中（2026-09-08 用户要求） */
html[data-template="wap2g"] .post-title {
  text-align: center;
}

html[data-template="wap2g"] h2 {
  margin: 4px 0 2px;
  padding: 0;
  font-size: 16px;
  font-weight: bold;
}

html[data-template="wap2g"] h3 {
  margin: 4px 0 2px;
  padding: 0;
  font-size: 16px;
  font-weight: bold;
  color: #005fee;
}

html[data-template="wap2g"] p {
  margin: 0 0 4px;
  padding: 0;
}

html[data-template="wap2g"] ul {
  margin: 0 0 4px;
  padding-left: 16px;
  list-style-type: square;
}

html[data-template="wap2g"] li {
  margin: 0;
  padding: 1px 0;
}

html[data-template="wap2g"] img {
  max-width: 100%;
  height: auto;
  border: 0;
}

html[data-template="wap2g"] a {
  color: #005fee;
  text-decoration: none;
}

html[data-template="wap2g"] a:hover {
  text-decoration: underline;
}

html[data-template="wap2g"] hr {
  height: 0;
  margin: 4px 0;
  border: 0;
  border-top: 1px solid #ffdabb;
}

/* --- [WAP:cover] 文章封面：16/9 容器 + LQIP 模糊占位（blur-up，0 行 JS）---
   容器必须写死 aspect-ratio：封面 <img> 无 width/height 属性，真实图加载完前
   高度为 0，背景里的 24px 模糊图会完全不可见（顺带把 CLS 也治了）。
   模糊来自「24px 图被放大」的双线性插值，不用 filter: blur()（省一层合成）。
   加载前 img 透明 -> 透出背景模糊图；加载完 img 不透明 -> 自然盖住，无 JS。 */
html[data-template="wap2g"] .wap-cover {
  position: relative;
  display: block;
  width: 100%;
  /* 兜底占位高度：真实图与 LQIP 都没有时也不塌成 0 */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #f2f2f2;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

html[data-template="wap2g"] .wap-cover img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  border: 0;
}

/* --- [WAP:01-brandbar] 品牌栏：站点图标 + 左对齐站名（2026-09-07 用户去色改左对齐） --- */
html[data-template="wap2g"] .brandbar {
  display: flex;
  align-items: center;
  padding: 3px 4px 2px;
  border-bottom: 1px solid #ffdabb;
  text-align: left;
}

html[data-template="wap2g"] .brandbar-logo {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 0;
  vertical-align: middle;
  margin-right: 3px;
}

html[data-template="wap2g"] .brandbar-name {
  font-weight: bold;
  color: #000000;
  vertical-align: middle;
}

/* --- [WAP:02-nav] 主导航：已改渲染为 portal-row（见 WapNav.astro），无专属样式 --- */
/* 2026-09-07 用户要求：顶导航样式改同页面底部「首页 | 搜索 | 返回顶部」普通行 */

/* --- [WAP:04-headline] 区块标题条：浅琥珀底黑字加粗（实测 #FFD472） --- */
html[data-template="wap2g"] .sec-title {
  margin-top: 2px;
  padding: 2px 4px;
  border-top: 1px solid #ffe9c2;
  border-bottom: 1px solid #ffd472;
  background-color: #ffd472;
  color: #000000;
  font-weight: bold;
}

html[data-template="wap2g"] .sec-body {
  padding: 3px 4px;
}

/* --- [WAP:04~09] 门户链接行：「栏目:词条,词条」/ 每行一条文章 --- */
html[data-template="wap2g"] .portal-row {
  padding: 2px 4px;
  border-bottom: 1px solid #ffdabb;
  color: #000000;
  word-break: break-all;
}

/* --- [WAP:hot-keywords] 搜索页热门关键词：竖排（一行一个）+ 条目间分隔线 ---
   2026-09-13（8f96d749）：内边距对齐 .portal-row（2px 4px）。
   2026-09-14：颜色改蓝 #005fee（对齐顶部导航链接），去掉下划线。 */
html[data-template="wap2g"] .hotkw-list {
  padding: 0 4px;
}
html[data-template="wap2g"] .hotkw-item {
  display: block;
  padding: 2px 4px;
  border-bottom: 1px solid #ffdabb;
  color: #005fee;
  word-break: break-all;
}

/* --- [WAP:pinned] 首页置顶行：加粗 + 浅底，直角细线（无圆角/阴影/渐变/emoji） --- */
html[data-template="wap2g"] .portal-row.pinned {
  background-color: #fff1e3;
  font-weight: bold;
}

/* --- [WAP:05-pager] / [WAP:06-ad] / [WAP:09-download] 通用行 --- */
html[data-template="wap2g"] .waprow {
  padding: 3px 4px;
  border-top: 1px solid #ffdabb;
  color: #666666;
  text-align: center;
}

/* --- [WAP:search] 搜索表单：参考 tx 聊天搜索页样式，跨设备统一锁死 --- */
html[data-template="wap2g"] .wap-form {
  margin: 0;
  padding: 0;
}
html[data-template="wap2g"] .wap-input,
html[data-template="wap2g"] .wap-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.2;
  color: #000;
  background: #ffffff;
  border: 1px solid #000000;
  padding: 1px 3px;
  margin: 0;
  box-sizing: border-box;
}
html[data-template="wap2g"] .wap-input {
  width: 100%;
  display: block;
}
html[data-template="wap2g"] .wap-textarea {
  min-height: 80px;
  resize: vertical;
}
html[data-template="wap2g"] .wap-button {
  background: #eeeeee;
  cursor: pointer;
  display: inline-block;
  margin-top: 3px;
  padding: 1px 6px;
}
html[data-template="wap2g"] .wap-button:active {
  background: #dddddd;
}

/* --- [WAP:comment] 文章评论：标题条 + 输入框 + 提交，调起邮件客户端 --- */
html[data-template="wap2g"] .wap-comment-form .wap-textarea {
  margin-bottom: 2px;
}

/* 评论错误提示行：形制对齐后台 .error-line（直角细线 + 红字小号），
   无圆角/阴影/渐变，靠 hidden 属性显隐（JS 只切 hidden，不碰样式）。 */
html[data-template="wap2g"] .wap-error-line {
  margin-top: 3px;
  margin-bottom: 2px;
  padding: 3px 4px;
  border: 1px solid #cc0000;
  background-color: #fff0f0;
  color: #cc0000;
  font-size: 14px;
}

/* hidden 属性兜底：本条作者规则声明了 padding/border，显式还原 display:none，
   避免个别 UA 的 [hidden] 被作者样式盖过后留下空红框。 */
html[data-template="wap2g"] .wap-error-line[hidden] {
  display: none;
}

/* --- [WAP:10-footer] 页脚 --- */
html[data-template="wap2g"] .wapfooter {
  margin-top: 4px;
  padding: 4px;
  color: #666666;
  font-size: 16px;
  text-align: center;
}

html[data-template="wap2g"] .wapfooter p {
  margin: 0;
  padding: 1px 0;
}

html[data-template="wap2g"] .wapfooter .carrier {
  color: #005fee;
}

html[data-template="wap2g"] .wapfooter .copyright {
  color: #666666;
}

html[data-template="wap2g"] .wapfooter .disclaimer {
  color: #999999;
}

/* --- [WAP:pager] 分页（参考天下网 tx.com.cn 论坛：peach 浅黄底蓝字链接 + 原生 form-control 跳页框） --- */
html[data-template="wap2g"] .wap-pager {
  margin: 6px 0 2px;
  padding: 0;
  text-align: center;
  line-height: 1.2;
}
html[data-template="wap2g"] .wap-pager a {
  display: inline-block;
  margin: 3px;
  padding: 0 2px;
  font-size: 16px;
  line-height: 1.4;
  color: #005fee;
  background-color: #fff1e3;
  border: 1px solid #f9e8d8;
  text-decoration: none;
  vertical-align: middle;
}
html[data-template="wap2g"] .wap-pager a:active {
  background-color: #ffe1c8;
}

html[data-template="wap2g"] .wap-pager-info {
  margin: 0 0 6px;
  padding: 0;
  font-size: 16px;
  line-height: 1.4;
  color: #000;
  text-align: center;
  white-space: nowrap;
}
html[data-template="wap2g"] .wap-pager-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  width: 40px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.2;
  padding: 1px 2px;
  margin: 0 1px;
  background: #ffffff;
  color: #000;
  border: 1.5px inset #767676;
  box-sizing: border-box;
  vertical-align: middle;
}
html[data-template="wap2g"] .wap-pager-submit {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.2;
  padding: 1px 6px;
  margin: 0 0 0 2px;
  background: #f0f0f0;
  color: #000;
  border: 1.5px outset #000;
  box-sizing: border-box;
  vertical-align: middle;
  cursor: pointer;
}
html[data-template="wap2g"] .wap-pager-submit:active {
  border-style: inset;
}

/* --- [WAP:member] 前台会员表单（/login /verify-email /set-password /me，2026-09-19）---
   约束（架构 §5 wap2g）：纯文字，零 emoji / 图标 / 外部资源；输入框 font-size:16px（iOS
   聚焦不自动放大页面）+ height:44px；错误就地显示在字段下方（.wap-error-line），禁 alert /
   confirm；布局只用 block / inline-block，不引入 flex。 */
html[data-template="wap2g"] .wap-field {
  margin: 0 0 6px;
}

html[data-template="wap2g"] .wap-label {
  display: block;
  margin: 0 0 2px;
  font-size: 14px;
  color: #333333;
}

html[data-template="wap2g"] .wap-field .wap-input {
  height: 44px;
  padding: 1px 6px;
}

html[data-template="wap2g"] .wap-hint {
  margin: 2px 0 0;
  font-size: 14px;
  color: #666666;
}

/* 只读字段（邮箱）：与输入框同排版，但不做输入框形制 */
html[data-template="wap2g"] .wap-static {
  font-size: 16px;
  color: #000000;
  word-break: break-all;
}

/* 图形验证码：图 + 输入框并排（inline-block，禁 flex），点击图片刷新。
   font-size:0 + 子元素显式字号：吃掉 inline-block 之间的空白，保证并排不换行。 */
html[data-template="wap2g"] .wap-captcha-row {
  font-size: 0;
  white-space: nowrap;
}

html[data-template="wap2g"] .wap-captcha-img {
  display: inline-block;
  width: 96px;
  height: 44px;
  vertical-align: middle;
  border: 1px solid #000000;
  background-color: #ffffff;
  cursor: pointer;
}

html[data-template="wap2g"] .wap-captcha-input {
  display: inline-block;
  width: calc(100% - 104px);
  vertical-align: middle;
  /* 显式重申 16px：iOS 只在 <16px 时自动放大，父级 font-size:0 不能波及输入框 */
  font-size: 16px;
  text-transform: uppercase;
}

/* 全宽按钮：与输入框同高 44px，单手可点；禁用态置灰（发信冷却倒计时） */
html[data-template="wap2g"] .wap-btn-block {
  display: block;
  width: 100%;
  height: 44px;
  margin-top: 6px;
  padding: 0;
  font-size: 16px;
  line-height: 42px;
  text-align: center;
}

html[data-template="wap2g"] .wap-btn-block:disabled {
  background-color: #f0f0f0;
  color: #999999;
  cursor: default;
}

/* 提示行（成功 / 中性说明）：直角细线 + 绿字，形制对齐 .wap-error-line */
html[data-template="wap2g"] .wap-note-line {
  margin: 0 0 6px;
  padding: 3px 4px;
  border: 1px solid #1a7f37;
  background-color: #f2fbf4;
  color: #1a7f37;
  font-size: 14px;
  word-break: break-all;
}

/* 就地展开的纯文字二次确认块（注销账号，禁原生 confirm） */
html[data-template="wap2g"] .wap-confirm {
  margin: 6px 0 0;
  padding: 3px 4px;
  border-top: 1px solid #ffdabb;
  border-bottom: 1px solid #ffdabb;
}

html[data-template="wap2g"] .wap-link-row {
  margin: 6px 0 0;
  padding: 2px 0;
  font-size: 14px;
  color: #333333;
}

html[data-template="wap2g"] .wap-link-row a {
  color: #005fee;
}

/* hidden 兜底：下面这些类都由作者规则声明了盒模型，个别 UA 的 [hidden] 会被盖过，
   显式还原 display:none，避免留下空框（同 .wap-error-line[hidden] 的处理）。 */
html[data-template="wap2g"] .wap-note-line[hidden],
html[data-template="wap2g"] .wap-confirm[hidden],
html[data-template="wap2g"] .wap-field[hidden],
html[data-template="wap2g"] .wap-link-row[hidden] {
  display: none;
}

/* --- iOS PWA standalone 状态栏适配（2026-09-10 修订）---
   背景：wap2g Shell 用 apple-mobile-web-app-status-bar-style=black-translucent + viewport-fit=cover，
   standalone 模式下状态栏透明、网页延伸到屏幕最顶端（刘海机 env(safe-area-inset-top) ≈ 47~59px）。
   若不做下推，状态栏/刘海会直接压住品牌栏文字。
   做法：#page 顶部内边距叠加 safe-area 把内容推出安全区，橙条（::before）覆盖状态栏区域，
   既不露灰底、也不挡字；底部补 safe-area-inset-bottom 避开 Home 指示条。
   ⚠️ 必须放在文件末尾：选择器与 #page 基础规则同特异性，靠「后来者胜」才生效，
   写在前会被 `padding:10px;background-color:#fff` 覆盖（首版即因此失效）。
   仅 standalone 生效（普通 Safari 不命中），零副作用。 */
@media (display-mode: standalone) {
  html[data-template="wap2g"] #page {
    position: relative;
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  /* 状态栏区域橙色条带：高度与顶部内边距一致，随 zoom 同步缩放 */
  html[data-template="wap2g"] #page::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(10px + env(safe-area-inset-top));
    background-color: #ff8f1a;
  }
}

/* --- 极窄屏最小兜底（≤360px，覆盖《前端开发规范》三·2 要求的 320 断点）---
   《WAP 复刻规范》禁 media query，本块是客户拍板「补最小兜底、不改整体复刻观感」的
   唯一例外：320px 视口下 #page 的 10px 左右内边距把正文挤得过窄，且 zoom 下限 1 时
   固定 width:338px 更易触发横向溢出。
   做法：仅把左右内边距收到 6px，并允许 zoom 在极窄屏下探到 <1（按 100vw/338 缩放正好
   铺满），保证 320px 不横向溢出、不挤压。不改版心逻辑（基础 zoom: clamp(...) 保留），
   不引入多断点，不重构布局模型。 */
@media (max-width: 360px) {
  html[data-template="wap2g"] #page {
    padding-left: 6px;
    padding-right: 6px;
    /* 极窄屏允许 <1：320px 时 ≈0.947，338px×0.947≈320 恰好铺满且无水平滚动 */
    zoom: clamp(0.9, calc(100vw / 338px), 1.3);
  }
  /* 会员入口（登录 / 我的）必须留在导航行尾不被挤掉，故窄屏让位的是「标签」而非它
     （PRD 验收 E）。分隔符与链接同批渲染、共用一个类，整对隐藏。 */
  html[data-template="wap2g"] .portal-row .nav-narrow-hide {
    display: none;
  }
}