/* ============================================================
   言语芽｜「关于本页」静态说明区块（page-about）

   【为什么存在】
     配对 / 专注力 / 评估中心 / 家长自测 / ABC / M-CHAT 这几个页面的正文
     全部由 JS 渲染（body 里只有一个挂载点）。而 AI 爬虫与部分搜索引擎
     抓取程序**不执行 JS** —— 实测这些页面在不执行 JS 时只能读到 8–47 个字，
     等于对 AI 完全隐形。

   【为什么不做成 display:none 或 noscript】
     把内容只给爬虫看、真人看不到，属于 cloaking（伪装），会被搜索引擎处罚，
     也会被检索系统折价。所以这里的文字**对人和爬虫都真实可见**，
     只是放在页面底部，不挡孩子的游戏区。

   【为什么不用 Tailwind】
     引用这套样式的页面有的用 Tailwind、有的用自定义 CSS，
     这里用自带前缀的纯 CSS，避免和页面既有样式打架。
   ============================================================ */
.page-about {
  box-sizing: border-box;
  max-width: 860px;
  margin: 10px auto 0;
  padding: 18px 20px 20px;
  background: #fff;
  border: 1px solid #e7efec;
  border-radius: 14px;
  color: #5a6f6a;
  font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 13.5px;
  line-height: 1.85;
  text-align: left;
}

/* ⚠️ 有的页面把 body 设成了 flex（只有一个子元素时看不出差别，布局照样对）。
   这时再加一个兄弟节点，它会被当成 flex item 和主界面**并排**，把主界面压窄一半
   —— parent-screening.html 实测就是这样（app 206px + 说明 204px 并排）。
   下面两行让这个区块永远独占一整行；body 不是 flex 时这两条被忽略，无副作用。
   注意：以前这里是 `body{flex-wrap}` 的写法，配合给本区块 flex-basis:100%，
   换行后它自然占满一行，不需要给 body 设方向或宽度。 */
body { flex-wrap: wrap; }
body > .page-about { flex: 0 0 100%; }
.page-about h1,
.page-about h2,
.page-about h3 { color: #24423e; line-height: 1.5; }
.page-about h1 { font-size: 21px; margin: 0 0 10px; }
.page-about h2 { font-size: 17px; margin: 20px 0 8px; }
.page-about h3 { font-size: 14px; margin: 14px 0 6px; color: #2f5a51; }
.page-about p { margin: 0 0 10px; }
.page-about ul { margin: 0 0 10px; padding-left: 22px; }
.page-about li { margin-bottom: 5px; }
.page-about strong { color: #2f5a51; }
.page-about a { color: #157f74; }
.page-about .pa-note {
  margin-top: 16px;
  padding: 11px 13px;
  border: 1px solid #e7efec;
  border-radius: 10px;
  background: #f6faf8;
  color: #6d8580;
  font-size: 13px;
  line-height: 1.8;
}
.page-about .pa-links { margin: 12px 0 0; font-size: 12.5px; color: #8b9c97; }
/* 表格：评估类页面用它代替一长串 bullet，扫读快、也不像"文档堆砌" */
.page-about table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 6px 0 10px; }
.page-about th, .page-about td { border: 1px solid #e7efec; padding: 7px 9px; text-align: left; vertical-align: top; }
.page-about th { background: #f6faf8; color: #2f5a51; font-weight: 700; white-space: nowrap; }
@media (max-width: 640px) {
  .page-about { margin: 8px 10px 0; padding: 16px 14px 20px; font-size: 13px; }
  .page-about h1 { font-size: 18px; }
  .page-about h2 { font-size: 15px; }
  /* 4 列表格在 430px 屏上会挤成 3 行/格；收紧字号与内边距让它横向放得下 */
  .page-about th, .page-about td { padding: 5px 6px; font-size: 11.5px; }
}