/* ============================================================
 * 连板梯队 · 紧凑网格（v2）
 *
 * 版本说明（三套样式都保留在服务器 /root/xeev-assets/）：
 *   ladder-compact.v1.css  原始：4 分组横排 4 列，组内卡片竖排，卡片 119px
 *   ladder-compact.v2.css  网格：分组竖向 + 组内 7 列网格，卡片 81px  ← 当前启用
 *   ladder-compact.v3.css  竖排：一只一行竖排，行高 28px
 *
 * 切换方法：
 *   cp /root/xeev-assets/ladder-compact.<版本>.css \
 *      /root/xeev-assets/ladder-compact.css
 *   xeev-postbuild
 *
 * 入口：index.html 引用的是 ladder-compact.css（不带版本号）
 *
 * 作用域：全部用 .ladder-board 前缀限定（该 class 只有本页有），
 * 其他页面零影响。不用 data-v-xxx 是因为那是构建期生成、重建会变。
 * ============================================================ */

/* ---------- 1. 分组竖向堆叠 ---------- */
.ladder-board {
  flex-direction: column !important;
  gap: 8px !important;
  align-items: stretch !important;
}

.ladder-board .level {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  padding: 8px 10px !important;
}

/* ---------- 2. 组内卡片：固定 6 列 ----------
 * 原来用 auto-fill + minmax(178px,1fr) 自适应，1700px 视口下算出 7 列。
 * 现在按用户要求固定 6 列 —— 列宽随视口变，张数稳定不变。
 * minmax(0, 1fr) 而不是 1fr：防止长公司名/长行业名把某一列撑宽导致列宽不均。
 */
.ladder-board .level-body {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 5px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* 分组标题更紧凑 */
.ladder-board .level-head {
  padding: 0 2px 6px !important;
  margin: 0 0 6px !important;
  font-size: 13px !important;
}

/* ---------- 3. 卡片瘦身 ---------- */
.ladder-board .card {
  padding: 4px 7px !important;
  /* 卡片在网格里高度一致，不因内容多少而参差 */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 0 !important;
}

/* 卡片内行距收紧（原来是 4/5/6px 的 inline style，需 !important 覆盖） */
.ladder-board .card > .between {
  margin-top: 0 !important;
  min-width: 0;
}

.ladder-board .card > .between + .between {
  margin-top: 2px !important;
}

/* 第一行（名称 + 市场标记 + 等级） */
.ladder-board .card .nm {
  font-size: 12.5px !important;
  line-height: 16px !important;
}

/* 第三行（龙一 / 价格 / 涨幅）原来是 16px 字号撑到 33px 高 */
.ladder-board .card > .between:nth-child(3) {
  font-size: 12px !important;
  line-height: 17px !important;
  white-space: nowrap;
  overflow: hidden;
}

/* 卡片内的小 chip 收紧 */
.ladder-board .card .chip {
  font-size: 10px !important;
  line-height: 14px !important;
  padding: 0 4px !important;
}

/* 市场标记 chip */
.ladder-board .card .chip-mk {
  padding: 0 2px !important;
  font-size: 9.5px !important;
  margin-left: 3px !important;
}

/* 第四行（共振 / 封单） */
.ladder-board .card > .between:nth-child(4) {
  font-size: 11px !important;
  line-height: 15px !important;
}

/* ---------- 3b. 现价/涨幅 竖排改横排 ----------
 * 原来 .rt 是 flex-direction:column，价格与涨幅各占一行，
 * 实测高 33px，是卡片压不下去的主因。横排后约 17px，省 16px。
 */
.ladder-board .card .rt {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 4px !important;
  white-space: nowrap;
  line-height: 16px !important;
}

.ladder-board .card .rt > span {
  display: inline-block !important;
  line-height: 16px !important;
  font-size: 12px !important;
  white-space: nowrap;
}

/* 等级徽标 22px → 18px */
.ladder-board .card .grade {
  padding: 0 5px !important;
  line-height: 16px !important;
  height: 18px !important;
  min-width: 18px;
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ---------- 4. 窄屏适配：列数逐级递减 ----------
 * 桌面上稳定 6 列（用户要求）。窄屏塞不下 6 列，按宽度降级，
 * 保证每张卡片仍有足够宽度显示「名称 + 等级 + 价格 + 封单」。
 */
@media (max-width: 1180px) {
  .ladder-board .level-body {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .ladder-board .level-body {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .ladder-board {
    gap: 6px !important;
  }
  .ladder-board .level-body {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  .ladder-board .level {
    padding: 6px 8px !important;
  }
  .ladder-board .card {
    padding: 4px 6px !important;
  }
}

@media (max-width: 560px) {
  .ladder-board .level-body {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}