/* assets/css/draw.css -- the #dockDraw control group and the live-drawing
   canvas overlay. Colours come from the palette variables in the generated
   <style> block (--draw-* and the shared tokens) or the base.css design
   system -- no raw hex here. */

/* The in-progress stroke / trend rubber-band only. Committed drawings live in
   Plotly's layout.shapes. position: fixed and driven straight from the plot
   rect's client coords, same technique as #chartCrosshair. */
#drawLive {
  position: fixed;
  pointer-events: none;
  z-index: 6;
  display: none;
}
#drawLive.active { display: block; }

#dockDraw { gap: var(--sp-3); align-items: center; }

.draw-seg, .draw-widths { display: flex; gap: 2px; }
.draw-seg button, .draw-widths button {
  min-width: var(--tap); min-height: var(--tap); padding: 0;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: var(--fs-base); line-height: 1;
}
.draw-seg button[aria-pressed="true"],
.draw-widths button[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--surface);
}

.draw-swatches { display: flex; gap: var(--sp-2); }
.draw-swatches button {
  width: var(--tap); height: var(--tap); padding: 0;
  border: 2px solid transparent; border-radius: 50%;
  background-clip: padding-box; cursor: pointer;
}
.draw-swatches button[aria-pressed="true"] { border-color: var(--text); }

#drawSelCluster { display: flex; gap: var(--sp-2); }
.dock-btn-danger { color: var(--down); border-color: var(--down); }
.draw-hint-error { color: var(--down); }