/* mobile.css —— H11 窄屏适配。**全部是覆盖层**：既有 8 个样式文件有 sha256 红线，一个字节不动。
 *
 * 为什么走覆盖层而不是改原文件：红线当初是为了防止改内容时顺手动版式。这次是有意加断点，
 * 但改原文件要先重拍哈希基线，而基线一旦重拍，「版式没动过」这件事就失去证据。
 * 覆盖层的代价是规则会和原规则打架，所以这里只做三件事：让侧栏脱离文档流、让顶栏收起、让宽块能缩。
 *
 * 桌面端（≥860）本文件不产生任何规则，线上现有版式逐像素不变。
 */

/* 汉堡按钮：桌面端不存在 */
.tb-burger { display: none; width: 36px; height: 36px; border: 0; background: none; color: var(--ink-60); border-radius: 8px; align-items: center; justify-content: center; font-size: 18px; margin-left: 8px; cursor: pointer; }
.nav-scrim { display: none; }

@media (max-width: 859px) {
  /* ① 壳：侧栏脱离文档流，正文吃满整屏 */
  .tb-burger { display: inline-flex; }
  .topbar { padding-right: 0; }
  .topbar-logo { width: auto; padding-left: 10px; margin-right: 0; font-size: 15px; }
  .topbar-nav { display: none; }              /* 四个区收进抽屉，抽屉里侧栏本来就列着 */
  .topbar-right { gap: 6px; padding-right: 10px; }
  .tn-partner, .tn-env { display: none; }      /* 伙伴链接与环境切换让位给登录按钮 */
  .tn-icon { display: none; }

  .sidebar { position: fixed; left: 0; top: var(--topbar-h); bottom: 0; z-index: 40;
    transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 8px 28px rgba(20, 21, 28, .18); }
  .bfl.nav-open .sidebar { transform: none; }
  .side-handle { display: none; }
  .nav-scrim { display: block; position: fixed; inset: var(--topbar-h) 0 0; background: rgba(20, 21, 28, .3);
    opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 39; }
  .bfl.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

  /* ② 正文：留白收窄，宽块能缩 */
  .route-host, .page, .dc, .mk { padding-left: 16px !important; padding-right: 16px !important; }
  .grid-3, .grid-4, .grid-2, .mk-grid { grid-template-columns: 1fr !important; }
  .card-fixed, .mk-card { height: auto !important; min-height: 0; }
  .pick, .cols { grid-template-columns: 1fr !important; }

  /* ③ 首屏：轮播与装饰按屏缩，不再固定 1080 / 760 */
  .mk-hero { padding: 24px 0 18px; }
  .mk-deco { display: none; }                  /* 5 个浮动图标在窄屏必压住标题 */
  .mk-hero-t { font-size: 21px; line-height: 28px; }
  .mk-hero-s { font-size: 16px; line-height: 24px; }
  .mk-hero-q .search-hero, .search-hero { width: 100%; max-width: none; }
  .mk-bn { width: 100%; height: auto; }
  .mk-bn-i { position: relative; top: auto; left: auto; width: 100%; height: auto; margin: 0 0 10px; transform: none !important; }
  .mk-bn-i.is-prev, .mk-bn-i.is-next, .mk-bn-i.is-off { display: none; }   /* 窄屏只留当前帧，靠圆点切 */
  .mk-bn-face { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
  .mk-bn-art { width: 100%; }
  .mk-bn-dots { position: static; margin-top: 6px; }
  .mk-sec { margin-top: 36px; }
  .mk-sec-hd { height: auto; flex-wrap: wrap; gap: 10px; }
  .mk-sec-r { width: 100%; }
  .mk-sec-r .search-sm, .mk-sec-r .search { flex: 1; min-width: 0; }
  .mk-fp { width: calc(100vw - 32px); right: auto; left: 0; }

  /* ④ 会横向撑破的块：各自滚，页面本体永不横向滚 */
  .tbl-wrap, .dc-table, .table-wrap { overflow-x: auto; }
  pre, .code pre, .cb pre { overflow-x: auto; }
  .stepper { overflow-x: auto; }
  .stepper > button { min-width: 116px; }
  .chk { flex-wrap: wrap; }
  .chk .chk-t { width: auto; }

  /* ⑤ 浮动对比按钮：桌面端它的 left 写的是 calc(50% + 侧栏宽/2)，窄屏侧栏脱离文档流后这个偏移就歪了；
   *    而且没选工具时它是禁用态却仍浮在正文上，窄屏屏幕小，压住的正好是第一张卡的标题。
   *    窄屏下重新居中，并在没选时直接不显示（桌面端保持原样，那里它是个有意的常驻入口）。 */

  /* ⑥ 触控目标不小于 44：按钮别缩到点不中 */
  .btn, .btn-line, .btn-primary, .sf-key { min-height: 40px; }
  .mi { min-height: 44px; }
}

/* 超窄（iPhone SE 一档）：再收一次字号与留白 */
@media (max-width: 380px) {
  .route-host, .page, .dc, .mk { padding-left: 12px !important; padding-right: 12px !important; }
  .mk-hero-t { font-size: 19px; }
  .topbar-logo span:last-child { display: none; }   /* 只留 logo 方块，给右侧按钮腾位 */
}

/* ── H156 窄屏：区页签收进抽屉（抽屉顶上列五个区），右侧胶囊让位；抽屉用录屏侧栏那条减速曲线 ── */
@media (max-width: 859px) {
  .zn-top .topbar-logo { width: auto; margin-right: 0; }
  .zn-sub { display: none; }
  .zn-pill, .zn-back, .zn-tl, .zn-mm-wrap { display: none; }
  .zn-gs-btn, .zn .tn-icon[data-theme-toggle] { display: inline-flex; }
  .zn-side, .zn-side.is-bare { display: flex; width: 260px; box-shadow: none; transition: transform var(--m-slow) var(--ease-out), box-shadow var(--m-slow) var(--ease-out); }
  .bfl.nav-open .zn-side { box-shadow: 0 8px 28px rgba(20, 21, 28, .18); }
  .zn .tn-login { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .zn-mzones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 12px 12px 4px; }
  .zn-mz { height: 34px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--ink-04); color: var(--ink-80); font-size: 13px; text-decoration: none; }
  .zn-mz.is-active { background: var(--brand-bg); color: var(--brand); font-weight: 600; }
  .zn .nav-scrim { transition: opacity var(--m-slow) var(--ease-out); }
  .zn-banner { padding: 9px 16px; }

  .cm-q { width: 100%; }
  .cd-stats { grid-template-columns: 1fr 1fr; }
  .cd-tbl th:nth-child(3), .cd-tbl td:nth-child(3) { display: none; }
  .dr { padding: 20px 16px 48px; }
  .zut { gap: 16px; overflow-x: auto; }
  /* H185 场景页：两张文档卡竖排，工具表名字与说明分两行 */
  .sc-cards { grid-template-columns: 1fr; }
  .sc-step { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 4px 10px; }
  .sc-step-w { grid-column: 2; }
  .sc-step-go { grid-column: 3; grid-row: 1; }
}