/* teacher 端移动化公共样式（TeacherMobile，2026-10-31 起）
 * 与 kids-mobile.css 同源约定：
 * - 只放跨组件公共项；每条规则必须包在 @media (max-width: 767px) 内，桌面零影响。
 * - 组件级样式一律写在对应 .m.vue 的 <style scoped>，禁止往这里堆页面私有规则。
 * - 断点 767px 与 utils/device.js、router/mobileAware.js 三处一致；本文件只在 app.blade.php 引入，
 *   kids/parent/m 各自 blade 不加载，天然隔离。
 * 版本号 ?k=20261031002（登记表 .zcode/k-version-registry.md）
 */
@media (max-width: 767px) {
  /* ============ 设计 token：唯一来源（--tm-*，勿与 kids 的 --m-* 混用） ============ */
  :root {
    /* 品牌与墨色（教师端白底体系，色值取自站点现用主色） */
    --tm-primary: #203294; /* 站点主蓝（登录标题 rgb(32,50,148)） */
    --tm-primary-press: #18246e;
    --tm-primary-tint: #eef1fa;
    --tm-green: #22af3c; /* 站点绿色（链接/成功 CTA） */
    --tm-green-press: #1a8c2f;
    --tm-purple: #b247af; /* Free Trial 强调色 */
    --tm-purple-press: #93398f;
    --tm-danger: #dc3545;
    --tm-red-step: #c11742; /* 购买向导步骤条品牌红（与桌面 steps_box 同源色） */
    --tm-bg: #f5f6fa;
    --tm-surface: #ffffff;
    --tm-line: #e3e6ee;
    --tm-ink: #1f2430;
    --tm-ink-2: #4a5060;
    --tm-ink-3: #8a90a0;

    --tm-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;

    /* 字号阶梯（12/14/16/20/24/32；正文≥14，输入≥16 防 iOS 聚焦放大） */
    --tm-fs-12: 12px;
    --tm-lh-12: 18px;
    --tm-fs-14: 14px;
    --tm-lh-14: 20px;
    --tm-fs-16: 16px;
    --tm-lh-16: 24px;
    --tm-fs-20: 20px;
    --tm-lh-20: 28px;
    --tm-fs-24: 24px;
    --tm-lh-24: 32px;

    /* 间距（4 的倍数） */
    --tm-s1: 4px;
    --tm-s2: 8px;
    --tm-s3: 12px;
    --tm-s4: 16px;
    --tm-s5: 20px;
    --tm-s6: 24px;
    --tm-s8: 32px;
    --tm-s10: 40px;
    --tm-s12: 48px;

    --tm-r-sm: 6px;
    --tm-r-md: 10px;
    --tm-r-lg: 14px;
    --tm-r-pill: 999px;

    --tm-shadow: 0 4px 16px rgba(31, 36, 48, 0.08);
    --tm-mask: rgba(31, 36, 48, 0.5);

    --tm-header-h: 56px;
    --tm-pad: 16px;
    --tm-safe-b: env(safe-area-inset-bottom, 0px);
    --tm-z-header: 100;
    --tm-z-sheet: 900;
    --tm-z-toast: 1100;
  }

  /* ============ 基础重置（仅手机端，作用域教师壳容器） ============ */
  .ch12tree {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  /* 输入控件统一 ≥16px，防 iOS 聚焦自动放大；触控目标 ≥44px 由各组件自控 */
  .ch12tree input,
  .ch12tree select,
  .ch12tree textarea {
    font-size: 16px;
  }

  /* ============ TM 页面桌面壳接管 ============ */
  /* App.vue 容器带 path.substr(1) 与 meta.module 双 class（.ch12tree login / ch12tree order-now…）。
     已接入 TeacherMobile 的页面在手机档隐藏桌面头尾（headerview/footerview 无手机形态），
     由各 .m.vue 的 tm-header 接管。新接入一个页面就在下面三个列表里同步加它的 path class
     （壳隐藏 / body+#app 解除 980 最小宽），三列表必须一致。 */
  .ch12tree.home .header,
  .ch12tree.home .footer,
  .ch12tree[class*='reading-stacks'] .header,
  .ch12tree[class*='reading-stacks'] .footer,
  .ch12tree.free-sample .header,
  .ch12tree.free-sample .footer,
  .ch12tree.agreement .header,
  .ch12tree.agreement .footer,
  .ch12tree.group-buy .header,
  .ch12tree.group-buy .footer,
  .ch12tree[class*='help-center'] .header,
  .ch12tree[class*='help-center'] .footer,
  .ch12tree.login .header,
  .ch12tree.login .footer,
  .ch12tree.request-a-demo .header,
  .ch12tree.request-a-demo .footer,
  .ch12tree.event-register .header,
  .ch12tree.event-register .footer,
  .ch12tree.free-trial .header,
  .ch12tree.free-trial .footer,
  .ch12tree[class*='free-trial/'] .header,
  .ch12tree[class*='free-trial/'] .footer,
  .ch12tree[class*='register/'] .header,
  .ch12tree[class*='register/'] .footer,
  .ch12tree[class*='setup-password/'] .header,
  .ch12tree[class*='setup-password/'] .footer,
  .ch12tree[class*='privacy-policy/'] .header,
  .ch12tree[class*='privacy-policy/'] .footer,
  .ch12tree.forgot-password .header,
  .ch12tree.forgot-password .footer,
  .ch12tree.reset-password .header,
  .ch12tree.reset-password .footer,
  .ch12tree.my-licenses .header,
  .ch12tree.my-licenses .footer,
  .ch12tree.my-purchase .header,
  .ch12tree.my-purchase .footer,
  .ch12tree.profile .header,
  .ch12tree.profile .footer,
  .ch12tree.edit-profile .header,
  .ch12tree.edit-profile .footer,
  .ch12tree.purchase .header,
  .ch12tree.purchase .footer,
  .ch12tree[class*='purchase/'] .header,
  .ch12tree[class*='purchase/'] .footer,
  .ch12tree[class*='order/'] .header,
  .ch12tree[class*='order/'] .footer,
  .ch12tree.order .header,
  .ch12tree.order .footer,
  .ch12tree.my-account .header,
  .ch12tree.my-account .footer,
  .ch12tree.my-teaching .header,
  .ch12tree.my-teaching .footer,
  .ch12tree.link-expired .header,
  .ch12tree.link-expired .footer {
    display: none;
  }

  /* app.css 旧补丁：≤767.98 时 body min-width:980（手机横滚桌面布局的兜底）。
     该兜底只服务未手机化的教师页；已接入 TM 的页面必须解除（连带 style.css 的 #app min-width:768），
     否则 TM 布局被整体撑到 980。用 :has() 按路由类圈定，不影响范围外页面。 */
  body:has(.ch12tree.home),
  body:has(.ch12tree[class*='reading-stacks']),
  body:has(.ch12tree.free-sample),
  body:has(.ch12tree.agreement),
  body:has(.ch12tree.group-buy),
  body:has(.ch12tree[class*='help-center']),
  body:has(.ch12tree.login),
  body:has(.ch12tree.request-a-demo),
  body:has(.ch12tree.event-register),
  body:has(.ch12tree.free-trial),
  body:has(.ch12tree[class*='free-trial/']),
  body:has(.ch12tree[class*='register/']),
  body:has(.ch12tree[class*='setup-password/']),
  body:has(.ch12tree[class*='privacy-policy/']),
  body:has(.ch12tree.forgot-password),
  body:has(.ch12tree.reset-password),
  body:has(.ch12tree.my-licenses),
  body:has(.ch12tree.my-purchase),
  body:has(.ch12tree.profile),
  body:has(.ch12tree.edit-profile),
  body:has(.ch12tree.purchase),
  body:has(.ch12tree[class*='purchase/']),
  body:has(.ch12tree[class*='order/']),
  body:has(.ch12tree.order),
  body:has(.ch12tree.my-account),
  body:has(.ch12tree.my-teaching),
  body:has(.ch12tree.link-expired) {
    min-width: 0;
  }
  body:has(.ch12tree.home) #app,
  body:has(.ch12tree[class*='reading-stacks']) #app,
  body:has(.ch12tree.free-sample) #app,
  body:has(.ch12tree.agreement) #app,
  body:has(.ch12tree.group-buy) #app,
  body:has(.ch12tree[class*='help-center']) #app,
  body:has(.ch12tree.login) #app,
  body:has(.ch12tree.request-a-demo) #app,
  body:has(.ch12tree.event-register) #app,
  body:has(.ch12tree.free-trial) #app,
  body:has(.ch12tree[class*='free-trial/']) #app,
  body:has(.ch12tree[class*='register/']) #app,
  body:has(.ch12tree[class*='setup-password/']) #app,
  body:has(.ch12tree[class*='privacy-policy/']) #app,
  body:has(.ch12tree.forgot-password) #app,
  body:has(.ch12tree.reset-password) #app,
  body:has(.ch12tree.my-licenses) #app,
  body:has(.ch12tree.my-purchase) #app,
  body:has(.ch12tree.profile) #app,
  body:has(.ch12tree.edit-profile) #app,
  body:has(.ch12tree.purchase) #app,
  body:has(.ch12tree[class*='purchase/']) #app,
  body:has(.ch12tree[class*='order/']) #app,
  body:has(.ch12tree.order) #app,
  body:has(.ch12tree.my-account) #app,
  body:has(.ch12tree.my-teaching) #app,
  body:has(.ch12tree.link-expired) #app {
    min-width: 0;
  }

  /* App.vue 全局 flash 消息盒桌面 min-width:640px（scoped 规则运行时注入、后于本文件），
     是手机档横向溢出的真凶（kids 审计 O-11 同源），照 kids-mobile.css 先例 !important 收窄 */
  .ch12tree .flash_box {
    min-width: 0 !important;
    width: calc(100vw - 24px) !important;
    max-width: 100vw;
  }

  /* ============ el-select 下拉面板自适应 ============
     2026-11-04 终版（用户令：删全局收敛黑科技改自适应）：全部规则上移 new_style.css
     做成全端全局——视口上限 calc(100vw-32px) + 列表项 width:0/min-width:100% 等宽技巧
     （弹层宽=Element 内联 min-width=父 input 宽，长选项省略号）。
     此处不再保留手机档 min-width 钳制：内容贡献归零后弹层恒= input 宽，
     input 本身装得下视口，≤320 不会出屏；min-width:0 反而会拆掉等宽地板（实测塌到 42px）。 */

  /* ============ Tawk 悬浮球：手机档仅首页显示（用户令 2026-10-31） ============ */
  /* 首页 = home 模块（/、/aislmall、/mm 等落地变体，容器带 .home 类）；其余手机页一律隐藏。
     原理：Tawk 真球是 #min-widget 内部 fixed iframe，SDK 写死内联 !important 样式，
     任何作用于 iframe 自身的 stylesheet 都压不过它；但祖先容器 display:none 会让
     整棵子树不渲染，内联样式管不到祖先——这是唯一干净的 CSS 口子。
     桌面档（>767px）不受本文件任何影响，全站 chatbox 照旧。
     若日后 Tawk 更换 DOM 结构导致此规则失效，需同步重做 tm-bottom-nav 的避让逻辑。 */
  /* 固定底部导航存在的页面（home/账户组/MT）：页脚是页面最后一块，让出导航高度防内容被遮
   （2026-11-02 用户令；:has 同上文 Tawk 避让的口子） */
body:has(.tm_nav) .tmf_ {
  padding-bottom: calc(56px + var(--tm-safe-b) + var(--tm-s4));
}

body:has(.ch12tree):not(:has(.ch12tree.home)) #min-widget,
  body:has(.ch12tree):not(:has(.ch12tree.home)) #max-widget {
    display: none !important;
  }
}