/* 移动端 / 平板端收口层（2026-10-01）
 *
 * 为什么独立成文件：移动端规则此前散落在 12+ 个 CSS、约 12 套断点里，互相覆盖
 * （admin-common.css 的 ≤900px 侧栏规则被 admin-shell.css 的 !important 全量压掉，
 * 已成死代码）。这里作为唯一收口点，只写"尺寸与溢出"类规则，不写任何视觉风格
 * （颜色 / 阴影 / 字体家族一律不碰）。
 *
 * 加载约定：必须是每个页面最后一个 stylesheet，且本文件所有规则都包在 max-width
 * 媒体查询内 —— 这样 PC 端（≥901px）的解析结果与不存在本文件完全一致。
 *
 * 三档：
 *   PC   ≥ 901px   现状，零变化
 *   平板 768–900px 侧栏常驻 + 内容 ≤2 列
 *   手机 ≤ 767px   抽屉 + 单列
 */

/* ═══════════════════════════════════════════════════════════
   任务 3：溢出收口 —— grid 的 auto 轨道会按子项 max-content 撑宽
   ───────────────────────────────────────────────────────────
   实测（390px，Chrome CDP）：
     cards     section.standard-config-section 轨道被撑到 583px，
               子项 .standard-config-section__heading 是「标题 + 说明」双列
               → 整页 612px，手机上要横向拖
     knowledge/retrieval
               .tune-panel__body 轨道被撑到 606px，里面 .tune-fields 是三列
               190px；外层 .tune-panel 又是 overflow:hidden
               → 超出部分被裁掉，字段既看不见也点不到（比溢出更糟）
   修法：把单轨道容器的轨道钉死在可用宽度内，并允许子项收缩。
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* .config-subsection 也要列进来：question-bank 的裁剪就来自它——它是 grid 且只有
     一条 auto 轨道，轨道被内容撑到 464px，外层 section.card 又是 overflow:hidden。 */
  .standard-config-section,
  .config-subsection,
  .tune-panel__body,
  .card-body,
  .config-page-head,
  .ov-card,
  /* 两列轨道的最小宽是 120px + 160px + 10px 间距 = 290px，塞进 246px 的卡片就溢出 */
  .answer-style-config__fields,
  .home-feature-config__fields { grid-template-columns: minmax(0, 1fr); }

  .standard-config-section > *,
  .config-subsection > *,
  .tune-panel__body > *,
  .card-body > *,
  .ov-card > * { min-width: 0; }

  /* 工具条不换行时，末尾按钮会被顶到 x=461（远超 390 视口），把整页撑宽。
     cards 页的"一键导入/重新生成全部"就是这么溢出屏幕的。 */
  .config-subsection,
  .knowledge-card-toolbar,
  .knowledge-card-toolbar__actions,
  .standard-config-section__heading,
  .tune-toolbar,
  .ov-toolbar { flex-wrap: wrap; }

  /* 「标题 + 说明」双列标题：窄屏堆叠（原本 333 + 245 不换行） */
  .standard-config-section__heading { grid-template-columns: minmax(0, 1fr); }

  /* 表单栅格允许收缩到单列 */
  .tune-fields { min-width: 0; max-width: 100%; }

  /* 说明性小字：容器一窄就被裁（question-bank 实测 small 380px 塞进 148px）。
     全站有两处 nowrap 来源（admin-shell 只对 .tune-panel 内的开关放了行），
     这里用 !important 收口——作用域限定在配置区的说明文字，不影响 PC（整个文件都在媒体查询内）。 */
  small { white-space: normal !important; overflow-wrap: anywhere; }

  /* 卡片本体：open-api 的 mdui-card 被内容撑到 439/495/528px */
  mdui-card,
  .card,
  .doc-card { max-width: 100%; min-width: 0; }
  mdui-card > *,
  .card > *,
  .doc-card > * { min-width: 0; }

  /* 任务 6：触控热区与字号
     ───────────────────────────────────────────────────────────
     WCAG 2.5.5 要求命中区 ≥44×44；手机上纵向空间充裕，把控件统一抬到 44px
     不会挤掉信息密度，而 38px 的按钮 + 24px 的图标按钮是真实点不中的。
     本文件整个都在媒体查询内，PC 端解析结果不变。 */
  mdui-button,
  button,
  .btn,
  a.btn,
  mdui-list-item,
  [role="button"] { min-height: 44px; }

  /* 输入类：44px 高 + 16px 字号（iOS 聚焦时不会自动放大整页） */
  mdui-text-field,
  .aui-field__input,
  .ss-value,
  input.form-control,
  select.form-control,
  input[type="text"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  input[type="tel"],
  select,
  textarea {
    min-height: 44px;
    font-size: 16px;
  }

  /* 纯图标按钮：宽度也要够（关闭、显示/隐藏密码这类只有 24px） */
  .topbar-account__chip,
  button.icon-btn,
  mdui-button[icon],
  .answer-style-config__delete,
  .btn-close,
  .modal-close { min-width: 44px; }

  /* 抽屉开关：admin-shell.css 写了 min-height:40px（类选择器压过上面的 button），这里覆盖 */
  .admin-mobile-nav-toggle { min-height: 44px; min-width: 44px; }

  /* 认知风格 / 景区选择一类的标签按钮，高度普遍 28–38px */
  .audience-chip,
  .style-chip,
  .tag-chip,
  .scenic-chip,
  .config-switch,
  .form-check { min-height: 44px; }

  /* 图标类清除/显示按钮：只有 24px 宽 */
  .aui-field__clear,
  .aui-field__reveal,
  .genealogy-graph-tools button,
  .genealogy-node-tool,
  .genealogy-link-tool,
  .score-event-pagination__page { min-width: 44px; }

  /* 下拉、模板选择、令牌插入等撑到 44 高 */
  .form-select,
  .form-select-sm,
  .scenic-token-insert,
  button.scenic-token-insert,
  .genealogy-view-switch button,
  .genealogy-segmented button,
  .score-event-clear { min-height: 44px; }

  /* 滑杆：轨道视觉保持细，但整个控件给足高度，手指才抓得住 */
  input[type="range"] { height: 44px; }

  /* 令牌插入按钮由页面 JS 内联设置了 min-height，必须 !important 才盖得住 */
  button.scenic-token-insert { min-height: 44px !important; }

  /* 页内导航链接按按钮对待 */
  .style-page-jump a,
  .doc-nav a { min-height: 44px; display: inline-flex; align-items: center; }

  /* MDUI 开关：轨道尺寸不变，命中区加高到 44 */
  mdui-switch { min-height: 44px; display: inline-flex; align-items: center; }

  /* 开关/复选所在的行：整行给足高度，避免"只有 22px 的小方块能点" */
  .retrieval-diag__options,
  .llm-switch-head,
  .chat-test-toggle-row,
  .kb-paste-side,
  .tune-toolbar { min-height: 44px; display: flex; align-items: center; }

  /* 原生复选框/单选框：手机上放大到 32px（44 对原生方框不现实，属已知取舍），
     至少越过硬底线，手指能稳定点中。开关组件同理加宽。 */
  .retrieval-diag__options input[type="checkbox"],
  .chat-test-toggle-row input[type="checkbox"],
  .kb-paste-side input[type="checkbox"],
  .tune-toolbar input[type="checkbox"],
  .d-flex input[type="checkbox"],
  .col-12 input[type="checkbox"] { width: 32px; height: 32px; }
  mdui-switch { min-width: 44px; }

  /* 快捷问题令牌插入按钮：容器里的按钮/链接统统按 44 高 */
  .home-feature-config__question-label > button,
  .home-feature-config__question-label > a,
  .home-feature-config__question-label > span > button,
  .home-feature-config__question-label > span > a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* 滑杆高度要盖过 index.css 的 .range-control input[type="range"]（同特异性、后者先加载） */
  .range-control input[type="range"] { height: 44px !important; }

  /* 原生复选/单选框本身放大到 22px，命中区由关联 label 承担；
     而 label 是行内元素时高度只有 26px，所以带控件的 label 单独撑到 44。 */
  input[type="checkbox"],
  input[type="radio"] { width: 22px; height: 22px; }
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]),
  .form-check-label,
  .form-check:has(input[type="checkbox"]),
  .form-check:has(input[type="radio"]) { min-height: 44px; display: inline-flex; align-items: center; }

  /* 字号：正文与辅助说明不低于 12px。
     实测小字散落在 span/label/b/small/div 上（10–11.5px），逐个点名不现实，
     这里对内容区的行内元素统一设下限；图表刻度与图例按设计就是小字，排除在外
     （探针的 TEXT_EXEMPT 也豁免它们）。 */
  /* 必须 !important：theme-normalize.css 用 body:has(.admin-sidebar) .xxx（特异性 0,2,1）
     把一批 10–11.5px 的小字写死了，仅靠加载顺序盖不住。 */
  .admin-main :is(span, label, b, small, div, p, li, dt, dd, button, th, td, output, a, code):not([class*="chart"]):not([class*="legend"]):not(.ov-legend),
  .page-shell :is(span, label, b, small, div, p, li, dt, dd, button, th, td, output, a, code):not([class*="chart"]):not([class*="legend"]):not(.ov-legend),
  .config-subsection :is(span, label, b, small, div, button, output):not([class*="chart"]),
  .tune-panel :is(span, label, b, small, div, button, output):not([class*="chart"]) {
    font-size: max(12px, 1em) !important;
  }
  .label, .section-kicker, .page-hero__kicker { font-size: 12px !important; }

  /* 侧栏：手机档它是抽屉（屏幕外，探针不计），平板档是常驻可见的——所以
     这里同样要保证导航项够高、分组标题与账号块的字号不低于 12px。 */
  .admin-sidebar :is(span, small, div, b, label, mdui-list-subheader, mdui-list-item) {
    font-size: max(12px, 1em) !important;
  }
  .admin-sidebar mdui-list-item,
  .admin-sidebar a,
  .admin-sidebar button,
  .acct-dock__chip { min-height: 44px; }

  /* admin-shell.css 用 .admin-sidebar__list mdui-list-subheader.nav-group-head .nav-group-head__label
     这种三级选择器写死了 11.5px，特异性高于上面那条，这里点名单挑。 */
  /* 知识卡工具条：index.css 用 flex:0 0 auto !important 顶住不缩，按钮组横向溢出到 541px */
  body .knowledge-card-toolbar__actions { flex: 1 1 100% !important; flex-wrap: wrap; }

  /* 景区主题：内部固定两列 210+130=340px，容器只有 279px */
  .scenic-theme-background,
  .scenic-theme-control,
  .scenic-theme-config__layout { grid-template-columns: minmax(0, 1fr); }

  /* Bootstrap 的 .small 类（class，不是 <small> 标签）同样会被写死 nowrap */
  .small { white-space: normal !important; overflow-wrap: anywhere; }

  /* 家谱图画布区：原本 overflow:hidden 把 270px 内容裁到 32px，改成可滚动 */
  .genealogy-graph-stage { overflow: auto; }

  /* 首页功能开关被 flex 拉成 28x362：head 是 flex 且默认 align-items:stretch，
     开关被拉满整卡高度。开关本身定死 22px，容器改为居中不拉伸。 */
  .home-feature-config__head,
  .answer-style-config__head { align-items: center; }
  /* 开关的命中区是它外面的 .config-switch 容器，768px 下被网格行拉成 28x362 */
  .home-feature-config__head .config-switch,
  .answer-style-config__head .config-switch {
    align-self: center;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  input.home-feature-enabled,
  input.answer-style-enabled { width: 22px !important; height: 22px !important; flex: 0 0 auto !important; align-self: center !important; }

  /* 可搜索下拉里的输入框只有 24px 宽 */
  .aui-field__input { min-width: 44px; }

  /* 地图（Leaflet）缩放按钮在手机上只有 30x44 */
  .leaflet-control-zoom a {
    min-width: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
  }

  body .admin-sidebar .nav-group-head__label,
  body .admin-sidebar .topbar-brand__sub,
  body .admin-shell-header .topbar-brand__sub,
  body .admin-shell-header .topbar-brand__title,
  body .admin-mobile-nav-brand { font-size: 12px !important; }

  /* 任务 7：表格、代码块与长文本
     ───────────────────────────────────────────────────────────
     open-api 的接口文档卡片里，table.param-table 实测 512px、代码块 1234px，
     父级 mdui-card 又是 overflow:hidden → 内容被裁且不可达。
     做法：让"装了表格/代码块的容器"自己横向滚动，而不是撑破卡片。 */
  .table-responsive,
  .score-event-table-wrap,
  .kb-lint-term,
  .code-block,
  pre,
  .kb-lint-log {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 卡片正文里直接放表格/代码块的情况（open-api 文档卡）：
     只给"确实装了表格或 pre"的容器加横向滚动，避免给所有卡片加滚动容器
     ——那会让卡片内的下拉、浮层被新的滚动容器裁掉。 */
  .card-body:has(table),
  .card-body:has(pre),
  mdui-card:has(table),
  mdui-card:has(pre) { overflow-x: auto; }

  table { width: 100%; }
  /* 横滑时首列吸附，避免丢失行标识 */
  table thead th:first-child,
  table tbody td:first-child { position: sticky; left: 0; z-index: 1; background: inherit; }
  /* 长 token（URL、正则、连字符串）换行而不是撑宽 */
  td, .code-block, pre, .kb-lint-log { overflow-wrap: anywhere; }

  /* 任务 9：接管 styleguide.html 的窄屏侧栏。
     这一页不加载 admin-shell.js，因此没有 admin-shell-ready，是原先
     admin-common.css 那段 ≤900px 规则的唯一实际使用者（其余 22 页都被
     admin-shell.css 的 !important 覆盖成了死代码，已删除）。 */
  body:not(.admin-shell-ready) .admin-sidebar {
    position: static;
    width: auto;
    margin: 14px 16px 0;
    padding: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 6px;
    overflow-y: visible;
  }
  body:not(.admin-shell-ready) .admin-sidebar__list { display: flex; flex-wrap: wrap; gap: 4px; }
  body:not(.admin-shell-ready) .admin-sidebar__list mdui-list-subheader { display: none; }
  body:not(.admin-shell-ready) .admin-sidebar__list mdui-list-item {
    display: inline-flex; width: auto; height: auto;
    padding: 8px 12px; border-radius: 9px; margin: 0;
  }
}

@media (max-width: 767px) {
  /* 任务 8：弹窗、图表与安全区 */
  mdui-dialog::part(panel) {
    max-width: calc(100vw - 24px) !important;
    max-height: 84vh;
    overflow: auto;
  }
  .modal-dialog,
  .modal-content { max-width: calc(100vw - 24px); margin: 12px auto; }

  /* 图表自适应容器宽度 */
  canvas,
  svg { max-width: 100%; }

  /* 刘海屏 / 手势条安全区（配合各页已有的 viewport-fit=cover） */
  .admin-mobile-nav-bar {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* ═══════════════════════════════════════════════════════════
   任务 5：平板档（768–900px）——侧栏常驻 + 内容 ≤2 列
   ───────────────────────────────────────────────────────────
   平板横向够宽，摊开导航比抽屉少一次点击；--admin-sidebar-w 在 ≤1080px 时
   已由 admin-common.css 降为 208px，这里只需保证侧栏不参与任何位移/隐藏，
   并把内容栅格的上限收到 2 列（平板竖放 768px 时 3 列会挤成一条）。
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 900px) {
  body.admin-shell-ready .admin-sidebar {
    position: fixed;
    top: var(--shell-header-h);
    bottom: 0;
    left: 0;
    transform: none !important;
    overflow: hidden;
  }
  body.admin-shell-ready .admin-sidebar__list { overflow-y: auto; overflow-x: hidden; }

  .admin-main .scenic-card-grid,
  .admin-main .scenic-list,
  .ov-grid,
  .service-entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .tune-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}