/* Polygon area page */

.poly-canvas {
  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;
}
.poly-canvas svg { width: 100%; height: 100%; display: block; cursor: crosshair; }
.poly-canvas.running svg { cursor: default; }

.poly-shape {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 0.45;
}
.poly-edge {
  stroke: var(--ink);
  stroke-width: 2;
  fill: none;
}
.poly-edge.current { stroke: var(--accent); stroke-width: 3.5; }
.poly-edge.processed { stroke: var(--good); }

.poly-triangle {
  fill: oklch(0.96 0.02 245);
  stroke: var(--cool);
  stroke-width: 1.5;
}
.poly-triangle.pos { fill: oklch(0.94 0.05 145 / 0.6); stroke: var(--good); }
.poly-triangle.neg { fill: oklch(0.92 0.08 25 / 0.5); stroke: oklch(0.55 0.18 25); }
.poly-triangle.current { stroke-width: 2.5; }

.poly-vertex circle {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 1.5;
  cursor: grab;
}
.poly-vertex circle:active { cursor: grabbing; }
.poly-vertex.fan-center circle { fill: var(--accent); stroke: var(--accent); }
.poly-vertex.current circle { fill: var(--cool); stroke: var(--cool); stroke-width: 2.5; }
.poly-vertex text {
  font-family: 'system-ui', monospace;
  font-size: 11px;
  font-weight: 600;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
}
.poly-vertex.fan-center text { fill: white; }
.poly-vertex.current text { fill: white; }

.shoelace-sum {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: 'system-ui', monospace;
  min-width: 160px;
}
.shoelace-sum .label {
  font-family: 'system-ui', sans-serif;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 600; display: block;
}
.shoelace-sum .val { font-size: 22px; font-weight: 600; color: var(--ink); }
.shoelace-sum .delta { color: var(--accent); font-size: 14px; }