/* chart-spotter: every selector starts with .chart-spotter- */
.chart-spotter-ask { margin: 0; font: 700 var(--fs-ui)/1.45 var(--font-ui); color: var(--ink); }
.chart-spotter-chart { position: relative; cursor: crosshair; }
.chart-spotter-grid { stroke: var(--line); stroke-width: 1; }
.chart-spotter-path { stroke: var(--ink); stroke-width: 2; fill: none; stroke-linejoin: round; }
.chart-spotter-guide { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 8 5; }
.chart-spotter-guide.is-hit { stroke: var(--up); stroke-dasharray: none; }
.chart-spotter-zone { fill: var(--brand-wash); }
.chart-spotter-zlab { font: 700 var(--fs-chart) var(--font-ui); fill: var(--brand-ink); paint-order: stroke; stroke: var(--brand-wash); stroke-width: 4px; stroke-linejoin: round; }
.chart-spotter-mark { fill: none; stroke: var(--brand); stroke-width: 2; }
.chart-spotter-tline { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 8 5; }
/* the drag handle: an ink price tag on the right end of the line, a full tap target tall */
.chart-spotter-handle { position: absolute; right: 0; z-index: 1; display: flex; align-items: center; gap: var(--s2); height: var(--tap); margin-top: calc(var(--tap) / -2); padding: 0 var(--s3); border-radius: var(--r-sm); background: var(--ink); 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; }
.chart-spotter-handle::after { content: "⇕"; }
.chart-spotter-handle.is-dragging { outline: 2px solid var(--brand); outline-offset: 2px; }
.chart-spotter-handle.is-hit { background: var(--up); }
.chart-spotter-handle:focus-visible { outline: none; box-shadow: var(--focus); }
.chart-spotter-handle[aria-disabled="true"] { cursor: default; }
.chart-spotter-go, .chart-spotter-picks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.chart-spotter-picks .w-btn { flex: 1 1 8rem; }
.chart-spotter-count { margin: 0; }
.chart-spotter-pick.is-right { opacity: 1; outline: 2px solid var(--ink); outline-offset: 2px; }
.chart-spotter-pick.is-off { opacity: .35; }
.chart-spotter-say { margin: 0; min-height: 1.5em; font: 700 var(--fs-ui)/1.45 var(--font-ui); overflow-wrap: anywhere; }
.chart-spotter-say[data-tone="up"] { color: var(--up); }
.chart-spotter-say[data-tone="down"] { color: var(--down); }
.chart-spotter-say[data-tone="aha"] { padding-left: var(--s3); border-left: 2px solid var(--brand); color: var(--ink); }