/* Convex hull page — uses maxflow.css base */
.hull-page {
  display: grid;
  grid-template-columns: 1fr 380px;
  height: calc(100vh - 38px);
}
.hull-stage {
  position: relative;
  background:
    radial-gradient(circle at 1px 1px, oklch(0.85 0.01 80) 1px, transparent 1px) 0 0/24px 24px,
    var(--bg);
  overflow: hidden;
}
.hull-stage svg {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}
.hull-stage.running svg { cursor: default; }

.hull-point {
  cursor: grab;
}
.hull-point:active { cursor: grabbing; }
.hull-point circle {
  fill: var(--node-fill, var(--surface));
  stroke: var(--node-stroke, var(--ink));
  stroke-width: 1.5;
  transition: fill 0.18s, stroke 0.18s, r 0.18s;
}
.hull-point text {
  font-family: var(--label-font, 'system-ui', monospace);
  font-size: var(--node-font-size, 11px);
  font-weight: var(--node-font-weight, 500);
  fill: var(--node-text-color, var(--ink));
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
}
.hull-point.current circle { fill: var(--accent); stroke: var(--accent); }
.hull-point.current text { fill: white; }
.hull-point.in-stack circle { fill: var(--cool-soft); stroke: var(--cool); stroke-width: 2; }
.hull-point.popped circle { fill: oklch(0.93 0.02 30); stroke: oklch(0.7 0.1 30); }
.hull-point.on-hull circle { fill: var(--good-soft); stroke: var(--good); stroke-width: 2.5; }
.hull-point.candidate circle { fill: var(--accent-soft); stroke: var(--accent); }

.hull-line {
  fill: none;
  stroke: var(--edge-color, var(--cool));
  stroke-width: var(--edge-width-active, 2px);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hull-line.lower-saved { stroke: oklch(0.65 0.08 245); opacity: 0.7; }
.hull-line.complete { stroke: var(--good); stroke-width: 2.5; }

.hull-check-tri {
  fill: oklch(0.92 0.04 50 / 0.45);
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.hull-cross-label {
  font-family: 'system-ui', monospace;
  font-size: 13px;
  font-weight: 600;
  fill: var(--accent-deep);
  text-anchor: middle;
  pointer-events: none;
  user-select: none;
}

/* Vertical sweep line tracking the current point */
.hull-sweep {
  stroke: var(--cool);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0.55;
}
.hull-sweep-label {
  font-family: 'system-ui', monospace;
  font-size: 10px;
  fill: var(--cool);
  font-weight: 500;
  text-anchor: start;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hull-stack-display {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-family: 'system-ui', monospace;
  font-size: 12px;
}
.hull-stack-chip {
  background: var(--cool-soft);
  border: 1px solid var(--cool);
  color: oklch(0.32 0.1 245);
  border-radius: 4px;
  padding: 2px 7px;
}
.hull-stack-chip.current {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.cross-readout {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: 'system-ui', monospace;
  font-size: 12px;
  color: var(--ink-soft);
}
.cross-readout .val {
  font-size: 16px;
  font-weight: 600;
}
.cross-readout .val.pos { color: oklch(0.55 0.18 30); }
.cross-readout .val.neg { color: var(--good); }
.cross-readout .val.zero { color: var(--muted); }