/* ── ChartSetupOverlay (cs-*) ─────────────────────────────────────────────── */

.cs-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

.cs-page-title {
  padding: 0 14px 8px;
  font-size: var(--fs-12);
  color: var(--ink-mid);
  border-bottom: 1px solid var(--border);
}

/* Image panel */
.cs-image-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cs-scroll-wrap {
  flex: 1;
  overflow: auto;
  background: #111;
  display: flex;
  align-items: flex-start;
}
.cs-canvas-inner {
  position: relative;
  display: block;
  margin: 0 auto; /* centers image when zoom < 1 */
  cursor: default;
  flex-shrink: 0;
  /* pinch-zoom (not none): without touch-action restricted at all, a real
     touchscreen's first touch-and-move on this element gets claimed by the
     browser's native pan gesture before our own pointermove-driven drag
     (CropPage's crop-rect drag, grid-corner placement/correction) ever sees
     it -- preventDefault() in the pointerdown handler alone isn't reliable
     enough to stop this on its own. Confirmed via hands-on tablet testing.
     Explicitly "pinch-zoom" rather than "none": "none" also blocks native
     two-finger pinch-to-zoom, which this overlay doesn't replace with its
     own touch-pinch handling (only wheel-based zoom, see bind_wheel_zoom
     below) -- "none" silently broke pinch-zoom entirely. */
  touch-action: pinch-zoom;
}
.cs-page-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Crop rect overlay */
.cs-crop-rect {
  position: absolute;
  border: 2px dashed #999;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  box-sizing: border-box;
}

/* Grid rubber-band preview (shown between placing the first and second
   corner, while the pointer moves before the second corner commits) */
.cs-grid-rubber {
  position: absolute;
  border: 2px dashed var(--accent);
  background: transparent;
  pointer-events: none;
  box-sizing: border-box;
}

/* Grid boundary solid rect */
.cs-grid-rect {
  position: absolute;
  border: 2px solid var(--accent);
  background: transparent;
  pointer-events: none;
  box-sizing: border-box;
}

/* Cursor states — L-shaped SVG cursors for grid corner placement */
.cs-cursor-tl {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M3 17L3 3L17 3' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='square'/%3E%3Cpath d='M3 17L3 3L17 3' fill='none' stroke='%23a855f7' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") 3 3, default;
}
.cs-cursor-br {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M3 17L17 17L17 3' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='square'/%3E%3Cpath d='M3 17L17 17L17 3' fill='none' stroke='%23a855f7' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") 17 17, default;
}
.cs-cursor-crop { cursor: crosshair; }

/* Grid-corner drag handle: a small square sitting directly on the box's own
   corner (not a floating circle, not paired with a separate ┌/┘ glyph) —
   reads as part of the rectangle rather than a decoration on top of it.
   Visible mark is small (14px, a typical crop-handle size); the surrounding
   ~44px is an invisible padded hit target, big enough for a real finger. */
.cs-grid-handle {
  /* An L-bracket, not a filled square or a crosshair: reads as "this is a
     corner" (matches which two edges of the box actually meet here) and,
     since it only occupies the two edges that matter — not a shape that
     crosses fully through the point in all four directions — it blocks
     less of the exact pixel you're lining up against than either. */
  position: absolute;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  touch-action: none;
  cursor: grab;
}
.cs-grid-handle::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2.5px solid var(--accent);
  filter: drop-shadow(0 0 1.5px var(--bg));
}
/* Bracket opens toward the box interior: TL's corner (border intersection)
   sits exactly on the point, arms extending right + down (┌); BR's corner
   sits exactly on the point, arms extending left + up (┘). */
.cs-grid-handle-tl::before {
  left: 50%; top: 50%;
  border-right: none;
  border-bottom: none;
}
.cs-grid-handle-br::before {
  right: 50%; bottom: 50%;
  border-left: none;
  border-top: none;
}
.cs-grid-handle-tr::before {
  right: 50%; top: 50%;
  border-left: none;
  border-bottom: none;
}
.cs-grid-handle-bl::before {
  left: 50%; bottom: 50%;
  border-right: none;
  border-top: none;
}
.cs-grid-handle:active { cursor: grabbing; }