/* stop-target-play: every selector starts with .stop-target-play- */
.stop-target-play-chart { position: relative; }
/* drag handles: price tags on the right end of each line, a full tap target tall, square on the line side */
.stop-target-play-handle { position: absolute; right: 0; z-index: 1; display: flex; align-items: center; gap: var(--s2); height: var(--tap); padding: 0 var(--s3); border-radius: var(--r-sm); color: var(--on-ink); font: 700 var(--fs-small)/1 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: ns-resize; user-select: none; -webkit-user-select: none; }
.stop-target-play-handle::after { content: "⇕"; }
.stop-target-play-t { background: var(--up); border-bottom-right-radius: 0; transform: translateY(-100%); }
.stop-target-play-s { background: var(--down); border-top-right-radius: 0; }
.stop-target-play-t.stop-target-play-flip { transform: none; border-radius: var(--r-sm); border-top-right-radius: 0; }
.stop-target-play-s.stop-target-play-flip { transform: translateY(-100%); border-radius: var(--r-sm); border-bottom-right-radius: 0; }
.stop-target-play-handle.is-dragging { outline: 2px solid var(--brand); outline-offset: 2px; }
.stop-target-play-handle:focus-visible { outline: none; box-shadow: var(--focus); }
.stop-target-play-chart.is-busy .stop-target-play-handle { opacity: .55; cursor: default; }
.stop-target-play-zone-up { fill: var(--up-wash); }
.stop-target-play-zone-down { fill: var(--down-wash); }
.stop-target-play-tline { stroke: var(--up); stroke-width: 2; }
.stop-target-play-sline { stroke: var(--down); stroke-width: 2; }
.stop-target-play-entry { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 6 4; }
.stop-target-play-now { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 4; }
.stop-target-play-hist { stroke: var(--ink-3); stroke-width: 1.5; fill: none; stroke-linejoin: round; }
.stop-target-play-path { stroke: var(--ink); stroke-width: 2; fill: none; stroke-linejoin: round; }
.stop-target-play-after { stroke: var(--ink-3); stroke-width: 1.5; fill: none; stroke-dasharray: 3 4; }
.stop-target-play-hit { fill: var(--brand); stroke: var(--paper); stroke-width: 2; }
.stop-target-play-zl { font: 700 var(--fs-chart) var(--font-ui); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.stop-target-play-zl-up { fill: var(--up); }
.stop-target-play-zl-down { fill: var(--down); }
.stop-target-play-buy { font: 700 var(--fs-chart) var(--font-ui); font-variant-numeric: tabular-nums; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.stop-target-play-outs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.stop-target-play-sliders { display: grid; gap: var(--s3) var(--s5); }
.stop-target-play-go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.stop-target-play-result { margin: 0; min-width: 0; font: 700 var(--fs-ui-lg)/1.3 var(--font-ui); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stop-target-play-result[data-tone="up"] { color: var(--up); }
.stop-target-play-result[data-tone="down"] { color: var(--down); }
.stop-target-play-tally:empty { display: none; }
.stop-target-play-nw { white-space: nowrap; }
@media (min-width: 44rem) {
  .stop-target-play-outs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stop-target-play-sliders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}