/* ==========================================================================
   选址参谋 · 移动端选址工作台（m-workbench.css）
   --------------------------------------------------------------------------
   只作用于 body.m-app（移动端外壳）。PC 端不加载移动端外壳，
   所以即使本文件被 extraCss 带进了 PC 页面，也不会命中任何元素。

   为什么单独开一份，而不是继续往 mobile.css 里加：
     mobile.css 的定位是「PC 结构在窄屏下怎么挤」，它跑在 PC 外壳里，
     用 @media (max-width: 820px) 判断。而移动端的判据是 UA（服务端分流），
     手机横屏 932px 时那个媒体查询根本不成立 —— 结果就是横屏一瞬时
     工作台的移动排版整个失效。本文件不带宽度媒体查询，只看 body.m-app。

   这一页要解决的具体痛点（实测记录）：
     1. 点「确定分析」后，结果渲染在地图下方约 400px 处，
        而用户当时停在页面底部按按钮 —— 屏幕毫无变化，以为按钮坏了。
        解法：结果改成全屏浮层，出现即覆盖，关掉退回条件面板。
     2. 四步条件里「下一步」「预算档位」的热区只有 20~38px，
        拇指误触率高，必须提到 44px 以上。
     3. 底部操作条与 tabbar 叠在一起，最下面一屏内容被压住 120px。
   ========================================================================== */

/* ==========================================================================
   1. 结果浮层
   ========================================================================== */

/* 关闭浮层后仍然存在的「查看结果」胶囊：
   报告没被销毁，只是藏起来了 —— 让用户随时能回到刚才那份结果，
   而不是逼他重新点一次「确定分析」。 */
body.m-app .m-wb-chip {
    display: none;
    position: fixed;
    left: 14px;
    bottom: calc(var(--m-tab-h) + 62px + var(--m-safe-b) + 12px);
    z-index: 95;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px 0 11px;
    border-radius: 20px;
    border: 1px solid rgba(var(--rgb-brand), .5);
    background: var(--float);
    color: var(--brand);
    font-size: var(--m-fs-sm);
    font-family: inherit;
    box-shadow: var(--shadow);
    cursor: pointer;
}
body.m-app .m-wb-chip:active { transform: scale(.97); }

/* 浮层顶栏：结果打开时才出现。它挂在 body 下而不是 #report-out 里 ——
   workbench.js 每次渲染都会重写 #report-out 的 innerHTML，
   塞在里面的关闭按钮会被一起冲掉。 */
body.m-app .m-wb-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 155;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: var(--m-safe-t) 10px 0;
    background: var(--panel);
    border-bottom: 1px solid var(--line-soft);
}
body.m-app .m-wb-bar-t {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: var(--m-fs);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.m-app .m-wb-bar-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: var(--m-hit);
    min-height: var(--m-hit);
    padding: 0 8px;
    border: 0;
    border-radius: var(--m-r-xs);
    background: transparent;
    color: var(--text-2);
    font-size: var(--m-fs-sm);
    font-family: inherit;
    cursor: pointer;
}
body.m-app .m-wb-bar-btn:active { background: var(--panel-2); }

/* 结果本体：常态仍在文档流里（mobile.css 已把 .wb-right 提到地图上方），
   只有 html.m-wb-result 时升级成全屏浮层。 */
html.m-wb-result body.m-app #report-out {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 150;
    margin: 0;
    /* 下边距要给底部操作条让位：浮层打开时操作条仍在最上层，
       不留这一截，报告最后一张表永远看不全。 */
    padding: calc(52px + var(--m-safe-t) + 10px) var(--m-pad) 150px;
    background: var(--bg);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
html.m-wb-result body.m-app .m-wb-bar { display: flex; }
html.m-wb-result body.m-app .m-wb-chip { display: none; }
html.m-wb-result body.m-app .wb-fab { display: none; }

/* 浮层打开时，底部操作条要压到浮层之上（否则「生成完整报告」点不到），
   同时取消它给 tabbar 留的那一截 —— tabbar 此刻已被浮层盖住。 */
html.m-wb-result body.m-app #wb-actionbar {
    z-index: 160;
    bottom: 0;
}

/* 结果里的表格：报告正文有 6 列以上的对照表，390px 下必然溢出。
   这里只允许纵向阅读，横向滚动交给用户主动操作，
   而且必须配 overflow-y: hidden —— 只写 x 时计算值会把 y 提升成 auto，
   iOS 上竖向起手的手势会被容器吃掉，整页像被钉住。 */
