/* ============================================================
 * v1220b · 首页视觉主线补丁（老板锚点：首屏第一眼 = 精选赚钱股票）
 *
 * 依据（Playwright 实测，prod/agent × desktop/mobile 四端稳态完全一致）：
 *   · 首页默认视图 = daily-picks（不是 dashboard）
 *   · hero 内 #lx-dh-picks 精选槽恒为空（数据源依赖 dashboard 涨幅榜 DOM，
 *     抓不到行 → 只写一句 hint）
 *   · 桌面 .lhp「今日 AI 精选」5 卡 y=901 > vh 900 → 首屏完全看不到
 *   · 移动 hero h=525 / vh=844 = 62% 首屏，.dpv-top1 y=690 仅露 154px
 *
 * v1220 首发的教训（务必记住）：
 *   ❌ #lx-dh-picks 选择器特异性只有 (1,0,0)，被 css/lx-polish.css:215
 *      `#lx-daily-hero .lx-dh-picks{display:none!important}` (1,1,0) 压死
 *      → 内容填进去了却整块不可见（h=0 / display:none）。
 *   本版所有规则统一前缀 `html body #lx-daily-hero` = (2,1,2)，稳定胜出。
 *
 * 本补丁只做四件事，不改 DOM 结构、不改既有 JS 逻辑、不新增业务请求：
 *   ① hero 精选槽排布（内容由 js/lx-hero-picks-v1220.js 填真实 daily-picks）
 *   ② 高度预算重算：预算 >= 填充后内容高度 → 异步注入不再产生 layout-shift
 *   ③ 移动端 hero 瘦身（去掉与顶部 ticker 重复的指数条、次要徽章、冗余按钮）
 *   ④ 移动端 11px → 12px（可访问性下限）
 * 未填充数据时 :empty 自动隐藏，不留空洞。
 * ============================================================ */

/* ── ① hero 精选槽 ───────────────────────────────────────── */
/* v1223：占位常驻 + 未拿到数据前只隐藏不塌陷
   ⚠ 问题：body 是 `display:flex; flex-direction:row`（横向 + wrap），picks 一旦有内容
   就会改变横向占宽 → 实测 .lx-ask 从 y=219 跳到 178、indices 从 361 跳到 281 →
   单次 layout-shift 0.0164，是 CLS 的主要来源（prod/agent 桌面都是它）。
   修：picks 无论有无数据都占据同样高度（visibility 隐藏而非 display:none），
   上方元素位置在填充前后完全一致 → 该 shift 归零。 */
html body #lx-daily-hero #lx-dh-picks {
  display: block !important;          /* 覆盖 lx-polish.css:215 / lx-hero-v2.css:156 的 display:none */
  min-height: 189px !important;       /* 桌面稳态实测 189（label 27 + 5×31 + margin） */
  width: 100% !important;
  flex: 0 0 100% !important;          /* 横向 flex 中独占一整行，避免挤压上方元素 */
  max-width: none !important;
  margin: 10px 0 0 !important;
  text-align: left !important;
}
html body #lx-daily-hero #lx-dh-picks.lx-hp-pending { visibility: hidden !important; }
html body #lx-daily-hero #lx-dh-picks .lx-hp-label {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .4px !important;
  color: #ffce85 !important;
  margin-bottom: 6px !important;
}
/* v1220d：hint 11px 会触发「字号 <12px」可访问性告警（v1220c 实测残留 6 处全来自本块）→ 统一 12px */
html body #lx-daily-hero #lx-dh-picks .lx-hp-hint {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #8093b6 !important;
  opacity: .85 !important;
}
html body #lx-daily-hero #lx-dh-picks .lx-hp-row {
  display: grid !important;
  /* v1222：新增第 2 列 = 采纳按钮（20px）。只改列宽不改行高 → hero 高度预算不变、零 CLS */
  grid-template-columns: 16px 20px minmax(0, 1.5fr) 60px 62px 82px 82px;
  align-items: center !important;
  gap: 8px !important;
  padding: 3px 8px !important;        /* v1220d：5→3，5 行共省 20px */
  border-radius: 8px !important;
  border: 1px solid rgba(255, 206, 133, .16) !important;
  background: rgba(255, 255, 255, .035) !important;
  margin-bottom: 2px !important;     /* v1220d：4→2，5 行共省 10px */
  cursor: pointer !important;
  transition: background .15s ease, border-color .15s ease !important;
}
html body #lx-daily-hero #lx-dh-picks .lx-hp-row:hover,
html body #lx-daily-hero #lx-dh-picks .lx-hp-row:focus-visible {
  background: rgba(255, 206, 133, .10) !important;
  border-color: rgba(255, 206, 133, .34) !important;
  outline: none !important;
}
html body #lx-daily-hero #lx-dh-picks .lx-hp-rank {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #8093b6 !important;
  text-align: center !important;
}
html body #lx-daily-hero #lx-dh-picks .lx-hp-rank.r1 {
  color: #ffce85 !important;
  font-size: 13px !important;
}
html body #lx-daily-hero #lx-dh-picks .lx-hp-name {
  font-size: 14px !important;
  font-weight: 660 !important;
  color: #f4f8ff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* v1222 · 采纳按钮（自主学习信号）：18×18，小于行内容高度 → 不撑高行 */
