/* B2C 订单流程页（待发货 / 售后 / 在途签收）和链路条。颜色只用 tokens.css（UI 门禁）。 */
.bc-chain { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; row-gap: 6px; }
.bc-step { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  color: var(--text-primary); text-decoration: none; min-width: 150px; flex: 1 1 150px; }
.bc-step:hover { background: var(--surface-hover); }
.bc-step.here { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft-bg); }
.bc-n { flex: none; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: var(--surface-sunken); color: var(--text-secondary); }
.bc-step.here .bc-n { background: var(--accent); color: var(--text-on-accent); }
.bc-t { display: flex; flex-direction: column; min-width: 0; }
.bc-t b { font-size: 14px; }
.bc-t small { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-step.bad small { color: var(--danger-fg); font-weight: 600; }
.bc-step.warn small { color: var(--warning-fg); font-weight: 600; }
.bc-arrow { flex: none; width: 18px; align-self: center; height: 2px; background: var(--border-strong); position: relative; margin: 0 2px; }
.bc-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: var(--border-strong); }
@media (max-width: 760px) { .bc-arrow { display: none; } .bc-step { min-width: 0; flex-basis: calc(50% - 4px); } }
/* 10-24（Edmond「颜色能不能弄得显眼一点」）：和外壳的工序条（styles.css .flow-chain）一个样子——整根淡绿底、这步实心、前后两步描边写「上一步 / 下一步」、
   左边一格写线名和第几步、下面一句单从哪来做完去哪；缩小钉在顶上的版本（.sq-secpin / .bc-mini）照旧一行小字，这几样不画 */
[id="b2c-chain"]:not(.bc-mini) { padding: 8px 10px 7px; border: 1px solid var(--accent-soft-border); border-radius: 12px; background: var(--accent-soft-bg); }
.bc-chain { flex-wrap: nowrap; }
.bc-head { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 12px 0 2px; margin-right: 6px;
  border-right: 1px solid var(--accent-soft-border); white-space: nowrap; }