html.m-wb-result body.m-app #report-out .table-wrap,
html.m-wb-result body.m-app #report-out .rep-table {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   2. 热区
   ========================================================================== */

/* 「下一步」原来是 padding:2px 0 的纯文字链接，实测高度 20px。
   手机上它是一步到下一步的唯一入口，必须给足热区，但又不能看着像主按钮抢戏，
   所以是「透明底 + 44px 高 + 右对齐」。 */
body.m-app #wb-root .step-next {
    margin-top: 12px;
}
body.m-app #wb-root .step-next button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-height: var(--m-hit);
    padding: 0 4px 0 12px;
    font-size: var(--m-fs-sm);
    font-weight: 500;
}

/* 预算档位：一行一档，整行可点 */
body.m-app #wb-root .budget-item {
    min-height: 52px;
    padding: 10px 13px;
}
body.m-app #wb-root .budget-item .b-l small { font-size: var(--m-fs-xs); }
body.m-app #wb-root .budget-item .b-r { font-size: var(--m-fs-sm); }

/* 面积区间：两个数字框在手机上并排只剩 62px，字一聚焦就放大整页。
   改成 flex 均分 + 16px 字号。 */
body.m-app #wb-root .ab-range { gap: 8px; flex-wrap: wrap; }
body.m-app #wb-root .ab-range .input {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 42px;
    font-size: 16px;
}
body.m-app #wb-root .ab-range .btn { margin-left: 0; min-height: 42px; }

/* 四步 Tab：58px 已经够，但字号偏小，提一档更好读 */
body.m-app #wb-root .sb-tab .sb-t { font-size: var(--m-fs-xs); }
body.m-app #wb-root .sb-tab .sb-v { font-size: 11px; }

/* 地图工具条与小号按钮
   --------------------------------------------------------------------------
   实测高度：全屏 / 当前定位 / 半径档 34px，热力开关 26px，搜索与 +− 38px。
   这些都是 PC 尺寸直接搬过来的，拇指点下去经常点偏 —— 用户说的
   「点击测算操作费劲」，这是最直接的一处来源，不是排版问题而是热区问题。
   统一抬到 40px（图标类不够宽的同时补 min-width，否则只是变高没变好点）。

   注意必须带 #wb-root：mobile.css:493 写的是 `#wb-root .map-fs-btn`
   （一个 ID），只写 `body.m-app .map-fs-btn`（两个类）压不过它，
   min-height 会被 34px 顶回去 —— 实测第一次改完仍是 34px。 */
body.m-app #wb-root .map-fs-btn,
body.m-app #wb-root .map-loc-btn,
body.m-app #wb-root .map-heat-btn,
body.m-app #wb-root .map-rg-btn,
body.m-app #wb-root .map-q button,
body.m-app #wb-root .map-zoom button,
body.m-app #wb-root .btn.btn-sm {
    min-height: 40px;
}
body.m-app #wb-root .map-rg-btn,
body.m-app #wb-root .map-q button {
    min-width: 62px;
}
/* 热力那条原来只有图标 + 极小内边距，26px 高、宽度也窄，两侧各放 12px */
body.m-app #wb-root .map-heat-btn {
    padding-left: 12px;
    padding-right: 12px;
}
/* 缩放 +− 是竖排的两个小方块，补正方形尺寸，避免只变高变成长条 */
body.m-app #wb-root .map-zoom button {
    min-width: 40px;
}
/* 顶部「我的报告 / 积分充值 / 重置」等 btn-sm 补纵向内边距，
   min-height 单独作用在 flex 容器里可能被 line-height 顶回来 */
body.m-app #wb-root .btn.btn-sm {
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   3. 底部操作条
   --------------------------------------------------------------------------
   三个按钮的文字都很长（「生成完整报告 · 100 积分」「导出简版 PDF」），
   三等分在 390px 下每个只有 118px。允许折行，不允许截断 ——
   截断后用户看不出这一下要花多少分。
   ========================================================================== */
body.m-app #wb-actionbar {
    z-index: 90;
}
body.m-app #wb-actionbar .wab-btns .btn {
    min-height: var(--m-hit);
    line-height: 1.25;
    white-space: normal;
}