html body #lx-daily-hero #lx-dh-picks .lx-hp-adopt {
  width: 18px !important; height: 18px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 0 !important; margin: 0 !important;
  font-size: 12px !important; line-height: 1 !important;
  color: #8093b6 !important;
  background: transparent !important;
  border-radius: 5px !important;
  border: none !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10) !important;
  cursor: pointer !important;
  transition: color .15s ease, box-shadow .15s ease, background .15s ease !important;
}
html body #lx-daily-hero #lx-dh-picks .lx-hp-adopt:hover {
  color: #ffce85 !important;
  box-shadow: 0 0 0 1px rgba(255, 206, 133, .45) !important;
  background: rgba(255, 206, 133, .10) !important;
}
html body #lx-daily-hero #lx-dh-picks .lx-hp-adopt.on {
  color: #0f1420 !important;
  background: #ffce85 !important;
  box-shadow: 0 0 0 1px #ffce85 !important;
}
/* 采纳过的整行加暖色底，一眼看出「我选过」 */
html body #lx-daily-hero #lx-dh-picks .lx-hp-row.adopted {
  background: rgba(255, 206, 133, .07) !important;
  border-color: rgba(255, 206, 133, .28) !important;
}

/* v1220d：股票代码 11px → 12px（可访问性下限） */
html body #lx-daily-hero #lx-dh-picks .lx-hp-name i {
  font-style: normal !important;
  font-size: 12px !important;
  color: #8093b6 !important;
  margin-left: 6px !important;
  font-weight: 400 !important;
}
html body #lx-daily-hero #lx-dh-picks .lx-hp-price,
html body #lx-daily-hero #lx-dh-picks .lx-hp-chg,
html body #lx-daily-hero #lx-dh-picks .lx-hp-tgt,
html body #lx-daily-hero #lx-dh-picks .lx-hp-sl {
  font-family: var(--font-mono, ui-monospace, monospace) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 13px !important;
  text-align: right !important;
  white-space: nowrap !important;
}
html body #lx-daily-hero #lx-dh-picks .lx-hp-price { color: #e8edf5 !important; font-weight: 600 !important; }
/* 涨跌配色遵循 A 股习惯：涨=红，跌=绿 */
html body #lx-daily-hero #lx-dh-picks .lx-hp-chg.up   { color: #ff5b60 !important; font-weight: 700 !important; }
html body #lx-daily-hero #lx-dh-picks .lx-hp-chg.down { color: #34c08a !important; font-weight: 700 !important; }
html body #lx-daily-hero #lx-dh-picks .lx-hp-chg.flat { color: #a8b2c4 !important; font-weight: 700 !important; }
html body #lx-daily-hero #lx-dh-picks .lx-hp-tgt { color: #ffb35c !important; font-size: 12px !important; }
html body #lx-daily-hero #lx-dh-picks .lx-hp-sl  { color: #8fa0bd !important; font-size: 12px !important; }

/* ── ② 高度预算重算（关键：预算必须 >= 「picks 填充之后」的内容高度）──
   ⚠ 三次踩坑的教训（务必记住）：
     v1220  按「填充前」算 337 → 预算 340 不足 → 实测 CLS 0.3473（严重劣化）
     v1220b 预算 340 仍不足（真实内容 471）→ CLS 0.0745
     v1220c 预算 410 仍不足（真实内容 471）→ CLS 0.0745，body 撑到 471
   正确做法：先注入 `min-height:0` 实测「填充后」的真实内容高度，再定预算。
   实测（v1220c，picks 已填充）：桌面 body 471 / 移动 275。
   v1220d 再压：桌面隐藏 evo-row(-44) + 行高 padding5→3/margin4→2(-30) → 471-74 ≈ 397
                → 预算 403（留 6px 余量）。
                移动行高同步压缩(-9) → 275-9 = 266 → 预算 272。 */
html body #lx-daily-hero .lx-dh-body { min-height: 403px !important; }
/* 桌面也隐藏进化徽章：hero 高度是首屏稀缺资源，精选优先（移动端 v1220 已隐藏） */
html body #lx-daily-hero .lx-evo-row { display: none !important; }

