/* 手机端（宽度 ≤ 700px）专用调整。2026-10-23 按王旭鹏的意见：
   1. 顶部保持原样；往上滑时标题那块逐步收成一行导航，往下滑再出来（demo-mobile.js）。
   2. 世系树页只有世系树：两人关系查询移到人物名录；树占满剩下的屏幕，框内拖动只移动树。
      按钮两行放得下、不用横着滑：搜索一行；全屏、查看我、展开全部／收起、更多一行；缩放进“更多”（手机上双指缩放）。
   3. 原谱阅读：上照片下文字，只有文字区滑动（第2、4步还会重新设计原谱页）。
   放在 demo.css 和各模块样式之后加载；选择器前加 html body 以盖过模块运行时插入的样式。 */
.m-only { display: none; }
@media (max-width: 700px) {
  /* ---------- 顶部：逐步收起时由脚本设置位移、高度与透明度 ---------- */
  html body .site-header { will-change: transform; }
  html body .header-inner { overflow: hidden; }
  html body .header-inner.m-animate { transition: height .25s ease, opacity .25s ease, padding .25s ease; }

  /* ---------- 世系树：占满剩下的屏幕，框内拖动只移动树 ---------- */
  html body .tree-page-heading { display: none; }
  html body .tree-workspace { flex: none; height: calc(100dvh - var(--site-header-height, 40px) - 14px); min-height: 0; }
  html body .tree-panel { height: 100%; }
  html body .tree-toolbar { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; }
  html body .tree-toolbar-heading { display: none; }
  html body .tree-toolbar #treeSearchForm { flex: 1 1 100%; min-width: 0; }
  html body .tree-toolbar #treeSearchForm input, html body .tree-toolbar #treeSearchForm .button { min-height: 38px; }
  html body .tree-controls { display: flex !important; flex-wrap: nowrap; gap: 6px; width: 100%; }
  html body .tree-controls > .tree-control-group { display: contents; }
  html body .tree-navigation-controls > .button, html body .tree-view-controls > .button, html body .tree-more-controls > summary { flex: 1 1 auto; width: auto; min-width: 0; min-height: 36px; padding: 4px 5px; font-size: 13px; text-align: center; white-space: nowrap; }
  html body .tree-more-controls { display: flex; flex: 1 1 auto; min-width: 0; order: 4; }
  /* 手机上按钮用短名字（读屏和自动检查仍用原名） */
  html body .m-short { font-size: 0 !important; }
  html body .m-short::after { content: attr(data-short); font-size: 13px; }
  @media (max-width: 380px) { html body .tree-navigation-controls > .button, html body .tree-view-controls > .button, html body .tree-more-controls > summary { font-size: 12px; padding: 4px 3px; } }
  html body .tree-more-controls > summary { display: flex; align-items: center; justify-content: center; }
  html body #treeExpand { order: 1; font-weight: 600; color: #fff; background: var(--green); border-color: var(--green); }
  html body .tree-navigation-controls > .button { order: 2; }
  /* 缩放按钮和百分比收进“更多”（双指也能缩放） */
  html body .tree-view-controls > .button:not(#treeExpand), html body .tree-view-controls > .zoom-text { display: none; }
  html body .tree-more-body { right: 6px; left: 6px; width: auto; }
  html body .tree-more-body .m-only { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
  html body .tree-more-body .m-only .button { flex: 1 1 0; min-height: 36px; }
  html body .tree-viewport { flex: 1 1 auto; min-height: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  html body .tree-status { padding: 3px 10px; font-size: 11px; }

  /* ---------- 原谱阅读：上照片、下文字，页面不滚动，只有文字区滑动 ---------- */
  html body .lib-root { height: calc(100dvh - var(--site-header-height, 40px) - 10px); min-height: 0; gap: 4px; }
  html body .lib-root.lib-expanded { height: 100dvh; }
  html body .lib-tools { flex: none; flex-wrap: wrap; gap: 5px; }
  html body .lib-tools .lib-btn { min-height: 32px; padding: 5px 8px; font-size: 12px; }
  html body .lib-tools select { height: 32px; padding: 4px 6px; font-size: 12px; max-width: 120px; }
  html body .lib-layout, html body .lib-layout.lib-catalog-closed { flex: 1 1 auto; min-height: 0; }
  html body .lib-reader { display: flex; flex-direction: column; min-height: 0; height: 100%; }
  html body .lib-reader-bar { flex: none; min-height: 0; gap: 2px; }
  html body .lib-page-heading { font-size: 14px; }
  html body .lib-reader-nav .lib-btn { min-height: 30px; padding: 4px 8px; font-size: 12px; }
  html body .lib-reading-area { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 6px; }
  html body .lib-photo-pane { flex: 0 0 46%; height: auto; min-height: 0; max-height: none; width: 100%; }
  html body .lib-first .lib-photo-pane { flex: 1 1 auto; }
  html body .lib-photo-tools { padding: 3px 6px; }
  html body .lib-photo-tools .lib-btn { min-height: 28px; padding: 3px 7px; }
  html body .lib-details { flex: 1 1 auto; height: auto; max-height: none; min-height: 0; display: flex; flex-direction: column; }
  html body .lib-details-head { flex: none; padding: 6px 10px; }
  html body .lib-detail-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px; }
}