/* Motion follows the experiment's existing states and keeps its reading order. */
.deal-world {position: relative; isolation: isolate}
.deal-wire-layer {position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3}
.deal-wire, .deal-wire-shadow {fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke}
.deal-wire {stroke: #de5f72; stroke-width: 2}
.deal-wire-shadow {stroke: #16070e; stroke-width: 5; opacity: .72}
.deal-wire-pin {fill: #d36679; stroke: #f0baaa; stroke-width: .7; vector-effect: non-scaling-stroke}
.deal-wire-pulse-halo {fill: #ec7588; opacity: .13}
.deal-wire-pulse-core {fill: #ffd8bd}
.contract-wire-anchor {position: absolute; right: -3px; bottom: 62px; width: 6px; height: 6px; pointer-events: none; opacity: 0}
.contract {will-change: auto; transition: box-shadow 700ms ease, border-color 700ms ease}
.contract-seal {transition: opacity 600ms ease, color 600ms ease}
.deal-actions {position: relative; min-height: 62px; isolation: isolate}
.deal-actions .action-ghost {position: absolute; margin: 0; pointer-events: none; z-index: -1}
.deal-status {min-height: 55px}
.deal-outcome-frame {overflow: hidden; overflow: clip}
.deal-outcome-content {position: relative; padding-top: 27px; display: flow-root}
.deal-outcome-frame .deal-outcome {margin-top: 0; margin-bottom: 0}
.deal-outcome-content .deal-outcome-ghost {position: absolute; top: 27px; left: 0; right: 0; pointer-events: none}
.station-air-label {transition: fill 500ms ease}
.deal-stage[data-phase='called'] .station-air-label {fill: #f2b9af}
.deal-stage[data-phase='signed'] .contract-seal,
.deal-stage[data-phase='broadcast'] .contract-seal {opacity: .85}
.action {transition: transform 150ms ease, background 250ms ease, box-shadow 150ms ease, border-color 250ms ease}
.deal-stage[data-motion-paused='true'] *,
.deal-stage[data-motion-paused='true'] *::before,
.deal-stage[data-motion-paused='true'] *::after {animation-play-state: paused !important}
@media (max-width: 700px) {
  .contract-wire-anchor {right: 12px; bottom: -3px}
  .deal-actions {min-height: 65px}
  .deal-actions .action {min-width: 0; flex-basis: calc(50% - 6px); line-height: 1.4}
  .deal-status {min-height: 86px}
  .deal-wire {stroke-width: 1.9}
}
@media (prefers-reduced-motion: reduce) {
  .contract, .contract-seal, .station-air-label, .action {transition: none !important}
  .deal-actions .action-ghost {display: none}
}
@media print {.deal-wire-layer {display: none}}