/* ============================================================
 * ws-paper.css —— 全站共享「A4 纸面骨架层」
 * ------------------------------------------------------------
 * 只收编 8 个练习页完全一致的结构性规则：
 *   ① #page-wrapper / #a4-page 基础盒模型（210×297mm + flex 纵向）
 *   ② .ws-no-print 打印隐藏工具类（打印时自动消失的屏幕元素）
 *   ③ @media print 基础：隐藏 .ws-no-print 与 #wx-print-mask
 *   ④ ≤820px 移动端：控制栏取消悬浮、纸面横向滑动
 *   ⑤ tier-A-* 8 档「按题数自适应」布局（源自 语文/课后生词拼音练习.html，
 *      已用 docs/print-baseline/语文-课后生词拼音练习.pdf 验证过）
 *
 * 不放（一律留在页面自己的 <style> 里）：
 *   学科专属颜色（数学蓝 #1565c0 / 语文绿 #2e7d32 / 英语蓝）、
 *   学科专属字体（宋体/楷体/微软雅黑——.row-A .py 的 Times New Roman
 *   是拼音/英文衬线的跨学科通用字体，灰色 #999/#bbb 为黑白打印友好灰阶，
 *   不属于学科专属）、@page 边距、各题型字号行高、@media print 细节。
 *
 * ★ 特异性约定（保证「页面自身 CSS 可覆盖」）：
 *   共享层不使用 !important（③打印隐藏除外——遮罩带内联 display:block，
 *   不加 !important 压不住）；规则最多 1 个 ID 选择器。唯一例外是 ④
 *   移动端块的 `body ` 前缀（1 ID + 1 元素）：共享层先于页面 <style> 加载，
 *   同特异性下页面必胜，因此移动端改写必须略高于页面的
 *   `#controls{position:sticky}` 基础规则才能生效；页面想再改写移动端
 *   行为时，写 `body #controls{...}` 同等特异性即可（后加载者胜）。
 *
 * =================《接入说明：现有页面迁移三步走》=================
 * 【第 1 步 · 加两行】在页面 <head> 内、页面自己 <style> 之前加：
 *   <link rel="stylesheet" href="../assets/ws-paper.css">
 *   <script src="../assets/ws-print.js"></script>
 *   （根目录页面用 assets/... 不带 ../；若同页还引入 assets/ws-core.js，
 *    顺序必须是 ws-core.js 在前、ws-print.js 在后——ws-core 开头有
 *    if (window.WS) return 守卫，若 ws-print 先加载自建了空 WS，
 *    ws-core 会整体跳过，registerBank/WS.util 全部失效。）
 *
 * 【第 2 步 · 删片段】（CSS 部分，JS 部分见 ws-print.js 头部）
 *   只删与共享层逐字相同的属性行，本页差异行保留：
 *   · 全部练习页：#page-wrapper 整块（display:flex / justify-content:center /
 *     padding:24px 0 40px）；#a4-page 中 width:210mm / min-height:297mm /
 *     background:#fff / box-shadow:0 3px 18px rgba(0,0,0,.25) /
 *     display:flex / flex-direction:column 六行（padding:12mm 与共享层
 *     相同者可一并删）；≤820px 整块（#controls relative + #page-wrapper
 *     横向滚动，已收入 ④）。
 *   · 语文/课后生词拼音练习.html：另删「题型 A：看拼音写词语」脚手架
 *     （.grid-4col / .row-A 系列）与 tier-A-5~60 八档整块（原样收入 ⑤）；
 *     其 ≤820px 块中的 #a4-page{margin:0 auto} 已随 ④ 收入，整块可删。
 *   · 数学/小学数学加减法练习.html：保留 #a4-page 的
 *     padding:12mm 12mm 10mm（底边距与共享层 12mm 不同）。
 *   · 英语/小学英语一年级下册练习.html、语文/小学语文一年级下册练习.html：
 *     #a4-page 无差异行，盒模型相关行可全删；@media print 各自保留。
 *   · 语文/拼音强化训练.html：保留 #page-wrapper 的 padding:20px 0 36px、
 *     #a4-page 的 padding:8mm 10mm 6mm 与 box-shadow(.22)，并给该页
 *     #a4-page 补一行 min-height:auto——该页原本不设 min-height，接入后
 *     共享层的 297mm 若不显式抵消，会被带进 @media print 把内容撑成 2 页；
 *     其 ≤820px 块中 #lesson-panel{position:relative;top:0} 一行保留。
 *   · 语文/青清晴请拼音专项.html：页内无 #page-wrapper、移动端写法自成
 *     一套，CSS 只共享 ②③，其余原样保留（该页后续单独整改）。
 *   · 各页 @media print 自己的规则（@page 边距、黑白化、字号缩小）全部
 *     原样保留；想省一行可给 #controls 加 class="ws-no-print" 后删掉
 *     `#controls{display:none!important}` 这行（不加类也完全兼容，
 *     因为页面 print 块在共享层之后加载、同特异性下页面胜）。
 *
 * 【第 3 步 · 逐页跑 docs/print-baseline/ 基线 PDF 对比】
 *   基线对照表（迁移一页跑一轮，不过关就回退该页）：
 *     数学/小学数学加减法练习.html   ↔ docs/print-baseline/数学-加减法练习.pdf
 *     英语/小学英语一年级下册练习.html ↔ docs/print-baseline/英语-一年级下册练习.pdf
 *     语文/小学语文一年级下册练习.html ↔ docs/print-baseline/语文-一年级下册练习.pdf
 *     语文/课后生词拼音练习.html      ↔ docs/print-baseline/语文-课后生词拼音练习.pdf
 *     语文/拼音强化训练.html          ↔ docs/print-baseline/语文-拼音强化训练.pdf
 *     语文/青清晴请拼音专项.html      ↔ docs/print-baseline/语文-青清晴请专项.pdf
 *   步骤：
 *     1) python -m http.server 8000 起本地服务，经 http:// 打开该页
 *        （勿用 file:// 测试，相对路径与控制台报错以 http 为准）；
 *     2) 选项保持生成基线时的默认配置，点「⟳ 重新生成」；
 *     3) Ctrl+P 打印为 PDF：A4 / 纵向 / 默认边距 / 不勾背景图形（与基线一致）；
 *     4) 与对应基线 PDF 逐页对比：页数必须 === 1；标题、信息栏、题目区、
 *        页脚的位置与字号一致（不同机器字体渲染的细微差别可接受）；
 *     5) 窄屏：DevTools 设备模拟 ≤820px——控制栏随页滚动（不再悬浮）、
 *        纸面可横向滑动、body 无整页横向滚动条；
 *     6) 微信路径：DevTools → Network conditions → User agent 改成含
 *        MicroMessenger 的串 → 点「🖨 打印」→ 出现三步引导遮罩，文案为
 *        简体「按钮」，点击任意处或 Esc 可关闭；改回 UA 再点打印应直接
 *        弹出系统打印对话框；
 *     7) git diff 复核：除「删片段 + 加两行标签」外不得有其他改动。
 * ============================================================ */

