/* Effects layer (js-effects.md). Everything here only styles elements created by JS. Tokens only. */

/* Cutter is an HTML dot over the strip (an SVG circle would be squashed by preserveAspectRatio="none") */
.toolpath__cutter { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--signal); pointer-events: none; }
.toolpath__cutter--parked { background: var(--surface-0); box-shadow: inset 0 0 0 2px var(--signal); }

/* Datum ruler on the left edge */
.ruler {
  position: fixed; top: 0; bottom: 0; left: 0; width: 14px; z-index: 40; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(to bottom, var(--ink-muted) 0 1px, transparent 1px 40px);
  background-size: 6px 100%, 12px 100%;
  background-repeat: no-repeat;
  border-right: var(--border);
}
.ruler__slider { position: absolute; left: 0; top: 0; width: 14px; height: 40px; background: var(--signal); }
.ruler__label { position: absolute; left: 20px; top: 12px; white-space: nowrap; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-muted); }
.ruler--animated .ruler__slider { transition: transform 80ms linear; }

/* Dot map with JS tooltips instead of overlapping labels */
.dotmap { position: relative; }
.dotmap--interactive .dotmap__point text { display: none; }
.dotmap__tip { position: absolute; transform: translate(-50%, calc(-100% - 14px)); background: var(--ink); color: var(--surface-0); padding: var(--space-1) var(--space-3); font-size: 0.75rem; white-space: nowrap; pointer-events: none; }

/* Compare machines */
.compare__bar { margin-bottom: var(--space-4); }
.compare__check { margin-right: var(--space-2); accent-color: var(--signal); vertical-align: middle; }
.compare__dialog { border: var(--border); background: var(--surface-0); color: var(--ink); padding: var(--space-5); max-width: min(960px, calc(100vw - 2 * var(--gutter))); }
.compare__dialog::backdrop { background: var(--grid-axis); }
.compare__dialog > button { float: right; margin-bottom: var(--space-3); }

@media (prefers-reduced-motion: reduce) {
  .ruler__slider { transition: none; }
}