/* =========================================================== 流体力学实验教学网站 · 组件与布局（移动优先） =========================================================== */ *,*::before,*::after{ box-sizing:border-box } /* ===== iPhone 适配（学生多数用苹果手机，2026-08-22 专项） ===== 1) -webkit-text-size-adjust:100% —— 不写的话 iOS 横屏会自作主张放大正文， 表格列宽全乱。 2) -webkit-tap-highlight-color —— 去掉 iOS 点按时那层灰色闪块， 在实验台边连点几十次会很晃眼。 3) overscroll-behavior-y:none —— 关掉整页橡皮筋回弹：学生在数据卡片里 上下划时，页面弹一下会让刚点中的输入框失焦。 4) -webkit-appearance:none —— iOS Safari 会给 input/button 套一层原生圆角与 内阴影，不清掉的话按钮和输入框在 iPhone 上和设计稿完全不是一个样。 */ html{ -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:rgba(0,0,0,0); overscroll-behavior-y:none; /* 滚到某段时别被粘顶的顶栏压住（第 144 轮 UI 专家团）：scrollIntoView 按规范不扣 sticky 头， 问卷闸门把学生滚到反馈表时，标题正好藏在 56px 顶栏下面。教师端是两层粘顶，由 teacher.html 的 placeBar 另写。 ⚠ 只影响 scrollIntoView / 锚点 / 焦点滚动，不影响 window.scrollTo —— 手算偏移的那几处不会被扣两次。 */ scroll-padding-top:calc(56px + env(safe-area-inset-top) + 8px); } body{ margin:0; font-family:var(--font); font-size:var(--f-md); line-height:var(--lh-body); color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-wrap:break-word; /* 数字一律等宽（方向 D）：⑥ 段表格、⑦ 段读数、报告完成度里同一列的数 位数不再左右跳动。只影响阿拉伯数字，中文与英文照旧按比例排。 */ font-variant-numeric:tabular-nums; } img{ max-width:100%; height:auto; display:block } /* [hidden] 必须压过任何 display 声明（2026-09-05 第 115 轮实测）：#testTools 是 .btn-row{display:flex}， UA 的 [hidden]{display:none} 与类选择器同优先级、又排在前面，于是 hidden=true 照样显示 —— 「从头再测一遍」这颗测试身份专用按钮对每个真实学生都露着（点了不动，只是吓人）。 同族：D62 的横竖屏按钮当时单独写过一条 [hidden] 规则，这里收敛成全站一条。 */ [hidden]{ display:none !important } /* iOS 原生控件样式清除。注意 checkbox / radio / range 三者都要排除在外： · checkbox / radio —— 清掉 appearance 会让勾选框整个消失； · range —— 清掉之后原生滑块整个没了，而本站**一条 ::-webkit-slider-thumb 都没写**， 等于抹掉了控件又不给替代品：轨道不可见、拇指极小、accent-color 也一并失效 （accent-color 只对保留原生外观的控件生效）。教师 2026-08-23 实测 「雷诺流量 Q 滑动不丝滑会卡住」就是它。原生滑块是 iOS 上最跟手的那一个，还回去。 */ input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea, button{ -webkit-appearance:none; appearance:none; border-radius:0; } button, .btn, summary, label, a{ touch-action:manipulation } /* 去掉 iOS 双击缩放的 300ms 等待 */ /* ⚠ 不要给所有 canvas 加 touch-action:none。图表画布没有任何手势监听， 禁掉只会让手机上"手指落在图上就划不动页面"——三个实验页的结果分析段 加数据中心各有一块 300px 高的死区（2026-08-22 检查团实测）。 手写板由 sign.js 行内样式自己声明 touch-action:none；仿真画布见下方 canvas.sim。 ⚠ pinch-zoom 必须显式写出来（2026-08-25 专家团实测）：touch-action 是**白名单**， 只写 pan-y 等于连双指缩放一起排除掉。手机上学生想把 λ–Re 图放大看清某个点， 两指落在图上毫无反应，得先把手指挪到图外的空白处 —— 而图几乎占满可视区。 这与「输入框 ≥16px 防 iOS 聚焦缩放」相反：那条防**自动**放大， 这条一度禁掉了**主动**放大，属 WCAG 1.4.4 回归。 */ canvas.chart{ touch-action:pan-y pinch-zoom } /* 键盘弹出时把底栏收起：iOS 上 position:fixed 的底栏会浮在键盘上方， 正好压住学生正在填的那一格。core.js 在 focusin/focusout 时切这个类。 */ body.kbd-open .bottombar, body.kbd-open .ask-fab{ display:none } a{ color:var(--brand); text-decoration:none } a:hover{ text-decoration:underline } /* ---------- 顶栏 ---------- */ .topbar{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:var(--s-3); min-height:56px; padding:0 var(--s-4); background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--sh-float); padding-top:env(safe-area-inset-top); } .topbar .back{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; margin-left:-8px; border-radius:var(--r-full); color:var(--text-2); font-size:20px; line-height:1; flex:none; } .topbar .back:hover{ background:var(--hover); text-decoration:none } /* 标题两级（教师 2026-08-27）：一级＝平台名，二级＝页面名。 **不并列** —— 二级另起一行、字号更小、颜色更弱，一眼能分出主次。 顶栏高度不变：两行合起来仍在原来的行高预算内（20px + 13px ≈ 原 f-lg 单行 + 8px）， 移动端把二级再压一档，免得挤掉右边的工具按钮。 */ .topbar h1{ flex:1; min-width:0; margin:0; font-weight:700; display:flex; flex-direction:column; justify-content:center; gap:1px; overflow:hidden; } .topbar h1 .app{ font-size:var(--f-md); line-height:1.15; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .topbar h1 .pg{ font-size:var(--f-xs); font-weight:600; color:var(--muted); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media (min-width:900px){ .topbar h1 .app{ font-size:var(--f-lg) } .topbar h1 .pg{ font-size:var(--f-sm) } } .topbar .tools{ display:flex; gap:var(--s-2); flex:none } /* 顶栏的「教师端 ⇄ 学生端」是文字按钮，比图标按钮宽（2026-08-31，教师要回来的可见入口） */ .icon-btn.wide{ width:auto; padding:0 10px; font-size:var(--f-sm); white-space:nowrap } /* ≤400px 字号不低于 12px（第 144 轮 UI 专家团：11px 是全站唯一低于 12px 的常驻文字）；宽度只多约 3px */ @media (max-width:400px){ .icon-btn.wide{ padding:0 6px; font-size:12px } } .icon-btn{ display:flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 var(--s-2); border:1px solid var(--line); border-radius:var(--r-1); background:var(--surface); color:var(--text-2); font-size:var(--f-sm); cursor:pointer; } .icon-btn:hover{ background:var(--hover) } /* 顶栏的「🏛 学院门户」是 不是