/* ============================================================
 * ① A4 基础盒模型（屏幕态）
 *    页面有差异（padding/阴影深浅/min-height）时，在自己 <style> 里
 *    写同名规则即可覆盖（页面样式在共享层之后加载，同特异性下页面胜）
 * ============================================================ */
#page-wrapper {
  display: flex;
  justify-content: center;
  padding: 24px 0 40px;
}
#a4-page {
  width: 210mm;
  min-height: 297mm;
  background: #fff;
  padding: 12mm;
  box-shadow: 0 3px 18px rgba(0, 0, 0, .25);
  display: flex;
  flex-direction: column;
}

/* ============================================================
 * ⑤ tier-A-* 8 档「按题数自适应」布局（原样收编自 课后生词拼音练习.html）
 *    用法：题目网格容器 class="grid-4col tier-A-20"，
 *          档位数字 = 每页题数（5/10/15/20/30/40/50/60）。
 *    档位规律：5/10 题 → 2 列大字号；15/20 题 → 3 列中字号；
 *              30 题及以上 → 4 列紧凑（字号/行高逐档递减）。
 * ============================================================ */
/* --- 基础脚手架（tier 档位离开这些不工作） --- */
.grid-4col { display: grid; }
.row-A { display: flex; align-items: center; }
.row-A .num { color: #999; }
.row-A .py {
  font-family: "Times New Roman", serif; letter-spacing: 0.5px;
}
.row-A .ans {
  flex: 1; border-bottom: 1px solid #999;
}
/* 5/10 题：2 列大字号（充裕书写空间） */
.tier-A-5  { grid-template-columns: 1fr 1fr; gap: 18px 32px; }
.tier-A-5  .row-A { gap: 8px; }
.tier-A-5  .row-A .num { font-size: 14px; min-width: 30px; }
.tier-A-5  .row-A .py { min-width: 130px; font-size: 22px; }
.tier-A-5  .row-A .ans { height: 50px; }
.tier-A-10 { grid-template-columns: 1fr 1fr; gap: 12px 26px; }
.tier-A-10 .row-A { gap: 6px; }
.tier-A-10 .row-A .num { font-size: 12px; min-width: 26px; }
.tier-A-10 .row-A .py { min-width: 105px; font-size: 17px; }
.tier-A-10 .row-A .ans { height: 38px; }
/* 15-20 题：3 列中字号（4 列下答题区过窄） */
.tier-A-15 { grid-template-columns: 1fr 1fr 1fr; gap: 10px 18px; }
.tier-A-15 .row-A { gap: 6px; }
.tier-A-15 .row-A .num { font-size: 12px; min-width: 24px; }
.tier-A-15 .row-A .py { min-width: 95px; font-size: 16px; }
.tier-A-15 .row-A .ans { height: 30px; }
.tier-A-20 { grid-template-columns: 1fr 1fr 1fr; gap: 8px 14px; }
.tier-A-20 .row-A { gap: 5px; }
.tier-A-20 .row-A .num { font-size: 11px; min-width: 20px; }
.tier-A-20 .row-A .py { min-width: 82px; font-size: 14px; }
.tier-A-20 .row-A .ans { height: 26px; }
/* 30+ 题：4 列紧凑 */
.tier-A-30 { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 5px 8px; }
.tier-A-30 .row-A { gap: 3px; }
.tier-A-30 .row-A .num { font-size: 9px; min-width: 16px; }
.tier-A-30 .row-A .py { min-width: 58px; font-size: 11.5px; }
.tier-A-30 .row-A .ans { height: 21px; }
.tier-A-40 { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px 6px; }
.tier-A-40 .row-A { gap: 3px; }
.tier-A-40 .row-A .num { font-size: 9px; min-width: 15px; }
.tier-A-40 .row-A .py { min-width: 50px; font-size: 10.5px; }
.tier-A-40 .row-A .ans { height: 19px; }
.tier-A-50 { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 3px 5px; }
.tier-A-50 .row-A { gap: 2px; }
.tier-A-50 .row-A .num { font-size: 8px; min-width: 14px; }
.tier-A-50 .row-A .py { min-width: 44px; font-size: 10px; }
.tier-A-50 .row-A .ans { height: 17px; }
.tier-A-60 { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 2px 4px; }
.tier-A-60 .row-A { gap: 2px; }
.tier-A-60 .row-A .num { font-size: 8px; min-width: 14px; }
.tier-A-60 .row-A .py { min-width: 40px; font-size: 9.5px; }
.tier-A-60 .row-A .ans { height: 15px; }

/* ============================================================
 * ②③ 打印隐藏工具类 + @media print 基础
 *    .ws-no-print：给只需屏幕显示的元素（控制栏、答案区等）加上即打印消失。
 *    #wx-print-mask：ws-print.js 动态注入的微信引导遮罩；用户开着遮罩直接
 *    Ctrl+P 时也不能把它印进纸里——遮罩是内联 display:block，必须
 *    !important 才压得住（这是共享层唯一使用 !important 的地方）。
 *    各页自己的 @media print 规则（@page 边距、黑白化、字号缩小、
 *    #controls 隐藏等）在页面 <style> 中原样保留，不迁移到这里。
 * ============================================================ */
@media print {
  .ws-no-print,
  #wx-print-mask { display: none !important; }
}

/* ============================================================
 * ④ ≤820px 移动端（收编自各页一致写法）
 *    控制栏取消 sticky 悬浮（随页滚动）；纸面 210mm 超出屏宽，
 *    让 #page-wrapper 横向滚动 + 惯性滑动；#a4-page 水平居中。
 *    本块带 `body ` 前缀的原因见文件头部「特异性约定」。
 *    页面私有的移动端规则（如拼音强化页 #lesson-panel、青清晴请页
 *    #a4-page 两行）保留在各页自己的 ≤820px 块里。
 * ============================================================ */
@media screen and (max-width: 820px) {
  body #controls { position: relative; }
  body #page-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 24px;
    justify-content: flex-start;
  }
  #a4-page { margin: 0 auto; }
}