/* ==========================================================================
   4. 地图
   --------------------------------------------------------------------------
   mobile.css 给的是 300px 固定高。手机上这页的第一件事是「在地图上落点」，
   300px 只够看到两条街。改成按视口比例给高度：
   小屏（<380 宽）时用 46vh 免得地图把条件面板挤没。
   ========================================================================== */
body.m-app #wb-root .map-card:not(.map-full) .map-stage {
    height: 46vh;
    min-height: 280px;
    max-height: 420px;
}

/* 地图全屏态：退出按钮要能点到，且不压住底部操作条 */
body.m-app #wb-root .map-card.map-full .map-fs-exit {
    top: calc(var(--m-safe-t) + 10px);
    bottom: auto;
}

/* ==========================================================================
   5. 报告内容在手机上的字距
   --------------------------------------------------------------------------
   报告正文是给 A4 排的，行高 1.9 在手机上会显得松散；表格单元格的
   padding 也是按 1100px 宽度给的。这里只调这两项，不改任何结构。
   ========================================================================== */
body.m-app #report-out { font-size: var(--m-fs-sm); }
body.m-app #report-out table { font-size: var(--m-fs-xs); }
body.m-app #report-out th,
body.m-app #report-out td { padding: 7px 8px; }
body.m-app #report-out h2 { font-size: var(--m-fs-lg); }
body.m-app #report-out h3 { font-size: var(--m-fs); }

/* ==========================================================================
   v2.3.0 · 首屏让位 + 顶部信息条不横滚
   --------------------------------------------------------------------------
   实测（390×844）：
     · 地图高 46vh（≈388px），加上卡片头 97px，首屏只剩 200 多像素给「分析条件」；
     · 而 .wb-left 在 DOM 里排在地图后面，起点在 y≈1119 —— 用户要滑 1.3 屏才看到第 1 步，
       可手指落在地图上时地图会吃掉纵向手势，于是表现为「页面滚不动」。
   两条一起改：
     1) 地图压到 34vh（≈286px），把首屏还给流程；
     2) 顶部信息条（全屏/定位/底图/半径）改成可换行，不再需要左右拖。
   地图手势这一层没有动（它还要拖拽平移），所以额外在卡片底部加一行文字提示，
   让用户知道「往下滑还有东西」—— 这是最省事也最不会出错的做法。
   ========================================================================== */
body.m-app #wb-root .map-card:not(.map-full) .map-stage {
    height: 34vh;
    min-height: 200px;
    max-height: 300px;
}

/* 顶部条：换行而不是横滚。原来 .mc-r 是单行 inline 容器，
   390 宽下「底图 高德地图（GCJ-02）」被切一半、分析半径整组在屏幕外。 */
body.m-app #wb-root .map-card-head {
    flex-wrap: wrap;
    row-gap: 6px;
    align-items: flex-start;
}
body.m-app #wb-root .map-card-head .mc-l { flex: 1 1 auto; min-width: 0; }
body.m-app #wb-root .mc-r {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
}
body.m-app #wb-root .mc-rg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    width: 100%;
}
body.m-app #wb-root .map-fs-btn,
body.m-app #wb-root .map-loc-btn,
body.m-app #wb-root .map-rg-btn,
body.m-app #wb-root .map-loc-tip {
    min-height: 36px;
    padding: 0 10px;
    font-size: var(--m-fs-xs);
    border-radius: 999px;
    white-space: nowrap;
}
body.m-app #wb-root .map-src-badge {
    font-size: 11px;
    padding: 3px 7px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 「下面还有内容」的提示：纯 CSS 生成，不新增 DOM、也不依赖 JS 时序 */
body.m-app #wb-root .map-card:not(.map-full)::after {
    content: '下滑继续：品类 → 预算 → 体验条件 → 点确定分析';
    display: block;
    padding: 8px 12px 9px;
    text-align: center;
    /* 必须 nowrap：这句一旦折成两行，第二行会被底部常驻条压掉一半（实测「析」字被切） */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11.5px;
    color: var(--muted);
    border-top: 1px dashed var(--line-soft);
}
body.m-app #wb-root .map-card.map-full::after { content: none; }

/* 步骤条吸顶：滑到第 3、4 步时还能一键跳回第 1 步。
   —— v2.3.0 修正：首屏新增的 .wb-guide 已经全程吸顶（钉在顶栏下沿 52px），
   这里若再吸一次就会叠成两条、白吃 140px 视口，而且 .wb-stepbar 的 top:0
   本来就会被 .m-head 挡住。左栏这条回归普通文档流，只作「带值摘要的详细步骤」。 */