.bc-head b { font-size: 14px; color: var(--accent-soft-fg); }
.bc-head small { font-size: 12px; color: var(--text-secondary); }
.bc-step { min-width: 0; flex: 1 1 0; padding: 6px 10px; border-color: var(--border-subtle); }
.bc-step.near { border-color: var(--accent-soft-border); }
.bc-step.here { border-color: var(--accent); box-shadow: none; background: var(--accent); color: var(--text-on-accent); }
.bc-step.here .bc-n { background: var(--text-on-accent); color: var(--accent); }
.bc-step.here .bc-t small, .bc-step.here.bad small, .bc-step.here.warn small { color: var(--text-on-accent); }
.bc-tag { font-style: normal; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.bc-step.near .bc-tag { color: var(--accent-soft-fg); font-weight: 600; }
.bc-step.here .bc-tag { color: var(--text-on-accent); font-weight: 600; }
.bc-arrow { background: var(--accent); opacity: .55; }
.bc-arrow::after { border-left-color: var(--accent); }
.bc-why { display: flex; flex-wrap: wrap; gap: 2px 18px; margin-top: 6px; padding-left: 2px; color: var(--text-secondary); font-size: 12px; }
.bc-why i { font-style: normal; color: var(--accent-soft-fg); font-weight: 600; margin-right: 6px; }
.sq-secpin .bc-head, .bc-mini .bc-head, .sq-secpin .bc-tag, .bc-mini .bc-tag, .sq-secpin .bc-why, .bc-mini .bc-why { display: none; }
.sq-secpin [id="b2c-chain"], .bc-mini { padding: 0; border: 0; background: none; }
.sq-secpin .bc-step.here .bc-t small, .bc-mini .bc-step.here .bc-t small { color: var(--text-on-accent); }
@media (max-width: 760px) { .bc-chain { flex-wrap: wrap; } .bc-head { display: none; } }

/* 往下滚钉在顶上的缩小版（10-10 晚老板截图：「能不能保持显示，可以窄一些」）：一步一行字「序号 名字 短数」，全句悬停看。
   .sq-secpin = section-tabs.js 的吸顶条里复制的那份；.bc-mini = B2C 全部订单页自己的吸顶条吸住了（b2c-chain.js 加） */
.bc-s { display: none; }
.sq-secpin .bc-chain, .bc-mini .bc-chain { flex-wrap: nowrap; row-gap: 0; }
.sq-secpin .bc-step, .bc-mini .bc-step { flex: 0 0 auto; min-width: 0; gap: 5px; padding: 2px 9px 2px 4px; border-radius: 999px; }
.sq-secpin .bc-n, .bc-mini .bc-n { width: 18px; height: 18px; font-size: 11px; }
.sq-secpin .bc-t, .bc-mini .bc-t { flex-direction: row; align-items: baseline; gap: 5px; }
.sq-secpin .bc-t b, .bc-mini .bc-t b { font-size: 13px; white-space: nowrap; }
.sq-secpin .bc-t small, .bc-mini .bc-t small { overflow: visible; }
.sq-secpin .bc-l, .bc-mini .bc-l { display: none; }
.sq-secpin .bc-s, .bc-mini .bc-s { display: inline; }
.sq-secpin .bc-arrow, .bc-mini .bc-arrow { width: 10px; margin: 0 1px; }

.bf-app { margin: 0 auto; padding: 20px 16px 48px; max-width: 1280px; display: flex; flex-direction: column; gap: 14px; }
.bf-head h1 { margin: 0 0 4px; font-size: 22px; }
.bf-head p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; max-width: 80ch; }
.bf-bar { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; color: var(--text-muted); }
.bf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bf-chips button { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 3px 11px; font: inherit; font-size: 13px; cursor: pointer; color: var(--text-secondary); }
.bf-chips button.on { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.bf-chips button .n { margin-left: 4px; font-size: 12px; opacity: .8; }
.bf-lane { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px 10px; }
.bf-lane.zero { padding-bottom: 4px; }
.bf-lane.bad { border-left: 4px solid var(--danger-fg); }
.bf-lane.warn { border-left: 4px solid var(--warning-fg); }
.bf-lane.info { border-left: 4px solid var(--info-fg); }
.bf-lane .sqv-h { margin: 8px 0 2px; font-size: 15px; }
.bf-what { margin: 0 0 6px; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.bf-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; padding: 8px 6px 8px 2px; border-top: 1px solid var(--border-subtle); font-size: 13px; cursor: pointer; }
/* 10-09 老板「点了右边不会显示详情出来」：整行能点（右边出这张单），悬停有底色、正在看的那行标蓝 */
.bf-row:hover { background: var(--surface-hover); }
.bf-row.bo-cur { background: var(--info-bg); box-shadow: inset 3px 0 0 var(--info-fg); }
/* 每档第几单（同日「订单多了能不能有个序列号，就浅浅的也好」）：淡灰小字 */
.bf-rn { min-width: 1.8em; padding-top: 1px; text-align: right; font-size: 11px; line-height: 19px; color: var(--text-muted); opacity: .7; font-variant-numeric: tabular-nums; user-select: none; }
/* 换「看谁的」时旧内容先变淡，数回来再换（原来要等数回来才有动静，老板以为没点上） */
.bf-loading { opacity: .45; transition: opacity .15s; pointer-events: none; }
.bf-src { margin-top: 6px; }
.bf-src summary { cursor: pointer; color: var(--accent); width: max-content; }
.bf-src p { margin: 4px 0 0; }
.bf-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bf-top { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.bf-top a { font-weight: 600; color: var(--accent); text-decoration: none; font-variant-numeric: tabular-nums; }
.bf-top a:hover { text-decoration: underline; }
.bf-meta { color: var(--text-muted); font-size: 12px; }
.bf-prods { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; color: var(--text-secondary); }
.bf-prods span { display: inline-flex; align-items: center; gap: 4px; }
.bf-prods img { width: 26px; height: 26px; object-fit: contain; border-radius: 4px; background: var(--surface-sunken); }
.bf-why { color: var(--text-primary); }
.bf-todo { color: var(--text-muted); font-size: 12px; }
.bf-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.bf-more { font-size: 12px; color: var(--text-muted); padding-top: 6px; }
.bf-more button { border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
.bf-often { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.bf-often a { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--border-subtle); border-radius: 8px; color: inherit; text-decoration: none; font-size: 13px; }
.bf-often a:hover { background: var(--surface-hover); }
.bf-often img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: var(--surface-sunken); flex: none; }
.bf-often small { display: block; color: var(--text-muted); font-size: 12px; }
.bf-note { font-size: 12px; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 640px) { .bf-row { grid-template-columns: auto minmax(0, 1fr); } .bf-side { grid-column: 2; align-items: flex-start; text-align: left; } }
/* 店铺 · 负责人（10-09 老板圈了链路条五步：「这里的订单，我也想你写一下店铺名和负责人」）：五页每单同一个样子，字样淡、名字正常色 */
.bc-own { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: var(--ink); white-space: normal; }
.bc-own > span { white-space: nowrap; }
.bc-own i { font-style: normal; font-size: 11.5px; color: var(--text-muted); margin-right: 3px; }