/* ============================================================================
   pipeline-ui-mobile.css —— 前台工作台「手机版」适配
   建于 2026-08-31（BOSS：电脑端能用，手机端显示不行）

   为什么单独一个文件、而不是新开一个手机版页面：
     入口收敛铁律 —— 一件事只留一个入口。手机端和电脑端仍然是同一个地址
     （/client-workflow）、同一份 HTML、同一套 JS，只是窄屏下换一套版式。
     绝不做 m.xxx 这种第二个页/第二个口。

   为什么必须是【最后一个】样式表：
     页面基础样式写在 HTML 内联 <style> 里，后面还挂着 market-fullset /
     detail-sku / daynight / onboarding 四个 css。本文件在它们【之后】加载，
     同权重靠后来居上覆盖，不用一个 !important（除非上游本身写了 !important）。

   电脑端零影响：全文件只有 @media (max-width: 820px) 一个块，
   ≥821px 一条规则都不命中。

   ── 手机端原来到底哪儿坏了（375px 真机口径实测，不是目测）──────────────
     ① 整页根本滚不动：body{height:100vh;overflow:hidden} 是「一屏工作台」的
        桌面设定，手机上第一屏以下的东西永远够不着。
     ② 进门引导卡片实测 428px 宽 > 屏宽 375px：右半边连同「下一步」按钮被切掉，
        新客户在手机上【注册不了】。根因是 .ob-card 是 grid 子项、min-width:auto
        取 min-content，而里面的四步进度条 .ob-dots 一行 nowrap 撑到 388px。
     ③ 横向溢出 144px：流程条那一行（商品卡+档位+八站+手动自动+「?」）挤在
        一个不换行的 flex 行里。
     ④ 三栏虽然在 ≤1180px 已经塌成一列，但 .rail-body 定死 max-height:240px，
        三块被压在不滚动的一屏里，等于「什么都看得见一点点，什么都用不了」。
   ============================================================================ */