body.m-app #wb-root .wb-stepbar {
    position: static;
    background: transparent;
    padding-top: 0;
    padding-bottom: 0;
}
body.m-app #wb-root .wb-stepmeta { position: static; background: transparent; }

/* v2.3.0 · 首屏进一步让位（第二轮）
   第一轮把地图压到 34vh 后发现：卡片头换成两行后整体仍有 575px，
   加上页头三段说明（标题 + 三行导语 + 数据口径），首屏依旧只有地图。
   这里做三件事：
     1) 页头导语在手机上收成一行（第二行起藏起来，完整说明在「关于」页与首屏卡片里都有）；
     2) 地图再压到 28vh；
     3) 卡片头与卡片体的内边距收紧 2px，把省下的高度让给流程区。 */
body.m-app #wb-root .wb-head { padding-bottom: 10px; }
body.m-app #wb-root .wb-head .sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--m-fs-xs);
    line-height: 1.65;
    margin-top: 4px;
}
body.m-app #wb-root .wb-head h1 { font-size: 21px; }
body.m-app #wb-root .wb-src { margin-top: 4px; font-size: 11.5px; }
body.m-app #wb-root .map-card:not(.map-full) .map-stage {
    height: 28vh;
    min-height: 190px;
    max-height: 250px;
}
body.m-app #wb-root .map-card-head { padding: 8px 10px; }
body.m-app #wb-root .map-card-head h3 { font-size: var(--m-fs); }

/* v2.3.0 · 触摸方向分工（第三轮）
   前两轮解决了「地图太高」，但真正让用户觉得滚不动的是手势：canvas 的 touchmove
   在 JS 里 preventDefault 后，浏览器不再把纵向手势当滚动 —— 手指落在地图上就翻不了页。
   JS 侧已加方向锁（竖向放行 / 横向拖图），这里再补一层 touch-action：
   pan-y 让浏览器在手指刚移动时就认定「这是竖滑」，不必等 JS 那 8px 的定性窗口，
   手感从「黏一下才动」变成跟手。横向仍由 JS 接管平移地图。 */
body.m-app #wb-root .map-stage canvas { touch-action: pan-y; }

/* ==========================================================================
   v2.3.0 · 首屏「四步引导」与地图瘦身（第四轮，最终形态）
   实测首屏几何（390×844）暴露三件事：
     · .wb-stepbar 在 y=1132，首屏 844 根本看不到 —— 「这件事分几步」全靠猜；
     · .map-card-head 占 173px，比地图本身（236px）的一半还多，控件比地图抢眼；
     · 地图上的浮层（搜索框 40 + 图例 78 + 操作提示 + 版权）几乎糊满 236px。
   本轮：引导条上屏并吸顶；卡片头压到 ~100px；浮层能收则收。
   ========================================================================== */

/* ---- ① 四步引导条：桌面端没有它的位置（左栏已有 .wb-stepbar），只在移动端出现 ---- */
.wb-guide { display: none; }

body.m-app #wb-root .wb-guide {
    display: flex;
    align-items: center;
    gap: 2px;
    /* 吸顶位置必须是「顶栏高度」而不是 0：
       移动端外壳的 .m-head 是 sticky top:0 / z-index:60，高 52px，
       引导条若也钉在 0 会被它整块盖住（z-index 30 < 60），等于白加。
       钉在 52px 正好贴在顶栏下沿，滚到任何一步都看得见。 */
    position: sticky;
    top: var(--m-head-h, 52px);
    z-index: 30;
    margin: 0 0 10px;
    padding: 9px 10px;
    border-radius: 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
body.m-app #wb-root .wb-guide::-webkit-scrollbar { display: none; }

body.m-app #wb-root .wg-step {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    /* 实测：4 个步骤 + 3 个箭头必须正好吃下 358px 内容宽。
       字号 11.5 / 内边距 5-8 是压过的结果，再大 1px 就会挤出横向滚动条。 */
    padding: 5px 8px 5px 5px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.2;
    white-space: nowrap;
    transition: background .16s, color .16s, border-color .16s;
}
body.m-app #wb-root .wg-step b {
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: rgba(127, 127, 127, .22);
    color: inherit;
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* 已完成：数字变实心勾场景太重，这里只把圆点填成低饱和绿 + 文字回到正文色 */
body.m-app #wb-root .wg-step.is-done { color: var(--text); }
body.m-app #wb-root .wg-step.is-done b { background: rgba(46, 160, 67, .22); color: #3fb950; }
body.m-app #wb-root .wg-step.is-on {
    color: var(--text);
    background: rgba(47, 129, 247, .14);
    border-color: rgba(47, 129, 247, .45);
}
body.m-app #wb-root .wg-step.is-on b { background: var(--brand, #2f81f7); color: #fff; }
body.m-app #wb-root .wg-ar {
    flex: none;
    width: 10px;
    height: 1px;
    background: var(--line);
}

