/* ==========================================================================
   选址参谋 · 首页专属样式（home.css）
   --------------------------------------------------------------------------
   只在 home.php 里用 <link> 引入，因此本文件的加载顺序在 app.css 与 mobile.css
   之后 —— 同特异性下后出现的赢，所以这里可以直接覆写 .db-* 的老值，不需要
   !important，也不会污染其他页面。

   三条硬约束（本文件所有规则都遵守）：
   1) 字号只取 --fs-*，间距只取 --sp-*，颜色只取 --* 令牌或 rgba(var(--rgb-*), a)。
      写死一处，后台改基准或切日间模式就会留下一个对不上的孤点。
   2) 首页每一个区块之间的垂直距离恒为 --sp-8（80px）。实现方式是「区块只负责
      自己的下边距」，有底色带的那一块（四步出结论）自带上下留白，紧邻它的上一块
      用 .home-sec-tight 把下边距让出去 —— 这样从任何一个区块走到下一个区块，
      距离都是 80px，不会出现 80+80=160 的双倍留白。
   3) 榜单行用 grid 画伪表格：列宽以 --db-* 变量集中定义，表头与数据行引用同一组
      变量。两套 grid 各自计算轨道宽度，写死数值才能保证表头和数据列严格对齐。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 区块节奏
   -------------------------------------------------------------------------- */
.home-hero { padding: var(--sp-8) 0; }
/* 轮播是首屏的延伸，不该再吃一份区块下边距 */
.home-flush { padding: 0; margin-bottom: var(--sp-8); }
.home-sec { padding: 0 0 var(--sp-8); }
.home-sec-tight { padding-bottom: 0; }
/* 有底色带的区块自己承担上下留白，左右拉到通栏 */
.home-sec-band {
    padding: var(--sp-8) 0;
    background: var(--bg-soft);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}
.home-sec .section-head,
.home-sec-band .section-head,
.db-head { margin-bottom: var(--sp-5); }
.home-sec .section-head p,
.home-sec-band .section-head p { margin-top: var(--sp-3); }
.home-sec .grid-3, .home-sec .grid-4, .home-sec-band .grid-3, .home-sec-band .grid-4 { gap: var(--sp-4); }

/* 数字一律等宽：位数不同的两行数字（88 与 100、¥980 与 ¥1,200）上下才对齐 */
.home-hero .hero-facts .f b,
.home-hero .qr b,
.home-hero .qq-foot .big { font-variant-numeric: tabular-nums; }
.home-hero .hero-facts .f b { line-height: 1.15; }
.home-hero .hero-actions { margin-top: var(--sp-5); gap: var(--sp-3); }
.home-hero .hero-facts { margin-top: var(--sp-6); gap: var(--sp-6); }
.home-hero .hero-facts .f span { display: block; margin-top: var(--sp-1); }
.home-hero p.lead { margin-top: var(--sp-4); }

/* 示例结论卡：标签左、数值右，两边都以基线对齐 —— 数字换行时也不会高低错位 */
.quote-card .qr { align-items: baseline; gap: var(--sp-3); }
.quote-card .qr span:first-child { min-width: 0; }
.quote-card .qr b { flex: 0 0 auto; }
.quote-card .bar { margin-top: var(--sp-2); }
/* 竞争强度条：暖色到危险色，取令牌而不是写死两个十六进制 */
.quote-card .bar i.is-warm { background: linear-gradient(90deg, var(--warn), var(--danger)); }
.quote-card .qc-note-label { font-size: var(--fs-xs); }
.quote-card .qc-note {
    font-size: var(--fs-xs);
    line-height: var(--lh-loose);
    text-align: right;
}
.quote-card .qq-foot { margin-top: var(--sp-4); padding-top: var(--sp-3); gap: var(--sp-3); }
.quote-card .quote-rows { margin-top: var(--sp-4); gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   2. 数据看板：KPI
   -------------------------------------------------------------------------- */
.db-section { padding-top: 0; }
.db-kpis { gap: var(--sp-4); grid-auto-rows: 1fr; }
.db-kpi { padding: var(--sp-4); display: flex; flex-direction: column; border-radius: var(--radius); }
/* 标签只占一行：一旦某个标签折成两行，同一排卡片的数字就整排下移，看着像没对齐 */
.db-kpi-label {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: var(--fs-xs);
}
.db-kpi-num {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1);
    margin-top: var(--sp-2); line-height: 1.12;
    font-size: var(--fs-num); font-variant-numeric: tabular-nums;
}
/* 单位跟数字同基线：数字降级到 --fs-xl（.num-long）时单位也不会掉下去 */
.db-kpi-num small { margin-left: 0; font-size: var(--fs-xs); line-height: inherit; }
.db-kpi-note {
    margin-top: var(--sp-2); font-size: var(--fs-xs); line-height: 1.5;
    /* 两行封顶：六张卡等高，注释长的那几张不会把整排顶歪；
       3em = 两行文字（行高 1.5），短注释也占满两行位置 */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 3em;
}

