/* /assets/css/systems/business-ops/how-product-distribution-wholesale-retail-flow-works-explained.css — 本页专属样式（en/zh 共用） */
/* ============ 产品分销 · 批发—零售流转 · Product distribution flow ============
   抽象系统流程图：方框 + 箭头，无外壳。共享类（.part/.tag/.tag-sm/.is-running/
   @keyframes）已在 base 与本文中定义；零件区分色与动画用 body[data-topic="distribution-flow"]
   作用域限定，避免与其它页互扰。 */

/* 零件本体 / 高亮（base 未含，本页补全） */
.part .body{fill:var(--metal);stroke:#2563eb;stroke-width:1.6}
.part .body2{fill:var(--metal-2);stroke:#60a5fa;stroke-width:1.2}
.part .body3{fill:#aab9cd;stroke:none}
.part .accent{fill:none;stroke:#6b7b8c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.part.is-active .body{fill:#9dc3f5;stroke:#1d4ed8;stroke-width:2.2}
.part.is-active .body2{fill:#c4daf8;stroke:#3b82f6;stroke-width:1.4}
.part.is-active .body3{fill:#1d4ed8}
.part.is-active .accent{stroke:#1d4ed8}
.part.is-active{filter:drop-shadow(0 0 12px rgba(29,78,216,.5))}

/* 小字对比度修正（页面作用域） */
body[data-topic="distribution-flow"] .tag-sm{fill:#5b6472;font-size:11px}

/* 各部件区分色（作用域限定 · 均在中灰蓝值域内，禁近白） */
body[data-topic="distribution-flow"] .part[data-id="part-manufacturer"]:not(.is-active) .body{fill:#c2d1e4}
body[data-topic="distribution-flow"] .part[data-id="part-wholesaler"]:not(.is-active) .body{fill:#bfcee2}
body[data-topic="distribution-flow"] .part[data-id="part-retailer"]:not(.is-active) .body{fill:#c6d3e5}
body[data-topic="distribution-flow"] .part[data-id="part-customer"]:not(.is-active) .body{fill:#c2d1e4}
body[data-topic="distribution-flow"] .part[data-id="part-warehouse"]:not(.is-active) .body{fill:#c0cfe3}

/* 货物流：实线蓝箭头 + 箱体 */
.dsf-goods-arrow{fill:none;stroke:#2563eb;stroke-width:3;stroke-linecap:round}
.dsf-crate rect{fill:#9db8dd;stroke:#2563eb;stroke-width:1.5}
.dsf-crate line{stroke:#1e40af;stroke-width:1.2}

/* 资金流：橙色虚线箭头 + 硬币 */
.dsf-cash-arrow{fill:none;stroke:#d97706;stroke-width:2.6;stroke-dasharray:8 6;stroke-linecap:round}
.dsf-coin circle{fill:#fcd34d;stroke:#d97706;stroke-width:1.6}
.dsf-coin text{fill:#92400e;font-family:var(--mono);font-size:11px;font-weight:700}

/* ============ 动画（打开即播：body.is-running） ============ */
.dsf-crate,.dsf-coin,.dsf-crate-v{animation-play-state:paused}
.is-running .dsf-crate{animation:dsf-goods 1.8s linear infinite}
.is-running .dsf-coin{animation:dsf-cash 1.8s linear infinite}
.is-running .dsf-crate-v{animation:dsf-goods-v 2s linear infinite}

/* 货物流：向右 54px（制造商→批发商→零售商→消费者） */
@keyframes dsf-goods{
  0%{transform:translateX(0);opacity:0}
  8%{opacity:1}
  92%{opacity:1}
  100%{transform:translateX(54px);opacity:0}
}
/* 资金流：向左 54px（消费者→零售商→批发商→制造商） */
@keyframes dsf-cash{
  0%{transform:translateX(0);opacity:0}
  8%{opacity:1}
  92%{opacity:1}
  100%{transform:translateX(-54px);opacity:0}
}
/* 仓库补货：向上 104px（库存→批发商） */
@keyframes dsf-goods-v{
  0%{transform:translateY(0);opacity:0}
  8%{opacity:1}
  92%{opacity:1}
  100%{transform:translateY(-104px);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .is-running .dsf-crate,.is-running .dsf-coin,.is-running .dsf-crate-v{animation:none}
}