/* 引导条右侧原本还有一句「选完点底部确定分析」，4 步 + 3 箭头已占满一行，
   加上它就被挤出屏幕（出现横向滚动条）。这句挪到地图卡片的下滑提示里，语义不变。 */

/* ---- ② 页头：移动端单列布局下，「面板靠左/靠右」和「收起面板」都没有意义 ----
   （面板本来就上下堆叠，左右切换看不出区别；收起面板的 × 在面板标题栏里已有一个） */
body.m-app #wb-root .wb-side-switch,
body.m-app #wb-root .wb-head-act #btn-collapse { display: none; }
body.m-app #wb-root .wb-head-act { gap: 8px; justify-content: flex-start; }
body.m-app #wb-root .wb-head-act .btn {
    /* 移动端 .btn 带了 40px 的 min-height（触摸热区），这里两个按钮是次要动作，
       不必占满整行 —— 放开 flex 让它们按内容宽排一行，高度压到 34 */
    flex: 0 0 auto;
    height: 34px;
    min-height: 34px;
    padding: 0 14px;
    font-size: var(--m-fs-xs);
}
/* 首屏那三段说明（标题 + 导语 + 数据口径）压缩：导语留一行，口径条压成一行小字 */
body.m-app #wb-root .wb-head .sub {
    -webkit-line-clamp: 2;
    max-height: none;
}
body.m-app #wb-root .wb-src-d { display: none; }
body.m-app #wb-root .wb-src { gap: 6px; }

/* ---- ③ 地图卡片头：实测 177px → 约 107px ----
   实测到的问题是 .mc-l 以 flex:1 1 auto 吃满整行，把 .mc-r 整个挤到下一行，
   于是「全屏/定位/徽标」「热力」「分析半径」各占一行，三行整整 127px。
   这里改成纵向三段：标题行（25）+ 控件行（28）+ 半径行（28），并把每个控件压成小胶囊。 */
body.m-app #wb-root .map-card-head {
    flex-direction: column;
    align-items: stretch;
    padding: 8px 10px 7px;
    gap: 5px;
}
body.m-app #wb-root .map-card-head .mc-l {
    width: 100%;
    flex: 0 0 auto;
    gap: 6px;
    align-items: center;
}
body.m-app #wb-root .map-card-head .mc-l h3 { font-size: var(--m-fs); }
body.m-app #wb-root .map-card-head .mc-name {
    font-size: 11.5px;
    padding: 1px 7px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.m-app #wb-root .map-card-head .mc-r {
    width: 100%;
    flex: 0 0 auto;
    gap: 5px;
    row-gap: 5px;
    align-items: center;
}
/* 全屏 / 当前定位 / 热力：统一成 30px 小胶囊，同一行放得下。
   注意必须显式写 min-height —— 本文件前面有一组为触摸热区加的 min-height:40px，
   只写 height 会被它顶回去（第一次改完实测仍是 40px）。 */
body.m-app #wb-root .map-fs-btn,
body.m-app #wb-root .map-loc-btn,
body.m-app #wb-root .map-heat-btn {
    height: 30px;
    min-height: 30px;
    padding: 0 9px;
    margin-right: 0;
    font-size: 11px;
    border-radius: 999px;
    line-height: 1;
}
/* 底图徽标：整串是全名（如「高德地图（GCJ-02）一致」），手机上截断，全名保留在 title */
body.m-app #wb-root .map-src-badge {
    height: 30px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    max-width: 38%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
    padding: 0 8px;
    border-radius: 999px;
}
/* 半径行独占一行，标签与四档同排 */
body.m-app #wb-root .mc-rg {
    flex: 1 1 100%;
    gap: 5px;
    margin-top: 0;
}
body.m-app #wb-root .mc-rg-t { font-size: 11px; }
body.m-app #wb-root .map-rg-btn {
    height: 28px;
    min-height: 28px;
    min-width: 0;
    padding: 0 10px;
    font-size: 11px;
    border-radius: 999px;
    line-height: 1;
}

