/* VERIS 移动端 H5 共享样式 — 全部 additive,桌面(>768px)渲染路径零改动。
引入方式:各页 加 。
方案见 reports/mobile_h5_plan.md。Step 1 = 全局/共享层(§1)。*/
/* ---- 0. 溢出 & 盒模型兜底(唯一的无条件规则;若桌面某处依赖 content-box 宽度算法错乱,改作用域化到 .app *) ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; }
/* ---- 1. 通用移动断点(≤768 布局层) ---- */
@media (max-width: 768px) {
/* 长串/代码/公式文本不撑破容器 */
.mono, code, pre, .ev, .ed, .lsv { overflow-wrap: anywhere; word-break: break-word; }
/* 宽表统一横滚壳(在生成表格处包 ) */
.m-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
.m-scroll::after {
content: ""; position: sticky; top: 0; right: 0; float: right; width: 14px; height: 100%;
background: linear-gradient(90deg, transparent, rgba(0,0,0,.06)); pointer-events: none;
}
}
/* ---- 2. KaTeX / 公式溢出(≤480) ---- */
@media (max-width: 480px) {
.katex-display { margin: .25em 0; padding: 6px 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.katex { font-size: .85em; }
}
/* ---- 3. tap-target 统一(≥44px) ---- */
@media (max-width: 768px) {
button, .chip, .chip-t, .formchip, .ptag, .ex, .bxm, .go, .gobtn, .mx, .attach { min-height: 44px; }
.attach { width: 44px; height: 44px; }
/* 关闭/removechip 类小图标扩大热区 */
.chip .x, .mx { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
}
/* ---- 4. hover → 触摸常驻(hover-only 功能性元素在触摸端不消失) ---- */
@media (hover: none), (pointer: coarse) {
.evrow .evgo { opacity: 1 !important; }
}
/* 触摸态反馈(无条件,轻量,不影响桌面 hover) */
.chip:active, .sp-pitem:active, .charx-tbl tbody tr:active, .evrow:active, .card:active {
background: var(--accent-soft, rgba(0,0,0,.04));
}
/* ---- 5. 顶栏可换行 + safe-area ---- */
@media (max-width: 600px) {
.topbar { flex-wrap: wrap; padding-top: calc(8px + env(safe-area-inset-top)); }
.topbar .right { margin-left: 0; margin-top: 6px; width: 100%; justify-content: flex-start; gap: 14px; }
}
/* ---- 6. 浮层 → 底部 sheet 通用模式(给弹窗加 .m-sheet 类) ---- */
@media (max-width: 480px) {
.m-sheet {
position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
transform: none !important; width: 100vw !important; max-width: none !important;
max-height: 80vh; overflow-y: auto; border-radius: 14px 14px 0 0;
padding-bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 1000;
}
}
/* ---- 7. 抽屉滚动锁辅助类(打开侧栏/右栏时给 body 加 .m-lock,避免背景滚动穿透) ---- */
.m-lock { overflow: hidden !important; }