/* ==========================================================================
   选址参谋 · 移动端报告市场（m-market.css）
   --------------------------------------------------------------------------
   服务 /market（列表）、/market/{no}（详情）、/author/{id}（作者主页）。
   全部作用域 body.m-app —— PC 端的 market.css 一行没改。

   market.css 自己的断点是 960 / 640 两个，加上 mobile.css 的 820，
   三套断点会互相打架（820~960 之间既不算窄屏也不算宽屏）。
   本文件不写媒体查询，只看 body.m-app：移动端排版由服务端分流决定，
   与视口宽度无关，手机横屏 932px 时依然成立。
   ========================================================================== */

/* ==========================================================================
   1. 列表页
   ========================================================================== */
body.m-app .mk-page { padding: 6px 0 8px; }

/* 页头：标题 + 两个统计格。
   桌面是「左标题 / 右两个大格」，手机上统计格会独占一行且各占一半 —— 
   这里直接把统计格压矮，避免它吃掉首屏 90px。 */
body.m-app .mk-head {
    gap: 10px;
    padding: 2px 0 14px;
    align-items: flex-start;
}
body.m-app .mk-head h1 { font-size: var(--m-fs-lg); letter-spacing: 0; }
body.m-app .mk-head p { margin-top: 6px; font-size: var(--m-fs-xs); line-height: 1.7; }
body.m-app .mk-head-side { width: 100%; gap: 8px; }
body.m-app .mk-stat {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 10px;
    border-radius: var(--m-r-sm);
}
body.m-app .mk-stat b {
    font-family: inherit;
    font-size: var(--m-fs-num-sm);
    font-variant-numeric: tabular-nums;
}
body.m-app .mk-stat span { font-size: 11px; }

/* 工具条：搜索一行铺满，排序胶囊横滑，筛选条件单独一行 */
body.m-app .mk-toolbar {
    gap: 10px;
    margin: 12px 0 2px;
    align-items: stretch;
}
body.m-app .mk-search {
    flex: 1 1 100%;
    max-width: none;
    gap: 6px;
}
body.m-app .mk-search .input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 42px;
    font-size: 16px; /* iOS 聚焦不放大整页 */
}
body.m-app .mk-search .btn { flex: 0 0 auto; min-height: 42px; padding: 0 14px; }

/* 排序 Tab：横滑而不是换行。
   换行会把 4 个胶囊摊成两行，把第一张卡片推到 480px 以下。 */
body.m-app .mk-tabs {
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0 calc(-1 * var(--m-pad));
    padding: 0 var(--m-pad) 2px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
body.m-app .mk-tabs::-webkit-scrollbar { display: none; }
body.m-app .mk-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    font-size: var(--m-fs-sm);
}

/* 已选筛选条件：每个胶囊本身就是一个「点掉」的按钮，热区按 34px 给 */
body.m-app .mk-filters { gap: 6px; margin-top: 8px; }
body.m-app .mk-chip {
    height: 30px;
    padding: 0 10px;
    font-size: var(--m-fs-xs);
}
body.m-app .mk-chip a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: -4px;
    color: var(--muted);
}

/* 卡片网格：单列。
   market.css 用的是 minmax(296px, 1fr)：320px 屏减去 32px 内边距只剩 288px，
   296 的下限会让整页横向溢出 —— 这是真机上最典型的「页面能左右晃」。 */
body.m-app .mk-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 12px;
}
body.m-app .mk-card {
    padding: 13px;
    gap: 9px;
    border-radius: var(--m-r);
}
body.m-app .mk-card-title {
    font-size: var(--m-fs);
    font-weight: 500;
    line-height: 1.45;
    /* 两行截断：报告标题动辄 30 个字，放开会把一张卡撑到 260px */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.m-app .mk-card-metrics { gap: 6px; }
body.m-app .mk-card-stats { font-size: var(--m-fs-xs); }
body.m-app .mk-card-foot { gap: 6px; }
body.m-app .mk-card-foot .btn {
    flex: 1 1 calc(50% - 3px);
    min-height: 40px;
    font-size: var(--m-fs-sm);
}
/* 卡片里的作者行：整行可点，热区 44 */
body.m-app .mk-card-author { min-height: var(--m-hit); align-items: center; }

/* ==========================================================================
   2. 详情页
   --------------------------------------------------------------------------
   桌面是「左正文 / 右 300px 侧栏」。手机上侧栏里放的是价格与下载按钮 ——
   那是这一页唯一要用户做的动作，必须尽量靠前，所以：
     - .mk-dhead 竖排，价格盒紧跟标题（作者行在它之前，不能挪走，里面有关注按钮）
     - .mk-dlayout 单列，正文在前、侧栏内容在后
   ========================================================================== */
body.m-app .mk-dhead {
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: var(--m-r);
}
body.m-app .mk-dhead h1 { font-size: var(--m-fs-lg); line-height: 1.4; }
body.m-app .mk-dhead-main { flex: 1 1 auto; }
body.m-app .mk-dhead-side {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
}
body.m-app .mk-price-box {
    padding: 12px 14px;
    border-radius: var(--m-r-sm);
}
body.m-app .mk-price-num b { font-size: 28px; }
body.m-app .mk-price-box .btn { min-height: var(--m-hit); font-size: 16px; }
body.m-app .mk-buy-list { font-size: var(--m-fs-xs); line-height: 1.8; }

body.m-app .mk-actbar {
    gap: 7px;
    margin: 12px 0;
}
body.m-app .mk-act-btn {
    min-height: 40px;
    height: auto;
    padding: 0 14px;
    font-size: var(--m-fs-sm);
}
body.m-app .mk-act-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin-left: auto;
    font-size: var(--m-fs-sm);
}