/* ---- ④ 地图浮层瘦身：236px 高的画布，浮层不能比地物还多 ---- */
/* 操作提示「点击地图落点，拖动看周边，滚轮缩放」在手机上两处失真：
   没有滚轮；而且它压在热力图例下面。地图卡片下方已有「继续下滑设置…」，这条可以收掉。 */
body.m-app #wb-root .map-stage .map-hint { display: none; }
/* 图例三项在手机上收成一行小字，压到 40px 以内 */
body.m-app #wb-root .map-stage .map-legend {
    bottom: 6px;
    left: 8px;
    right: auto;
    padding: 3px 8px;
    font-size: 10.5px;
    gap: 7px;
    border-radius: 999px;
}
body.m-app #wb-root .map-stage .map-legend i { width: 6px; height: 6px; }
/* 热力图例：桌面版是「色带 + 低/高 + 峰值·点位·覆盖·留白·来源」多行（实测 78px），
   在 236px 的画布上等于糊住三分之一的图。手机上只留色带 + 一行核心统计，
   完整口径仍写进 title（长按可见），报告页里也有全量数据。 */
body.m-app #wb-root .wb-heat-legend {
    padding: 5px 8px 6px;
    border-radius: 8px;
    right: 6px;
    bottom: 28px;
    max-width: 63%;
}
body.m-app #wb-root .wb-heat-legend .wbh-bar { width: 100%; height: 6px; }
/* 「低 / 高」两个字在手机上占掉一整行（13px），而色带两端本就是极值 —— 收掉 */
body.m-app #wb-root .wb-heat-legend .wbh-row { display: none; }
body.m-app #wb-root .wb-heat-legend .wbh-peak {
    margin-top: 3px;
    font-size: 9.5px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 搜索框：实测原先是 right:8px，右端 x=348，而缩放按钮占 304~346 ——
   两者直接叠在一起，「搜索」按钮被 +/− 压掉半个，看起来像界面坏了。
   这里给缩放列让出 54px（按钮 38 + 右边距 8 + 间隙 8）。 */
body.m-app #wb-root .map-q { top: 8px; left: 8px; right: 54px; }
body.m-app #wb-root .map-q input {
    height: 36px;
    min-height: 36px;
    font-size: var(--m-fs-xs);
}
body.m-app #wb-root .map-q button#map-q-go {
    height: 36px;
    min-height: 36px;
    min-width: 56px;
    padding: 0 12px;
    font-size: var(--m-fs-xs);
}
body.m-app #wb-root .map-zoom { top: 8px; right: 8px; }
body.m-app #wb-root .map-zoom button {
    width: 38px;
    min-width: 38px;
    height: 36px;
    min-height: 36px;
    font-size: 16px;
}

/* ---- ⑤ 地图底栏：实测 69px 里有一半是空的 ----
   .mf-addr（反查到的地址）在没选点时是个空 span，但它带 flex:1 1 100%，
   空着也把整行占掉，于是「亚运村 · 已选商圈」和「z 12.0」被拆成两行、白吃 29px。
   :empty 直接让空元素退出布局；有地址时它照旧独占一行。 */
body.m-app #wb-root .map-foot {
    padding: 7px 11px;
    gap: 4px 10px;
    font-size: 11.5px;
}
body.m-app #wb-root .map-foot .mf-addr:empty { display: none; }
body.m-app #wb-root .map-foot .mf-coord {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.m-app #wb-root .map-foot .map-z { flex: none; font-size: 11px; opacity: .68; }

/* 底部常驻条：三个按钮等分 358px，中键文案「生成完整报告 · 100 实积分」有 12 个字，
   在 12px 下需要约 155px，而每个按钮只有约 107px —— 必然两行。
   这里不删字（「实积分」是本次需求要求保留的措辞），改为压字号 + 收紧行高，
   让两行只多出约 15px，而不是把整条撑高一截。 */
body.m-app #wb-actionbar .wab-btns .btn {
    font-size: 11.5px;
    line-height: 1.3;
    white-space: normal;
}

/* ==========================================================================
   v2.4.0 · 移动端工作台版式返工（需求 1~6）
   这一段的每条规则都以 `body.m-app #wb-root` 起头：
   加载顺序是 … m-workbench → mobile → m-app → m-page，mobile.css 里的
   `#wb-root .xxx` 单列规则会压掉本文件同特异性的声明，必须靠这层作用域反压。
   ========================================================================== */

