/* 运营清单列表页（清单 Tab）专属样式：分段条 + 模块卡片网格。
   从 components.css 拆出来——那个文件已经到 300 行硬上限，本页新增的这两组规则
   放不下；沿用本仓库"按职责拆 CSS 文件"的既有做法（mobile.css/report.css/
   admin.css/dashboard.css 都是这么拆出来的），不是新发明的模式。
   模块卡片那组全部限定在 #taskListArea 下：.module-section/.module-header/
   .module-items 三个类名是和「新品管理」面板（js/views/products.js）共用的，
   不能碰、也不在这里重名，新样式一律用 .mod-* 前缀。
   不新增全局 CSS token，颜色/圆角/阴影全部引用 base.css 的既有变量。 */

/* ===== 分段条（运营 SOP 目录 / 每周工作 / 每月工作 / 新品操作）===== */
/* --seg-c 是局部变量不是全局 token：四个分段各自的主题色，色点与激活态计数都取它。
   这样四段一眼能按颜色区分，替代原来 📁🗓📆🆕 四个 emoji 图标（emoji 在不同系统
   /字体下字形、基线、宽度都不一致，是 ui-ux-pro-max 列出的反模式）。 */
.task-seg-bar { display:inline-flex; flex-wrap:wrap; max-width:100%; background:var(--bg-shell); border:1px solid var(--border); border-radius:var(--radius-sm); padding:4px; margin-bottom:12px; }
.task-seg-btn { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; padding:9px 20px; border:none; border-radius:var(--radius-sm); font-size:14.5px; background:transparent; color:var(--text-muted); cursor:pointer; transition:all 0.2s; }
.task-seg-btn .seg-pip { width:7px; height:7px; border-radius:50%; background:var(--seg-c); opacity:.55; flex-shrink:0; }
.task-seg-btn .seg-count { font-size:12px; color:var(--text-subtle); margin-left:5px; font-variant-numeric:tabular-nums; }
.task-seg-btn.active { background:var(--surface); color:var(--text); font-weight:700; box-shadow:0 1px 4px rgba(0,0,0,.07); }
.task-seg-btn.active .seg-pip { opacity:1; }
.task-seg-btn.active .seg-count { color:var(--seg-c); font-weight:700; }
.task-seg-btn.sop { --seg-c:var(--brand); }
.task-seg-btn.wk  { --seg-c:var(--week); }
.task-seg-btn.mo  { --seg-c:var(--month); }
.task-seg-btn.pr  { --seg-c:var(--once); }

/* 可用宽度放不下一行时折成 2x2。用容器查询而不是视口断点：分段条一行的自然宽度约
   586px，而它的可用宽度并不跟着视口单调变化——视口 ≤768 时侧栏收起，内容区约为
   视口−28；>768 时 260px 侧栏回来，769px 视口下内容区只剩 461px（实测）。按视口写
   断点就得写两段区间（≤640 与 769–894），分段计数一涨成三位数、自然宽度变大，区间
   还得跟着改。直接问「分段条所在的这块区域有多宽」才是对的问题。
   .task-seg-bar 上的 flex-wrap / max-width 是第二道保险：计数增长让自然宽度超过
   600，或浏览器不支持容器查询时，按钮会换行而不是溢出。 */
#taskSegmentBar { container-type: inline-size; }
@container (max-width: 600px) {
  .task-seg-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 100%; }
  .task-seg-btn { padding: 9px 8px; font-size: 13px; gap: 6px; min-width: 0; }
}

/* ===== 模块卡片网格 ===== */
#taskListArea .task-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:12px; align-items:start; }
#taskListArea .mod { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); transition:border-color .15s, box-shadow .15s; }
#taskListArea .mod:hover { border-color:var(--brand-bd); box-shadow:var(--shadow-card); }
#taskListArea .mod.open { grid-column:1/-1; border-color:var(--brand); box-shadow:var(--shadow-card); }
#taskListArea .mod.dim { opacity:.42; }
#taskListArea .mod-toggle { display:block; width:100%; text-align:left; background:none; border:none; padding:13px 15px; cursor:pointer; font-family:inherit; color:inherit; }
#taskListArea .mod-toggle:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; border-radius:var(--radius); }
#taskListArea .mod-h { display:flex; align-items:baseline; gap:8px; }
#taskListArea .mod-name { font-size:14px; font-weight:700; color:var(--text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#taskListArea .mod-pct { font-size:13px; font-weight:800; color:var(--brand); font-variant-numeric:tabular-nums; flex-shrink:0; }
#taskListArea .mod-sub { display:flex; align-items:center; gap:6px; margin-top:3px; font-size:11.5px; color:var(--text-subtle); font-variant-numeric:tabular-nums; }
#taskListArea .mod-cyc { font-size:10px; padding:1px 6px; border-radius:6px; font-weight:600; }
#taskListArea .mod-cyc.once { background:var(--once-bg); color:var(--once); }
#taskListArea .mod-cyc.wk { background:var(--week-bg); color:var(--week); }
#taskListArea .mod-cyc.mo { background:var(--month-bg); color:var(--month); }
#taskListArea .mod-cyc.mix { background:var(--brand-bg); color:var(--brand-hover); }
#taskListArea .mod-bar { height:5px; background:var(--track); border-radius:3px; overflow:hidden; margin-top:9px; }
#taskListArea .mod-bar i { display:block; height:100%; border-radius:3px; background:var(--brand); transition:width .5s; }
#taskListArea .mod-flags { display:flex; gap:4px; flex-wrap:wrap; margin-top:9px; min-height:18px; }
#taskListArea .mod-flag { font-size:10.5px; padding:1px 7px; border-radius:6px; font-weight:600; line-height:1.55; white-space:nowrap; }
#taskListArea .mod-flag.warn { background:var(--warn-bg); color:var(--warn); }
#taskListArea .mod-flag.hit { background:var(--brand); color:#fff; }
#taskListArea .mod-flag.muted { background:none; padding:0; font-weight:400; color:var(--text-subtle); }
#taskListArea .mod-body { border-top:1px solid var(--border); padding:4px 15px 12px; }
/* B3：收起的卡仍然渲染任务行（同 .module-items.collapsed 的思路），只是这里靠
   ".mod 没有 .open" 这个父选择器隐藏 .mod-body 整块——tests/baseline/page-smoke.js
   等六个文件依赖 .task-row 元素本身存在于 DOM（哪怕不可见），不是"展开才渲染"。 */
#taskListArea .mod:not(.open) .mod-body { display:none; }
#taskListArea .mod-rows { max-height:296px; overflow-y:auto; }
#taskListArea .mod-fold { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:8px; padding-top:8px; border-top:1px solid var(--bg-muted); font-size:12px; color:var(--text-subtle); cursor:pointer; }
#taskListArea .mod-fold:hover { color:var(--brand); }