body.m-app .mk-dlayout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
body.m-app .mk-dmain { gap: 12px; }
body.m-app .mk-summary { padding: 14px; border-radius: var(--m-r); }

/* 四格 KPI：桌面 4 列，手机上 2×2 —— 4 列时每格只剩 78px，
   「128.6 万」这种数字必然折行。 */
body.m-app .mk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* 详情正文里的表格：横滚，且必须同时声明 overflow-y: hidden，
   只写 x 时计算值会把 y 提升成 auto，iOS 上竖向手势会被容器吃掉。 */
body.m-app .mk-dside {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
body.m-app .mk-act-stat { font-size: var(--m-fs-xs); }

/* ==========================================================================
   3. 作者主页
   ========================================================================== */
body.m-app .mk-author-hero { padding: 14px; flex-direction: column; align-items: flex-start; gap: 12px; }
body.m-app .mk-author-acts { width: 100%; gap: 6px; }
body.m-app .mk-author-acts .btn { flex: 1 1 0; min-height: 40px; }
body.m-app .mk-author-stats { gap: 16px; font-size: var(--m-fs-xs); }

/* ==========================================================================
   v2.3.0 · 第 6 项：报告市场列表「一张卡占掉一屏」的压缩
   --------------------------------------------------------------------------
   实测（390×844）：一张卡 370px，一屏只能看到 1.3 张。逐块量下来是这样：
     标签行 22 + 标题 2 行 50 + 三列大数字 110（含上下两条分割线）
     + 点赞/收藏/下载 18 + 作者行 44（为了凑 44 触摸热区）
     + 两个整行大按钮 56 + 六处 9px 间隙 ≈ 370
   列表页的任务是「快速扫过、挑一份点进去」，三列 KPI 和两个大按钮属于详情页的信息量。

   压缩策略（功能一个不减，只改呈现密度）：
     · 三列大数字 → 一行「能级 90.7 · 机会 67.0 · 浏览 3」的小字，去掉下方分割线；
     · 标题从两行截断改为一行（详情页有全名）；
     · 作者行不再为了 44px 热区撑高，头像收到 20px；
     · 按钮 40 → 34，与其它次级按钮同高。
   压缩后单卡约 195px，一屏能扫到 3 张。
   ========================================================================== */
body.m-app .mk-card {
    padding: 11px 12px;
    gap: 7px;
}
body.m-app .mk-card-title {
    -webkit-line-clamp: 1;
    line-height: 1.35;
}

/* 价格标签：从「大号橙字」降为小徽标 */
body.m-app .mk-price-tag {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 999px;
}
body.m-app .mk-price-tag b { font-size: 12.5px; }

/* 三列大数字 → 单行小字。只在移动端合并，桌面端仍是三列大数字 */
body.m-app .mk-card-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
    padding: 6px 0 0;
    border-top: 1px solid var(--line-soft);
    border-bottom: 0;
}
body.m-app .mk-card-metrics > div {
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
}
body.m-app .mk-card-metrics span { font-size: 11px; }
body.m-app .mk-card-metrics b { font-size: 13px; }

/* 点赞/收藏/下载：与上面那行同字号，视觉上并成一条信息带 */
body.m-app .mk-card-stats {
    font-size: 11px;
    gap: 12px;
    margin-top: -2px;
}

/* 作者行：不再为 44px 热区撑高（作者名本身是可点链接，且整卡都能进详情） */
body.m-app .mk-card-author {
    min-height: 0;
    margin-top: 1px;
    gap: 6px;
}
body.m-app .mk-card-author .mk-av-sm,
body.m-app .mk-card-author img { width: 20px; height: 20px; }
body.m-app .mk-author-name { font-size: 12px; }
body.m-app .mk-card-date { font-size: 11px; }

/* 底部两个按钮：40 → 34，与全站次级按钮统一 */
body.m-app .mk-card-foot { gap: 8px; }
body.m-app .mk-card-foot .btn {
    min-height: 34px;
    font-size: 12.5px;
}

/* ---- v2.4.0 ① 卡片底部：作者与互动左右分栏 ----
   原来两块各占一整行（互动在上、作者在下），一屏能放下的卡片又少了一张。
   现在包进 .mk-card-social 做一行两栏：左作者（可压缩），右互动数字（不压缩）。 */
body.m-app .mk-card-social {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 3px;
    padding-top: 7px;
    border-top: 1px solid var(--line-soft);
}
body.m-app .mk-card-social .mk-card-author {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
    gap: 6px;
    justify-content: flex-start;
}
body.m-app .mk-card-social .mk-card-author .mk-author { min-width: 0; }
body.m-app .mk-card-social .mk-author-name {
    display: inline-block;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
body.m-app .mk-card-social .mk-card-stats {
    flex: none;
    margin-top: 0;
    gap: 8px;
    font-size: 10.5px;
    white-space: nowrap;
}
body.m-app .mk-card-social .mk-card-date { display: none; }