/* ---- ① 全屏地图：允许双指缩放 ----
   非全屏态 touch-action 是 pan-y（保证单指竖滑翻页不误触），
   这个值同时会禁掉浏览器原生 pinch-zoom，所以全屏时必须放开成 none，
   否则双指按上去只有页面被锁住、地图一动不动。 */
body.m-app #wb-root .map-card.map-full .map-stage canvas { touch-action: none; }

/* ---- ② 第二/三步：点导航或步骤标题后，内容要整块露在吸顶条下面 ----
   scroll-margin 兜住「浏览器自己滚」的情况（锚点、focus），
   JS 里 syncStepUi 再按实际头部高度补一次偏移兜住「点按钮」的情况。 */
body.m-app #wb-root .step[data-step],
body.m-app #wb-root .step[data-step] .step-head,
body.m-app #wb-root .wb-left {
    scroll-margin-top: calc(var(--m-head-h, 52px) + 52px);
}
body.m-app #wb-root .panel-body { padding-top: 2px; }

/* ---- ③ 品类：每行 4 格，把一列到底的长列表压成网格 ----
   桌面是 auto-fill minmax(108px,1fr)；手机可用宽度约 342px，
   4 列每格 79px，刚好放得下 4 字品类名（12px 字号）。 */
body.m-app #wb-root .cat-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 4px 0 8px;
}
body.m-app #wb-root .cat-card {
    padding: 7px 3px;
    align-items: center;
    text-align: center;
    gap: 1px;
}
body.m-app #wb-root .cat-card-n { font-size: 12px; line-height: 1.25; }
body.m-app #wb-root .cat-card-c { font-size: 10px; line-height: 1.2; opacity: .72; }
body.m-app #wb-root #cat-roots.chip-row { gap: 6px; }
body.m-app #wb-root #cat-roots .chip { padding: 4px 10px; font-size: 12px; }
/* 窄屏（≤360）四列会挤，退到三列 */
@media (max-width: 360px) {
    body.m-app #wb-root .cat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- ④ 预算：两列横排，不再一档一行 ----
   原来是 flex 整行（标签在左、金额在右），两列后每格只有约 168px，
   再左右分布会把「20–50 万」挤成两行，所以改纵向：上标签、下金额。 */
body.m-app #wb-root .budget-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}
body.m-app #wb-root .budget-item {
    min-height: 46px;
    padding: 6px 9px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
}
body.m-app #wb-root .budget-item .b-l { font-size: 12px; line-height: 1.2; }
body.m-app #wb-root .budget-item .b-r { font-size: 11.5px; line-height: 1.2; }

/* ---- ⑤ 面积区间：上下限文字不能被右侧图标压住 ----
   根因是全局 `input[type=number]{ padding-right:30px; text-align:right }`
   给 +/− 指示图标留了 24px 位，而 `.ab-range .input{padding:0 7px}` 用简写
   把这个留位抹掉了，图标直接盖在右对齐的数字上。
   这里：去掉该背景图标、文字居中、两框强制同行。 */
body.m-app #wb-root .ab-range {
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
}
body.m-app #wb-root .ab-range .input {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 40px;
    padding: 0 4px;
    text-align: center;
    font-size: 15px;
    background-image: none;      /* 撤掉那块 24×36 的指示图标 */
}
body.m-app #wb-root .ab-range .input::-webkit-outer-spin-button,
body.m-app #wb-root .ab-range .input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
body.m-app #wb-root .ab-range em,
body.m-app #wb-root .ab-range b { flex: none; font-size: 12px; }
body.m-app #wb-root .ab-range .btn {
    flex: none;
    margin-left: 0;
    min-height: 40px;
    padding: 0 10px;
    font-size: 12px;
}
body.m-app #wb-root #area-band-chips { max-height: 148px; overflow-y: auto; }

/* ---- ⑥ 体验条件：2×2 横排，压缩纵向间距 ---- */
body.m-app #wb-root .rg-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 6px;
}
body.m-app #wb-root .rg-row .field { min-width: 0; margin-bottom: 0; }
body.m-app #wb-root .rg-row .field > label { font-size: 11.5px; margin-bottom: 3px; }
body.m-app #wb-root .rg-row .select {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 6px;
    font-size: 12px;
}
body.m-app #wb-root .step-body { padding-top: 8px; }