/* /assets/css/systems/market-economy/how-supply-and-demand-market-mechanism-works-explained.css — page CSS (shared by en/zh) */
/* ============ shared part fills (source uses .body/.body2/.body3) ============ */
.part .body{fill:var(--metal);stroke:#8ea0b5;stroke-width:1.6}
.part .body2{fill:var(--metal-2);stroke:#a9b7c9;stroke-width:1.2}
.part .body3{fill:#c6d0dd;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))}

/* ============ Supply & demand market mechanism · sd-* ============ */
/* axes and markers (dark, high contrast) */
body[data-topic="supply-demand"] .sd-axis{fill:none;stroke:#334155;stroke-width:2.4;stroke-linecap:round}
body[data-topic="supply-demand"] .sd-tick{stroke:#334155;stroke-width:2}
body[data-topic="supply-demand"] .sd-leader{fill:none;stroke:#8ea0b5;stroke-width:1.2}

/* only the equilibrium dot is filled (mid grey-blue, never near-white) */
body[data-topic="supply-demand"] .part .body3{fill:#aab9cd}

/* two curves: stroke color distinguishes them, unified on highlight */
body[data-topic="supply-demand"] .sd-curve{fill:none;stroke-width:3.2;stroke-linecap:round}
body[data-topic="supply-demand"] .part[data-id="part-demand-curve"] .sd-curve{stroke:#2563eb}
body[data-topic="supply-demand"] .part[data-id="part-supply-curve"] .sd-curve{stroke:#0e7490}
body[data-topic="supply-demand"] .part.is-active .sd-curve{stroke:#1d4ed8;stroke-width:3.8}

/* the shifted (ghost) demand curve */
body[data-topic="supply-demand"] .part[data-id="part-demand-shift"] .sd-curve{stroke:#60a5fa;stroke-dasharray:9 8;stroke-width:3}

/* price-signal arrows (warning color, showing shortage / surplus adjustment) */
body[data-topic="supply-demand"] .sd-sig{fill:none;stroke:#b45309;stroke-width:3;stroke-linecap:round}
body[data-topic="supply-demand"] .part.is-active .sd-sig{stroke:#1d4ed8}

/* equilibrium dot */
body[data-topic="supply-demand"] .part[data-id="part-equilibrium"] .body3{fill:#1d4ed8}
.sd-halo{transform-box:fill-box;transform-origin:center;fill:none;stroke:#1d4ed8;stroke-width:2;
  animation:sd-halo 2.6s ease-out infinite;animation-play-state:paused}
.is-running .sd-halo{animation-play-state:running}
@keyframes sd-halo{0%{transform:scale(.5);opacity:.85}70%{transform:scale(1.9);opacity:0}100%{transform:scale(1.9);opacity:0}}

/* demand / supply curves gently float */
.sd-float-d{transform-box:view-box;animation:sd-float-d 6s ease-in-out infinite;animation-play-state:paused}
.is-running .sd-float-d{animation-play-state:running}
@keyframes sd-float-d{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.sd-float-s{transform-box:view-box;animation:sd-float-s 6s ease-in-out infinite;animation-play-state:paused}
.is-running .sd-float-s{animation-play-state:running}
@keyframes sd-float-s{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* demand shifting right */
.sd-shift{transform-box:view-box;animation:sd-shift 5.4s ease-in-out infinite;animation-play-state:paused}
.is-running .sd-shift{animation-play-state:running}
@keyframes sd-shift{0%,12%{transform:translateX(-90px);opacity:0}45%,80%{transform:translateX(0);opacity:.95}100%{transform:translateX(-90px);opacity:0}}

/* price-signal breathing */
.sd-signal{animation:sd-signal 2.8s ease-in-out infinite;animation-play-state:paused}
.is-running .sd-signal{animation-play-state:running}
@keyframes sd-signal{0%,100%{opacity:.4}50%{opacity:1}}

/* flowing dashes on the equilibrium price / quantity lines */
.sd-dash{stroke-dasharray:7 7;animation:sd-dash 1.4s linear infinite;animation-play-state:paused}
.is-running .sd-dash{animation-play-state:running}
@keyframes sd-dash{to{stroke-dashoffset:-28}}