/* ── ③ 移动端 hero 瘦身 ───────────────────────────────────── */
@media (max-width: 767px) {
  html body #lx-daily-hero .lx-dh-body  { min-height: 272px !important; }
  html body #lx-daily-hero .lx-dh-inner { min-height: 352px !important; }
  /* 顶部 ticker 已实时滚动 5 大指数 → hero 内指数条重复，去掉 */
  html body #lx-daily-hero .lx-dh-indices { display: none !important; }
  /* 进化徽章属次要信息，移动端让位给精选 */
  html body #lx-daily-hero .lx-evo-row    { display: none !important; }
  /* 精选已进 hero，「看今日精选 →」按钮冗余 */
  html body #lx-daily-hero .lhr-cta-row   { display: none !important; }
  html body #lx-daily-hero #lx-dh-picks { min-height: 127px !important; }  /* 移动稳态实测 127 */
  html body #lx-daily-hero #lx-dh-picks .lx-hp-row {
    /* v1222：第 2 列 = 采纳按钮 */
    grid-template-columns: 14px 20px minmax(0, 1fr) 52px 54px;
    gap: 6px !important;
    padding: 4px 6px !important;
    margin-bottom: 3px !important;
  }
  /* 移动端只显示 名称/现价/涨跌（目标止损换行会吃掉首屏，交给 Top1 卡片承载） */
  html body #lx-daily-hero #lx-dh-picks .lx-hp-tgt,
  html body #lx-daily-hero #lx-dh-picks .lx-hp-sl { display: none !important; }
  html body #lx-daily-hero #lx-dh-picks .lx-hp-name { font-size: 13px !important; }
  html body #lx-daily-hero #lx-dh-picks .lx-hp-price,
  html body #lx-daily-hero #lx-dh-picks .lx-hp-chg { font-size: 12px !important; }
  html body #lx-daily-hero #lx-dh-picks .lx-hp-label { font-size: 12px !important; margin-bottom: 4px !important; }
  html body #lx-daily-hero #lx-dh-picks .lx-hp-hint { display: none !important; }
}

/* ── ④ 移动端可访问性：11px → 12px ──────────────────────────
   实测：prod/agent 移动端各有 6 处 fs=11（Cookie 与隐私 /《隐私政策》/
   《用户协议》/《风险揭示书》/ 继续使用即同意 / 同意），全部落在
   #lx-cookie-banner（css/cookie-banner.css:96-108 @media max-width:768px）。
   特异性：原规则 #lx-cookie-banner = (1,0,0)；本块 html body #lx-cookie-banner
   = (1,0,2) 且带 !important → 稳定胜出。 */
@media (max-width: 768px) {
  html body #lx-cookie-banner,
  html body #lx-cookie-banner label,
  html body #lx-cookie-banner label > span,
  html body #lx-cookie-banner a,
  html body #lx-cookie-banner button {
    font-size: 12px !important;
  }
}

/* ── v1225 指数条宽度预算 ───────────────────────────────────────────
   实测：#lx-dh-indices 异步拿到数据前 width=0（空容器在 flex 行里塌缩），
   拿到后 600px 在 .lx-dh-body 里换行 → 把 #lx-dh-picks 顶下 17px、
   #lx-ask 顶上 11px（桌面 CLS 单次贡献可达 0.0244）。
   修法：不改视觉，只让它从首帧就独占一行，占位即稳态。
   ────────────────────────────────────────────────────────────────── */
html body #lx-daily-hero .lx-dh-indices {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-height: 28px !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   v1240 · 移动端采纳按钮热区扩大（零布局影响）
   --------------------------------------------------------------------------
   实测（真实设备模拟 is_mobile + dpr=3）：.lx-hp-adopt 仅 18x18 = 324px²，
   远低于移动端 44x44 触摸标准，难以点中。
   方案 A（按钮改 32x32）实测会把 picks 从 127 撑到 158(+31px) 而 hero 高度不变
   → 首屏内部被挤压 → 否决。
   方案 B（伪元素热区 44x31，纵向取行高不越界以免误触相邻行）：
     几何零变化（picks 127 / hero 490 / row 31 均不变）、CLS 零增量、
     命中测试 dx14 由「未命中」变为「命中 SELF」。热区 324px² -> 1364px²（4.2 倍）。
   ========================================================================== */
@media (max-width: 768px) {
  html body #lx-daily-hero #lx-dh-picks .lx-hp-adopt { position: relative !important; }
  html body #lx-daily-hero #lx-dh-picks .lx-hp-adopt::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 44px !important;
    height: 31px !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* ==========================================================================
   v1241 · 移动端价格 chip 热区扩大（零布局影响）
   --------------------------------------------------------------------------
   实测（真实设备模拟 is_mobile + dpr=3）：.lx-fnl-price 仅 207x32 = 6624px²，
   高 32 < 移动端 44 触摸标准。该 chip 是 v1236 送进首屏的付费漏斗第一步，点不中即漏斗漏。
   沿用 v1240 的伪元素模式（改尺寸会撑布局，伪元素零布局影响）：
     宽 100% x 高 44（纵向取满标准 —— chip 在 hero 内底部，下方无相邻同类交互行，
     与 v1240 采纳按钮「取行高 31 避免误触相邻行」的场景不同，此处无需保守）。
   实测：几何零变化（chip 207x32 / hero 490 / picks 127 / avatar 96 均不变）、
         CLS 零增量、命中测试 dy18 由「未命中」变为「命中 SELF」。
         热区 6624px² -> 9108px²。
   ========================================================================== */
@media (max-width: 768px) {
  html body .lx-fnl-price { position: relative !important; }
  html body .lx-fnl-price::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 100% !important;
    height: 44px !important;
    transform: translate(-50%, -50%) !important;
  }
}