/* --------------------------------------------------------------------------
   3. 数据看板：卡片骨架
   -------------------------------------------------------------------------- */
.db-grid { gap: var(--sp-4); margin-top: var(--sp-4); }
.db-card { padding: var(--sp-4) var(--sp-5); }
.db-card-head { margin-bottom: var(--sp-4); gap: var(--sp-4); }
.db-card-head h3 { font-size: var(--fs-base); }
.db-card-head span { font-size: var(--fs-xs); white-space: nowrap; }
.db-figure-note { margin-top: var(--sp-3); font-size: var(--fs-xs); }
.db-source { margin-top: var(--sp-4); padding-top: var(--sp-3); font-size: var(--fs-xs); }

/* 展开 / 收起：块内元素，点击区 44px，移动端同样够点 */
.db-more { margin-top: var(--sp-4); }
.db-more-btn {
    display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
    width: 100%; min-height: 44px; padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--panel-2); color: var(--text-2);
    font-size: var(--fs-sm); line-height: 1.4; cursor: pointer;
    transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.db-more-btn:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--text); }
.db-more-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.db-more-btn::after {
    content: ''; width: 8px; height: 8px; flex: none;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .16s ease;
}
.db-more-btn[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }

/* --------------------------------------------------------------------------
   4. 商圈在营排序
   -------------------------------------------------------------------------- */
.db-rank {
    --db-no: var(--sp-5);
    --db-tier: 100px;
    --db-rent: 96px;
    --db-crowd: 56px;
    --db-heat: 104px;
    --db-gap: var(--sp-3);
    display: grid; gap: 0;
}
.db-rank-head,
.db-rank-row {
    display: grid;
    grid-template-columns:
        var(--db-no) minmax(0, 1fr) var(--db-tier) var(--db-rent) var(--db-crowd) var(--db-heat);
    align-items: center;
    gap: var(--db-gap);
}
.db-rank-head { padding-bottom: var(--sp-2); font-size: var(--fs-xs); }
.db-rank-row { padding: var(--sp-2) 0; }
.db-rank-no,
.db-rank-rent,
.db-rank-crowd,
.db-rank-heat b { font-variant-numeric: tabular-nums; }
.db-rank-no { font-size: var(--fs-xs); }

/* 名称 + 城市：左列同一行、基线对齐。
   b 必须带 min-width:0 —— flex 子项默认 min-width:auto，不写这行它会按内容宽度
   撑住不缩，text-overflow 永远不生效，城市就被顶出列外压到「层级」上。 */
