/* ── 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;
  /* Without this, a real touchscreen's very first touch-and-move on this
     element gets claimed by the browser's native scroll/pan gesture before
     our own pointermove-driven drag (CropPage's crop-rect drag, and the
     PROTOTYPE variants' grid-corner drag) ever sees it — preventDefault()
     in the pointerdown handler alone isn't reliable enough to stop this.
     Found via hands-on tablet testing: variants "a"/"c" (which start
     dragging straight from the first touch on this element) silently did
     nothing on a real Fire tablet, while variant "b" (whose primary action
     is a tap, with dragging confined to .cs-proto-handle, which already
     had this) worked. Also benefits CropPage mode's existing drag, which
     had the same latent gap. */
  touch-action: none;
}
.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 */
.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;
}

/* Corner markers */
.cs-corner {
  position: absolute;
  font-size: var(--fs-28);
  line-height: 1;
  color: var(--accent);
  pointer-events: none;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 4px var(--bg), 0 0 4px var(--bg);
}

/* 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; }

/* ── PROTOTYPE: touch-friendly single-point placement ─────────────────────
   Resolving wayfinder ticket .scratch/touch-friendly-placement/issues/01-
   single-point-placement-interaction.md. THROWAWAY — strip before merging
   to main. */

/* Real draggable hit-target for a placed corner — generously sized (~44px)
   since this is deliberately testing a bigger touch target than today's
   invisible 24px math-only hit test, previewing what ticket 03 will likely
   land on. Visible as a soft ring so it reads as "grabbable", distinct from
   the small glyph (┌/┘) it sits on top of. */
.cs-proto-handle {
  position: absolute;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: rgba(60, 207, 239, 0.15);
  touch-action: none;
  cursor: grab;
}
.cs-proto-handle:active { cursor: grabbing; }

/* Variant "c" magnifier loupe */
.cs-proto-loupe {
  position: absolute;
  width: 90px;
  height: 90px;
  transform: translate(-50%, -100%);
  border-radius: 50%;
  border: 3px solid var(--accent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 5;
}
.cs-proto-loupe::after {
  /* crosshair marking the exact landing pixel, dead center of the loupe */
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  border: 1.5px solid var(--danger);
  border-radius: 50%;
}

.cs-proto-switcher {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 1002;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.cs-proto-switcher-label {
  font-size: var(--fs-12);
  color: var(--bg);
  margin-right: 4px;
  white-space: nowrap;
}
.cs-proto-switcher-btn {
  font-size: var(--fs-12);
  padding: 6px 10px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--bg);
  cursor: pointer;
  white-space: nowrap;
}
.cs-proto-switcher-btn-active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 600;
}