@media (max-width: 820px) {

  /* ── ① 让整页竖着滚起来 ───────────────────────────────────────────────
     桌面版靠 body 定高 + 内部各块自己滚（一屏不动）。手机屏太矮，这套必然把
     内容锁在看不见的地方。窄屏下改回「页面自己滚」这一种滚动，不做嵌套滚动
     ——嵌套滚动在触屏上是最容易让人以为「页面卡死」的东西。 */
  html { height: auto; }
  body {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;      /* 手机浏览器地址栏收起/展开时 100vh 会跳，dvh 才是真可视高 */
    overflow-x: hidden;       /* 兜底：任何漏网的宽元素也不许把整页拽出横滚 */
    overflow-y: auto;
    -webkit-text-size-adjust: 100%;   /* 关掉 iOS 横屏时的自动放大字号 */
  }
  /* 引导浮层弹出时照旧锁背景（这条是页面原有行为，不能被上面的 overflow 覆盖掉） */
  body.ob-lock { overflow: hidden; }

  /* ── ② 顶栏：允许折行、收紧留白 ─────────────────────────────────────
     ≤1180px 已经有 flex-wrap:wrap，这里只是把间距和字号压到手机能看的尺度，
     并让右侧工具区整条独占一行（否则 logo 后面挤 7 个按钮，每个都点不准）。 */
  .topbar {
    padding: 6px 10px;
    gap: 6px;
  }
  .brand { font-size: 17px; margin-right: 0; }
  .ob-topbar-tools {
    width: 100%;
    margin-left: 0;
    gap: 8px 10px;
    justify-content: flex-start;
  }
  .topbar .ob-rerun,
  .topbar .ob-user,
  .topbar .dy-strip { font-size: 12.5px; }
  /* 触控目标：手指点得中（32px 是这一行按钮的下限，再高顶栏会占掉半屏） */
  .topbar button { min-height: 32px; }
  .dy-strip { white-space: normal; text-align: left; }

  /* ── ③ 流程条那一行：拆成上下几段，八站改成横向滑动 ────────────────
     这一行原本是「商品卡 + 档位 + 八站 + 手动/自动 + ?」挤在一个 nowrap flex 里，
     375px 下必然溢出。改法：整行允许换行，商品卡独占一行，八站自己横滑。 */
  .stepbar-wrap {
    flex-wrap: wrap;
    padding: 8px 10px;
    gap: 8px;
  }
  .stepbar-wrap > .sku-block {
    width: 100%;
    max-width: 100%;
  }
  .sku-block .sku-card { flex: 1 1 auto; max-width: none; }
  .sku-card-name { max-width: none; }
  .stepbar {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    margin: 0;
    justify-content: flex-start;   /* 横滑时居中会把第 1 站推到屏外 */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .stepbar::-webkit-scrollbar { width: 0; height: 0; }
  .step { min-width: 62px; }
  .step .step-name { font-size: 12px; }
  #miyouModeBar {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    padding: 4px 0 0;
  }
  .pipe-help-btn { margin-left: auto; }
  .pipe-help-pop {
    left: 10px;
    right: 10px;
    width: auto;
  }

  /* ── ④ 工作区：三栏上下排，队列不再是「栏中栏」 ─────────────────────
     ≤1180px 已经塌成一列，但顺序是 队列→工作区→已发布，且两条侧栏各自
     max-height:240px 自己滚。手机上这意味着：一开页面先看到两块滚不动的
     队列，真正干活的工作区在屏幕外。
     这里做两件事：
       · 工作区排到最前（手机上第一眼就是干活的地方）；
       · 侧栏放开高度，跟着整页一起滚，不做栏中栏。
     ⚠ 电脑端「左=进 / 中=做 / 右=出」的 0818 定稿一个字节没动。 */
  main {
    display: block;
    padding: 10px 10px 28px;
  }
  .pipe3 {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .pipe3 > .pipe-mid { order: 1; }
  .pipe3 > .rail-l   { order: 2; }
  .pipe3 > .rail-r   { order: 3; }
  .rail {
    overflow: visible;
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  .rail-l { border-right: 1px solid var(--line); }
  .rail-r { border-left: 1px solid var(--line); }
  .rail-body {
    max-height: none;
    overflow: visible;
    padding: 10px;
  }
  .stage { border-radius: 12px; }
  .stage-head {
    flex-wrap: wrap;
    padding: 12px 14px 8px;
  }
  .stage-head h2 { font-size: 18px; }
  .stage-head .sub { white-space: normal; }   /* 手机上一行放不下，允许折行别省略成「…」 */
  .stage-badges { flex-wrap: wrap; gap: 8px; }
  #stageBody {
    height: auto;
    overflow-x: auto;                          /* 宽表格自己横滑，不撑破页面 */
    padding: 12px 14px 16px;
  }

  /* ── ⑤ 进门引导浮层：卡片不许再被切掉 ───────────────────────────────
     根因是 .ob-card 作为 grid 子项 min-width:auto→min-content(428px)。
     两处一起治：卡片显式 min-width:0，四步进度条允许折行。 */
  #onboardMask {
    padding: 12px;
    place-items: start center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ob-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 22px 18px 14px;
    margin: 6px 0 20px;
  }
  .ob-dots {
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 16px 0 20px;
  }
  .ob-dot { font-size: 12.5px; }
  .ob-dot-line { width: 14px; }
  .ob-row { flex-wrap: wrap; }
  .ob-row input { flex: 1 1 100%; }
  .ob-code-btn { flex: 1 1 100%; }

  /* ── ⑥ 输入框统一 16px ──────────────────────────────────────────────
     iOS Safari 铁规矩：字号 < 16px 的输入框一聚焦就把整页放大，而且【退不回去】，
     客户之后看到的每一屏都是放大且横滚的。这是「手机端用不了」最常见的一种。 */
  input, select, textarea { font-size: 16px; }
  .ob-field input,
  .ob-row input { min-height: 46px; }
  .sku-block input { width: 100%; }

  /* ── ⑦ 弹窗：占满屏宽、内部能滚 ─────────────────────────────────────
     队列复核 / 发布确认 / 余额不足 / 更新日志四个弹窗电脑端是 min(宽, 9x vw)，
     手机上留白比内容还多；且队列那张表是 5 列网格，375px 必溢出。 */
  #miyouQueueModal .mq-card,
  #miyouPublishConfirmModal .mq-confirm-card,
  #miyouChangelog .cl-card,
  #miyouBalanceBlockModal .bbb-card {
    width: calc(100vw - 20px);
    max-width: none;
    max-height: calc(100dvh - 40px);
    padding: 16px 14px;
  }
  .mq-row {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 8px 10px;
    align-items: start;
  }
  .mq-row .mq-thumb,
  .mq-row .mq-thumb-empty { width: 56px; height: 56px; }
  .mq-row .mq-price-cell,
  .mq-row .mq-roi-cell,
  .mq-row .mq-row-actions { grid-column: 2 / -1; }
  .mq-roi-cell { min-width: 0; text-align: left; align-items: flex-start; }
  .mq-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .mq-ready-text { min-width: 0; }
  .mq-matfill-row { flex-wrap: wrap; }

  /* ── ⑧ 兜底：图 / 表 / 长串不许把页面撑出横滚 ───────────────────────── */
  img, video, canvas, svg { max-width: 100%; }
  pre { overflow-x: auto; }
  .ui1-group-table-wrap,
  .ui1-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── 更窄的机型（iPhone SE / 老安卓 360~375）再收一档 ──────────────────── */
@media (max-width: 400px) {
  .ob-card { padding: 20px 14px 12px; }
  .ob-dot { font-size: 12px; }
  .stage-head h2 { font-size: 17px; }
  .topbar .ob-rerun,
  .topbar .ob-user { font-size: 12px; }
}