.db-rank-name { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.db-rank-name b {
    flex: 0 1 auto; min-width: 0;
    font-size: var(--fs-sm); font-weight: 500; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.db-rank-name small {
    flex: 0 0 auto; font-size: var(--fs-xs); color: var(--muted);
    white-space: nowrap;
}
/* 桌面端「层级 / 租金 / 客群」三列交给外层 grid：display:contents 让三个子项
   直接占第 3~5 列，表头与数据行的列宽因此共用同一组 --db-* 变量 */
.db-rank-meta { display: contents; }
.db-rank-tier {
    justify-self: start; padding: 0 var(--sp-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-soft);
    font-size: var(--fs-xs); line-height: 1.6; color: var(--muted);
    /* 16px 字号下「核心商圈」= 64px + 内边距 16 + 描边 2 = 82px，
       列宽给到 100px 才不会再从中间折成两行 */
    white-space: nowrap;
}
.db-rank-rent, .db-rank-crowd { font-size: var(--fs-xs); text-align: right; }
.db-rank-heat { display: grid; gap: var(--sp-1); }
.db-rank-heat b { font-size: var(--fs-xs); font-weight: 600; text-align: right; }

/* --------------------------------------------------------------------------
   5. 客群指数
   -------------------------------------------------------------------------- */
.db-heat { gap: var(--sp-2); padding-top: 0; }
.db-heat-row {
    display: grid;
    grid-template-columns: var(--sp-5) minmax(0, 1fr) minmax(0, 1.4fr) 64px;
    align-items: center; gap: var(--sp-3);
    padding: var(--sp-1) 0;
}
.db-heat-rank { font-size: var(--fs-xs); }
.db-heat-name { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.db-heat-name b {
    flex: 0 1 auto; min-width: 0;
    font-size: var(--fs-sm); font-weight: 500; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.db-heat-name small {
    flex: 0 0 auto; font-size: var(--fs-xs); color: var(--muted);
    white-space: nowrap;
}
.db-heat-score { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   6. 品类结构
   -------------------------------------------------------------------------- */
.db-cats-1 .db-cat {
    grid-template-columns: 96px minmax(0, 1fr) 48px 64px;
    gap: var(--sp-3); padding: var(--sp-2) 0;
}
.db-cat-name {
    font-size: var(--fs-xs); color: var(--text-2);
    /* 名称列固定 96px，写死 nowrap 防止「休闲娱乐」这类四字名被折成 2+2 */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.db-cat b, .db-cat em { font-variant-numeric: tabular-nums; }
.db-cat b { font-size: var(--fs-xs); }
.db-cat em { font-size: var(--fs-xs); }

/* --------------------------------------------------------------------------
   7. 城市分布 / 层级结构（顺手统一数字列与行距）
   -------------------------------------------------------------------------- */
.db-city { gap: var(--sp-2); padding: 0; }
.db-city-row { grid-template-columns: var(--sp-5) 88px minmax(0, 1fr) 48px; gap: var(--sp-3); padding: var(--sp-1) 0; }
.db-city-rank, .db-city-n { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.db-city-name { font-size: var(--fs-xs); }
.db-mini-legend { margin-top: var(--sp-3); gap: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }
.db-legend-item { font-size: var(--fs-xs); gap: var(--sp-2); }
.db-legend-item b, .db-legend-item em { font-variant-numeric: tabular-nums; }
.db-tierstat-head, .db-tierstat-row { gap: var(--sp-3); }
.db-tierstat-row { padding: var(--sp-1) 0; }
.db-tierstat-head, .db-tierstat-name, .db-tierstat-row b { font-size: var(--fs-xs); }
.db-tierfill { gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-3); }
.db-donut-wrap { gap: var(--sp-5); }

/* --------------------------------------------------------------------------
   8. 底部 CTA 卡
   -------------------------------------------------------------------------- */
.home-cta-card {
    padding: var(--sp-6) var(--sp-5);
    text-align: center;
    background: linear-gradient(120deg, var(--panel-2), var(--panel));
    border-color: var(--line);
}
.home-cta-card h2 { font-size: var(--fs-lg); font-weight: 700; line-height: var(--lh-tight); }
.home-cta-em { color: var(--brand-2); font-variant-numeric: tabular-nums; }
.home-cta-sub { margin-top: var(--sp-3); font-size: var(--fs-sm); }
.home-cta-num { color: var(--text); font-variant-numeric: tabular-nums; }
.home-cta-acts { margin-top: var(--sp-5); display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   9. 覆盖城市卡 / 资讯卡（原来的内联字号全部收进这里）
   -------------------------------------------------------------------------- */
.home-area-card { padding: var(--sp-4); }
.home-area-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.home-area-name { font-size: var(--fs-base); font-weight: 600; }
.home-area-meta { margin-top: var(--sp-2); font-size: var(--fs-xs); }
.home-center-cta { margin-top: var(--sp-5); text-align: center; }
.home-more-link { font-size: var(--fs-xs); }
.home-art-cat {
    font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted);
}
.home-art-title { margin-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   10. 测算工具入口（首页常驻展示位）
   -------------------------------------------------------------------------- */
.home-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.home-tool {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-4); min-height: 44px;
    background: var(--panel); border: 1px solid var(--line-soft);
    border-radius: var(--radius); color: var(--text);
    transition: border-color .16s ease, transform .16s ease;
}
.home-tool:hover { border-color: var(--brand); transform: translateY(-2px); }
.home-tool:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.home-tool-ico {
    display: grid; place-items: center; flex: none;
    width: var(--sp-6); height: var(--sp-6); border-radius: var(--radius-sm);
    background: var(--brand-soft); color: var(--brand);
}
.home-tool-name { display: block; font-size: var(--fs-sm); font-weight: 600; }
.home-tool-txt { min-width: 0; }
.home-tool-desc { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }

/* --------------------------------------------------------------------------
   11. 移动端「测算」工具选择弹层
   -------------------------------------------------------------------------- */
.m-tool-mask {
    position: fixed; left: 0; top: 0; right: 0; bottom: 0;
    z-index: 60;
    /* 纯黑 + 透明度：两个主题下都是「压暗」而不是「换色」，不需要跟随主题令牌 */
    background: rgba(0, 0, 0, .52);
}
.m-tool-sheet {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    z-index: 70;
    width: min(600px, calc(100% - var(--sp-5) * 2));
    max-height: calc(100vh - var(--sp-6) * 2);
    overflow-y: auto;
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
    background: var(--panel); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow);
    animation: mToolIn .18s ease both;
}
.m-tool-mask[hidden], .m-tool-sheet[hidden] { display: none; }
.m-tool-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.m-tool-head h3 { font-size: var(--fs-md); font-weight: 600; }
.m-tool-x {
    display: grid; place-items: center; flex: none;
    width: 44px; height: 44px; margin-right: calc(var(--sp-2) * -1);
    border: 0; border-radius: var(--radius-sm); background: transparent;
    color: var(--muted); cursor: pointer;
}
.m-tool-x:hover { background: var(--brand-soft); color: var(--text); }
.m-tool-x:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.m-tool-sub { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); }
.m-tool-list { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.m-tool-item {
    display: flex; align-items: center; gap: var(--sp-3);
    min-height: 44px; padding: var(--sp-3);
    border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
    background: var(--panel-2); color: var(--text);
    transition: border-color .16s ease, background-color .16s ease;
}
.m-tool-item:hover { border-color: var(--brand); background: var(--brand-soft); }
.m-tool-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.m-tool-txt { min-width: 0; }
.m-tool-txt b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.m-tool-txt small { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.m-tool-arrow { margin-left: auto; flex: none; color: var(--muted); }

@keyframes mToolIn {
    from { opacity: 0; transform: translate(-50%, calc(-50% + var(--sp-2))); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* --------------------------------------------------------------------------
   12. 移动端
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
    .home-hero { padding: var(--sp-6) 0 var(--sp-5); }
    .home-flush { margin-bottom: var(--sp-6); }
    .home-sec { padding: 0 0 var(--sp-6); }
    .home-sec-tight { padding-bottom: 0; }
    .home-sec-band { padding: var(--sp-6) 0; }
    .home-sec .section-head,
    .home-sec-band .section-head,
    .db-head { margin-bottom: var(--sp-4); }

    .db-kpis { gap: var(--sp-3); }
    .db-kpi { padding: var(--sp-3); }
    .db-kpi-num { font-size: var(--fs-xl); }
    .db-kpi-note { min-height: 0; }
    .db-grid { gap: var(--sp-3); margin-top: var(--sp-3); }
    .db-card { padding: var(--sp-3) var(--sp-4); }

    /* 商圈排序：手机上改两行 —— 第一行「名次 · 商圈 + 城市 · 热度」，
       第二行「层级 · 租金 · 客群」横跨名称与热度两列。
       原来 6 个单元格挤在 3 列里，租金会被塞进名次那一格，窄到只能折行。 */
    .db-rank-head { display: none; }
    .db-rank-row {
        grid-template-columns: var(--sp-5) minmax(0, 1fr) var(--sp-8);
        grid-template-rows: auto auto;
        align-items: baseline;
        gap: var(--sp-1) var(--sp-3);
        padding: var(--sp-2) 0;
    }
    .db-rank-no { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
    .db-rank-name { grid-column: 2; grid-row: 1; }
    .db-rank-meta {
        display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2);
        /* 横跨名称 + 热度两列：一行装得下「核心商圈 ¥860 94」，不用折第三次 */
        grid-column: 2 / span 2; grid-row: 2;
    }
    .db-rank-heat { grid-column: 3; grid-row: 1; align-self: start; width: 100%; }

    /* 客群指数：把条形压到第二行整行，名称不再被 118px 定宽截断 */
    .db-heat-row {
        grid-template-columns: var(--sp-5) minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        gap: var(--sp-1) var(--sp-3);
    }
    .db-heat-rank { grid-column: 1; grid-row: 1; }
    .db-heat-name { grid-column: 2; grid-row: 1; }
    .db-heat-score { grid-column: 3; grid-row: 1; }
    .db-heat-track { grid-column: 2 / span 2; grid-row: 2; }

    /* 品类结构：名称列让出一档宽度，四字业态名不再折行 */
    .db-cats-1 .db-cat { grid-template-columns: 80px minmax(0, 1fr) 40px 56px; gap: var(--sp-2); }

    .db-city-row { grid-template-columns: var(--sp-5) 72px minmax(0, 1fr) 40px; gap: var(--sp-2); }

    .home-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
    .home-tool { padding: var(--sp-3); }

    .home-cta-card { padding: var(--sp-5) var(--sp-4); }

    /* 弹层贴底，底部让出 tabbar（56px + 安全区），不会被底部导航压住 */
    .m-tool-sheet {
        left: 0; right: 0; top: auto; transform: none;
        bottom: calc(var(--m-tab-h, 56px) + var(--m-safe-b, env(safe-area-inset-bottom, 0px)));
        width: 100%; max-width: none;
        max-height: calc(100vh - var(--m-tab-h, 56px) - var(--m-safe-b, 0px) - var(--sp-6));
        padding: var(--sp-3) var(--sp-4) var(--sp-4);
        border-radius: var(--radius) var(--radius) 0 0;
        border-bottom: 0;
        animation: mSheetIn .2s ease both;
    }
    .m-tool-item { padding: var(--sp-3); }
}

@media (max-width: 560px) {
    .home-tools { grid-template-columns: minmax(0, 1fr); }
}

@keyframes mSheetIn {
    from { opacity: 0; transform: translateY(var(--sp-6)); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 展开项靠服务端 hidden 隐藏：这些元素自带 display:grid，UA 的 [hidden] 规则
   优先级低于类选择器，必须显式写一条，否则点击「收起」不会真的收起来 */
.db-rank-row[hidden],
.db-heat-row[hidden],
.db-cat[hidden] { display: none !important; }

/* ==========================================================================
   v2.5.0 · 首页底部「微信小程序」区块
   ========================================================================== */
.home-mp-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
    padding: 30px 32px;
}
.home-mp-txt h2 {
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 700;
    letter-spacing: -.4px;
    margin: 8px 0 10px;
    color: var(--text);
}
.home-mp-txt p { font-size: 14px; line-height: 1.85; margin: 0 0 14px; max-width: 520px; }
.home-mp-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    gap: 7px;
}
.home-mp-list li {
    position: relative;
    padding-left: 20px;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.7;
}
.home-mp-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
}
.home-mp-qr { justify-self: end; }
.home-mp-qr .mpqr-card { margin-top: 0; }

@media (max-width: 860px) {
    .home-mp-card { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 22px 20px; }
    .home-mp-qr { justify-self: start; }
}