/* 3D scene of the machining-code viewer (nc/scene). Lives inside #nc-viewport.
   Overlay layout (viewer-client-api.md): top-left status chips (shell), top-right view cube (here),
   bottom-left legend (here), bottom-centre transport (player), bottom-right toasts (shell). */

.nc-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* The scene reads this computed colour for the WebGL clear colour. */
  background: var(--nc-viewport-bg, #e8ecf1);
  /* Shell tokens (nc_viewer.css) first; the literals are fallbacks for a bare page. */
  --nc-scene-font: var(--nc-font, system-ui, -apple-system, "Segoe UI", sans-serif);
  --nc-scene-fg: var(--nc-text, #172033);
  --nc-scene-muted: var(--nc-text-dim, #566377);
  --nc-scene-accent: var(--nc-accent, #0d73d9);
  --nc-scene-accent-fg: var(--nc-accent-contrast, #ffffff);
  --nc-scene-face: var(--nc-panel, #ffffff);
  /* Overlay borders keep >= 3:1 against the viewport (#6e7a8c on #e8ecf1 = 3.6:1). */
  --nc-scene-face-border: #6e7a8c;
  --nc-scene-face-hover: var(--nc-accent-soft, rgba(13, 115, 217, 0.11));
  --nc-scene-face-hover-fg: var(--nc-accent-strong, #0a5fb4);
  --nc-scene-tool-bg: var(--nc-panel, #ffffff);
  --nc-scene-tool-border: #6e7a8c;
  --nc-scene-chip-bg: color-mix(in srgb, var(--nc-panel, #ffffff) 92%, transparent);
  --nc-scene-chip-border: var(--nc-border, #d8e0e9);
  --nc-scene-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  --nc-scene-label-halo: var(--nc-viewport-bg, #ffffff);
  --nc-scene-ink: #0f172a;
  --nc-scene-axis-x: #c03a3a;
  --nc-scene-axis-y: #147b3a;
  --nc-scene-axis-z: #2f63c9;
  --nc-scene-dim: #475569;
  --nc-scene-ring: #0f172a;
}

:root[data-theme="dark"] .nc-scene {
  background: var(--nc-viewport-bg, #10151c);
  --nc-scene-fg: var(--nc-text, #e1e7ef);
  --nc-scene-muted: var(--nc-text-dim, #9aa6b8);
  --nc-scene-accent-fg: var(--nc-accent-contrast, #0b1220);
  --nc-scene-face: var(--nc-panel-2, #19202a);
  --nc-scene-face-border: #66758a; /* 3.7:1 on #10151c */
  --nc-scene-face-hover: var(--nc-accent-soft, rgba(61, 149, 242, 0.17));
  --nc-scene-face-hover-fg: var(--nc-accent-strong, #6aaff5);
  --nc-scene-tool-bg: var(--nc-panel, #141a22);
  --nc-scene-tool-border: #66758a;
  --nc-scene-chip-bg: color-mix(in srgb, var(--nc-panel, #141a22) 92%, transparent);
  --nc-scene-chip-border: var(--nc-border, #29323e);
  --nc-scene-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  --nc-scene-label-halo: var(--nc-viewport-bg, #000000);
  --nc-scene-ink: #ffffff;
  --nc-scene-axis-x: #f07474;
  --nc-scene-axis-y: #4cc38a;
  --nc-scene-axis-z: #6ea8ff;
  --nc-scene-dim: #a7b3c4;
  --nc-scene-ring: #ffffff;
}

/* Fallbacks only (zero specificity): keep the app's empty message and the player's transport above the canvas. */
:where(#nc-viewport > .nc-empty),
:where(#nc-viewport > #nc-transport) {
  position: relative;
  z-index: 1;
}

.nc-scene-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  outline: none;
}

/* ------------------------------------------------------------------ labels projected from 3D */

.nc-scene-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.nc-scene-content-labels {
  position: absolute;
  inset: 0;
}

.nc-scene-axis-label {
  position: absolute;
  left: 0;
  top: 0;
  margin: -6px 0 0 -4px;
  font: var(--nc-fw-semibold, 600) var(--nc-fs-sm, 12px) / 1 var(--nc-scene-font);
  text-shadow: 0 0 3px var(--nc-scene-label-halo), 0 0 2px var(--nc-scene-label-halo);
  will-change: transform;
}

.nc-scene-axis-label.is-x { color: var(--nc-scene-axis-x); }
.nc-scene-axis-label.is-y { color: var(--nc-scene-axis-y); }
.nc-scene-axis-label.is-z { color: var(--nc-scene-axis-z); }

.nc-scene-tag {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  font: var(--nc-fw-semibold, 600) var(--nc-fs-sm, 12px) / 1.2 var(--nc-scene-font);
  font-variant-numeric: tabular-nums;
  color: var(--nc-scene-dim);
  text-shadow: 0 0 3px var(--nc-scene-label-halo), 0 0 2px var(--nc-scene-label-halo), 0 0 1px var(--nc-scene-label-halo);
  will-change: transform;
}

.nc-scene-tag[hidden] { display: none; }

/* R3-13: a chip behind the dimension text, so the dimension line does not run through it. */
.nc-scene-tag.is-dim {
  translate: -50% -50%;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--nc-scene-chip-bg);
  text-shadow: none;
}

/* Side views: the length/width chip goes under the panel edge instead of covering it (R3-13). */
.nc-scene-tag.is-dim.is-below,
.nc-scene-tag.is-origin.is-below {
  translate: -50% 8px;
}

/* During playback the labels right next to the marker step back (NP-07). */
.nc-scene-tag.is-faded {
  opacity: 0.3;
}

.nc-scene-tag.is-thickness {
  translate: 6px -50%;
}

.nc-scene-tag.is-origin {
  translate: calc(-100% - 6px) 4px;
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid var(--nc-scene-chip-border);
  background: var(--nc-scene-chip-bg);
  color: var(--nc-scene-fg);
  font-weight: 600;
  text-shadow: none;
}

.nc-scene-tag.is-banding {
  translate: -50% calc(-100% - 4px);
  padding: 0 4px;
  border-radius: 3px;
  border-left: 3px solid var(--banding, currentColor);
  background: var(--nc-scene-chip-bg);
  color: var(--nc-scene-fg);
  text-shadow: none;
}

.nc-scene-tag.is-origin.is-flip {
  translate: 6px 4px;
}

/* Orbit pivot: where a left-drag rotates about. */
.nc-scene-pivot {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nc-scene-accent);
  box-shadow: 0 0 0 2px var(--nc-scene-label-halo);
}

/* ------------------------------------------------------------------ playback position marks
   One colour + one outline for "where the machine is" (PLAYBACK_COLORS, set from JS per theme):
   ring = the colour that stands out on this theme, halo = the other one (RP-03/14). */

.nc-scene-marks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.nc-scene-cross {
  stroke: var(--nc-scene-mark-ring, #111827);
  stroke-width: 1;
  opacity: 0.25;
}

.nc-scene-mark-plan .is-halo,
.nc-scene-mark-foot .is-halo {
  fill: none;
  stroke: var(--nc-scene-mark-halo, #f5b700);
  stroke-width: 4;
}

.nc-scene-mark-plan .is-ring {
  fill: color-mix(in srgb, var(--nc-scene-play, #f5b700) 35%, transparent);
  stroke: var(--nc-scene-mark-ring, #111827);
  stroke-width: 2;
}

.nc-scene-mark-foot .is-ring {
  fill: none;
  stroke: var(--nc-scene-mark-ring, #111827);
  stroke-width: 2;
}

/* Drill progress just outside the ring (r + 3), in the ring colour (NP-03). */
.nc-scene-mark-plan .is-progress {
  fill: none;
  stroke: var(--nc-scene-mark-ring, #111827);
  stroke-width: 2;
}

/* The op is on the far face: the marker ring is dashed like a hidden line (RP-04). */
.nc-scene-mark-plan.is-back .is-ring,
.nc-scene-mark-plan.is-back .is-halo {
  stroke-dasharray: 4 3;
}

.nc-scene-mark-plan .is-arms-halo {
  fill: none;
  stroke: var(--nc-scene-mark-halo, #f5b700);
  stroke-width: 4;
  stroke-linecap: square;
}

.nc-scene-mark-plan .is-arms {
  fill: none;
  stroke: var(--nc-scene-mark-ring, #111827);
  stroke-width: 2;
}

.nc-scene-mark-foot .is-plumb {
  stroke: var(--nc-scene-mark-ring, #111827);
  stroke-width: 1;
}

/* Beacon: 28 → 44 px, 1.2 s, while playing and 1.5 s after a seek or an op change. */
.nc-scene-beacon {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

.nc-scene-beacon::before {
  content: "";
  position: absolute;
  left: -14px;
  top: -14px;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border: 2px solid var(--nc-scene-mark-ring, #111827);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--nc-scene-mark-halo, #f5b700);
  animation: nc-scene-beacon 1200ms ease-out infinite;
}

.nc-scene-beacon[hidden] { display: none; }

@keyframes nc-scene-beacon {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(1.5714); opacity: 0; }
}

/* Start of the program before playback: 24 px ring with ▶ and the first op (RP-10). */
.nc-scene-start {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

.nc-scene-start[hidden] { display: none; }

.nc-scene-start::before {
  content: "";
  position: absolute;
  left: -12px;
  top: -12px;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border: 2px solid var(--nc-scene-play-outline, #111827);
  border-radius: 50%;
  background: var(--nc-scene-play, #f5b700);
  box-shadow: 0 0 0 1px var(--nc-scene-label-halo);
}

.nc-scene-start::after {
  content: "";
  position: absolute;
  left: -3px;
  top: -5px;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--nc-scene-play-outline, #111827);
}

.nc-scene-start-label,
.nc-scene-face-badge,
.nc-scene-locator-label {
  position: absolute;
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--nc-scene-chip-border);
  background: var(--nc-scene-chip-bg);
  color: var(--nc-scene-fg);
  font: var(--nc-fw-semibold, 600) var(--nc-fs-sm, 12px) / 1.2 var(--nc-scene-font);
  box-shadow: var(--nc-scene-shadow);
}

.nc-scene-start-label {
  left: 18px;
  top: -10px;
  /* A little more see-through than other chips: the first holes may sit under it (M3-03). */
  background: color-mix(in srgb, var(--nc-panel, #ffffff) 85%, transparent);
}

/* No room on the right (viewport edge, dimension chips): the label sits left of the marker. */
.nc-scene-start.is-left .nc-scene-start-label {
  left: auto;
  right: 18px;
}

.nc-scene-start.is-above .nc-scene-start-label {
  top: auto;
  bottom: 18px;
  left: 0;
  translate: -50% 0;
}

.nc-scene-start.is-below .nc-scene-start-label {
  top: 18px;
  left: 0;
  translate: -50% 0;
}

/* Far-face op: which face, next to the marker (RP-04). */
.nc-scene-face-badge {
  left: 0;
  top: 0;
  translate: 14px calc(-100% - 12px);
  border-color: var(--nc-scene-mark-ring, #111827);
}

.nc-scene-face-badge[hidden] { display: none; }

/* Tool off screen: an arrow chip on the edge, click = move to the tool (RP-07). */
.nc-scene-offscreen {
  position: absolute;
  left: -12px;
  top: -12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid var(--nc-scene-play-outline, #111827);
  border-radius: 50%;
  background: var(--nc-scene-play, #f5b700);
  color: var(--nc-scene-play-outline, #111827);
  box-shadow: var(--nc-scene-shadow);
  cursor: pointer;
  pointer-events: auto;
}

.nc-scene-offscreen svg {
  width: 16px;
  height: 16px;
  rotate: var(--angle, 0rad);
}

.nc-scene-offscreen[hidden] { display: none; }

.nc-scene-offscreen:focus-visible {
  outline: 2px solid var(--nc-scene-accent);
  outline-offset: 2px;
}

/* Arrival of a link move: 28 → 56 px over 500 ms (RP-05). */
.nc-scene-ping {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

.nc-scene-ping[hidden] { display: none; }

.nc-scene-ping::before {
  content: "";
  position: absolute;
  left: -14px;
  top: -14px;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border: 2px solid var(--nc-scene-mark-ring, #111827);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--nc-scene-mark-halo, #f5b700);
  animation: nc-scene-ping 500ms ease-out forwards;
}

@keyframes nc-scene-ping {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nc-scene-beacon::before {
    left: -16px;
    top: -16px;
    width: 32px;
    height: 32px;
    animation: none;
    opacity: 0.9;
  }

  .nc-scene-ping::before { animation: none; opacity: 0; }
}

/* Pulsing ring around a selected op that is only a few pixels on screen (I-06). */
.nc-scene-locator {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

.nc-scene-locator::before {
  content: "";
  position: absolute;
  left: -14px;
  top: -14px;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border: 2px solid var(--nc-scene-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--nc-scene-label-halo);
  animation: nc-scene-locate 600ms ease-out 2;
}

@keyframes nc-scene-locate {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.43); opacity: 0.6; }
}

/* Leader label of a small selected op ("#8 Ø6×12"), up and right of the ring (R3-07). */
.nc-scene-locator::after {
  content: "";
  position: absolute;
  left: 9px;
  top: -10px;
  width: 12px;
  height: 1px;
  background: var(--nc-scene-accent);
  rotate: -45deg;
  transform-origin: left center;
}

.nc-scene-locator:not(:has(.nc-scene-locator-label))::after { display: none; }

.nc-scene-locator-label {
  left: 17px;
  top: -34px;
  border-color: var(--nc-scene-accent);
}

@media (prefers-reduced-motion: reduce) {
  .nc-scene-locator::before { animation: none; }
}

/* ------------------------------------------------------------------ view cube and view tools (top right) */

.nc-scene-nav {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 92px;
  user-select: none;
  -webkit-user-select: none;
}

.nc-scene[data-empty="true"] .nc-scene-nav {
  opacity: 0.55;
}

.nc-scene-cube {
  position: relative;
  width: 88px;
  height: 88px;
}

.nc-scene-cube-axes {
  position: absolute;
  inset: 0;
  width: 88px;
  height: 88px;
  overflow: visible;
  pointer-events: none;
}

.nc-scene-cube-axes line {
  stroke-width: 2;
  stroke-linecap: round;
}

.nc-scene-cube-axes text {
  font: 700 10px/1 var(--nc-scene-font);
  text-anchor: middle;
  dominant-baseline: central;
  stroke: none;
}

.nc-scene-cube-axes .is-x { stroke: var(--nc-scene-axis-x); fill: var(--nc-scene-axis-x); }
.nc-scene-cube-axes .is-y { stroke: var(--nc-scene-axis-y); fill: var(--nc-scene-axis-y); }
.nc-scene-cube-axes .is-z { stroke: var(--nc-scene-axis-z); fill: var(--nc-scene-axis-z); }
.nc-scene-cube-axes text.is-x,
.nc-scene-cube-axes text.is-y,
.nc-scene-cube-axes text.is-z { stroke: none; }

.nc-scene-cube-body {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.nc-scene-cube-face {
  position: absolute;
  left: -26px;
  top: -26px;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--nc-scene-face-border);
  border-radius: 2px;
  background: var(--nc-scene-face);
  color: var(--nc-scene-fg);
  font: var(--nc-fw-semibold, 600) var(--nc-fs-sm, 12px) / 1 var(--nc-scene-font);
  letter-spacing: -0.02em;
  cursor: pointer;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.nc-scene-cube-face:hover {
  background: var(--nc-scene-face-hover);
  color: var(--nc-scene-face-hover-fg);
}

.nc-scene-cube-face:focus-visible {
  background: var(--nc-scene-face-hover);
  color: var(--nc-scene-face-hover-fg);
  outline: 2px solid var(--nc-scene-accent);
  outline-offset: -2px;
}

/* View lock (top/bottom): only the top/bottom faces answer; the locked face is marked. */
.nc-scene-cube-face:disabled {
  cursor: default;
  color: var(--nc-scene-muted);
}

.nc-scene-cube-face:disabled:hover {
  background: var(--nc-scene-face);
  color: var(--nc-scene-muted);
}

.nc-scene-cube-face[aria-pressed="true"] {
  background: var(--nc-scene-accent);
  color: var(--nc-scene-accent-fg);
}

.nc-scene-lock-badge {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid var(--nc-scene-accent);
  border-radius: 4px;
  background: var(--nc-scene-accent);
  color: var(--nc-scene-accent-fg);
  cursor: pointer;
  box-shadow: var(--nc-scene-shadow);
}

.nc-scene-lock-badge[hidden] { display: none; }

.nc-scene-lock-badge:focus-visible {
  outline: 2px solid var(--nc-scene-accent);
  outline-offset: 2px;
}

.nc-scene-segment-button:disabled,
.nc-scene-segment-button:disabled:hover {
  cursor: default;
  color: var(--nc-scene-fg);
  opacity: 0.55;
}

.nc-scene-tools,
.nc-scene-tools-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
}

.nc-scene-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid var(--nc-scene-tool-border);
  border-radius: 6px;
  background: var(--nc-scene-tool-bg);
  color: var(--nc-scene-fg);
  cursor: pointer;
  box-shadow: var(--nc-scene-shadow);
}

.nc-scene-tool:hover {
  border-color: var(--nc-scene-face-hover-fg);
  color: var(--nc-scene-face-hover-fg);
}

.nc-scene-tool:focus-visible,
.nc-scene-segment-button:focus-visible,
.nc-scene-legend-item:focus-visible,
.nc-scene-legend-toggle:focus-visible {
  outline: 2px solid var(--nc-scene-accent);
  outline-offset: 2px;
}

.nc-scene-tool:disabled {
  opacity: 0.55;
  cursor: default;
}

.nc-scene-tool.is-workpiece[data-mode="xray"] svg { stroke-dasharray: 2 1.6; }
.nc-scene-tool.is-workpiece[data-mode="solid"] svg { fill: currentColor; fill-opacity: 0.35; }

/* Projection as a two-state segment: [원근 | 직교] (D-17). */
.nc-scene-segment {
  display: flex;
  flex: 1;
  height: 28px;
  box-sizing: border-box;
  border: 1px solid var(--nc-scene-tool-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--nc-scene-tool-bg);
  box-shadow: var(--nc-scene-shadow);
}

.nc-scene-segment-button {
  flex: 1;
  min-width: 24px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--nc-scene-muted);
  font: var(--nc-fw-medium, 500) var(--nc-fs-sm, 12px) / 1 var(--nc-scene-font);
  cursor: pointer;
}

.nc-scene-segment-button + .nc-scene-segment-button {
  border-left: 1px solid var(--nc-scene-tool-border);
}

.nc-scene-segment-button:hover {
  color: var(--nc-scene-face-hover-fg);
}

.nc-scene-segment-button[aria-pressed="true"] {
  background: var(--nc-scene-accent);
  color: var(--nc-scene-accent-fg);
  font-weight: 600;
}

/* ------------------------------------------------------------------ legend (bottom left) */

.nc-scene-legend {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  max-width: calc(100% - 20px - 110px);
  padding: 3px 8px 3px 3px;
  box-sizing: border-box;
  border: 1px solid var(--nc-scene-chip-border);
  border-radius: 8px;
  background: var(--nc-scene-chip-bg);
  box-shadow: var(--nc-scene-shadow);
  color: var(--nc-scene-fg);
  font: var(--nc-fw-medium, 500) var(--nc-fs-sm, 12px) / 1.2 var(--nc-scene-font);
}

.nc-scene-legend[hidden] { display: none; }

.nc-scene-legend[data-collapsed="true"] {
  padding-right: 3px;
}

.nc-scene-legend-toggle {
  flex: none;
  min-height: 24px;
  margin: 0;
  padding: 0 7px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--nc-scene-muted);
  font: var(--nc-fw-semibold, 600) var(--nc-fs-sm, 12px) / 1 var(--nc-scene-font);
  cursor: pointer;
}

.nc-scene-legend-toggle::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(1px) rotate(45deg);
}

.nc-scene-legend-toggle[aria-expanded="true"]::after {
  transform: translateY(-1px) rotate(-135deg);
}

.nc-scene-legend-toggle:hover {
  background: var(--nc-hover, rgba(23, 32, 51, 0.055));
  color: var(--nc-scene-fg);
}

.nc-scene-legend-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  min-width: 0;
}

.nc-scene-legend-items[hidden] { display: none; }

.nc-scene-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}

button.nc-scene-legend-item {
  padding: 0 5px;
  margin: 0 -5px;
  border-radius: 5px;
  cursor: pointer;
}

button.nc-scene-legend-item:hover {
  background: var(--nc-hover, rgba(23, 32, 51, 0.055));
  color: var(--nc-scene-face-hover-fg);
}

button.nc-scene-legend-item[aria-pressed="false"] {
  color: var(--nc-scene-muted);
}

button.nc-scene-legend-item.is-strike[aria-pressed="false"] > span:last-child {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.nc-scene-legend-sample {
  position: relative;
  flex: none;
  display: inline-block;
  width: 18px;
  height: 10px;
  --sample: var(--nc-scene-fg);
}

.nc-scene-legend-item {
  position: relative;
}

.nc-scene-legend-sample.is-cut::before,
.nc-scene-legend-sample.is-rapid::before,
.nc-scene-legend-sample.is-link::before,
.nc-scene-legend-sample.is-selected::before,
.nc-scene-legend-sample.is-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
}

.nc-scene-legend-sample.is-cut::before {
  height: 2px;
  margin-top: -1px;
  background: var(--sample);
}

.nc-scene-legend-sample.is-rapid::before {
  height: 0;
  border-top: 1px dashed var(--sample);
  opacity: 0.85;
}

.nc-scene-legend-sample.is-link::before {
  height: 0;
  border-top: 1px dotted var(--sample);
  opacity: 0.6;
}

/* Selection = the path's own colour, heavier, with an ink outline: shown neutral here. */
.nc-scene-legend-sample.is-selected::before {
  height: 3px;
  margin-top: -1.5px;
  background: var(--nc-scene-face);
  box-shadow: 0 0 0 1px var(--nc-scene-ink);
}

/* Selected code line/segment: amber with a dark outline, like the 3D highlight. */
.nc-scene-legend-sample.is-line::before {
  height: 4px;
  margin-top: -2px;
  background: var(--sample);
  box-shadow: 0 0 0 1px var(--sample-halo, #ffffff), 0 0 0 2px color-mix(in srgb, var(--nc-scene-fg) 35%, transparent);
}

/* Hole as drawn (R3-05/22): 2 px ring, 55 % fill, 1 px ink outline. */
.nc-scene-legend-sample.is-hole {
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 2px solid var(--sample);
  border-radius: 50%;
  background: color-mix(in srgb, var(--sample) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--nc-scene-ink) 50%, transparent);
}

/* Far face: dashed path + hollow solid hole with a halo (R3-06). */
.nc-scene-legend-sample.is-back::before {
  content: "";
  position: absolute;
  left: 0;
  width: 10px;
  top: 50%;
  border-top: 2px dashed var(--sample);
  margin-top: -1px;
  opacity: 0.6;
}

.nc-scene-legend-sample.is-back::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  box-sizing: border-box;
  border: 2px solid var(--sample);
  border-radius: 50%;
  opacity: 0.85;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--nc-scene-face) 60%, transparent);
}

.nc-scene-legend-sample.is-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--sample);
}

/* Edge processing as drawn: a thin dotted line in its own bronze. */
.nc-scene-legend-sample.is-edge::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -1px;
  border-top: 2px dotted var(--sample);
}

/* A machining with no drawing (external file, NC code): the document mark. */
.nc-scene-legend-sample.is-ref {
  width: 12px;
  height: 14px;
  background: no-repeat center / 12px 14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14' fill='none' stroke='%2364748b' stroke-width='1.2'%3E%3Cpath d='M1.5 1.5h6l3 3v8h-9z'/%3E%3Cpath d='M7.5 1.5v3h3'/%3E%3Cpath d='M3.5 7.5h5M3.5 10h5'/%3E%3C/svg%3E");
}

/* Reference mark in the scene: a small neutral document chip at the op's position (not a warning). */
.nc-scene-ref {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border: 1px solid var(--nc-scene-chip-border);
  border-radius: 4px;
  background: var(--nc-scene-chip-bg);
  color: var(--nc-scene-fg);
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
}

.nc-scene-ref[hidden] { display: none; }

.nc-scene-ref svg {
  width: 11px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

.nc-scene-ref:hover { border-color: var(--nc-scene-face-border); }

.nc-scene-ref.is-selected {
  border-color: var(--nc-scene-ink);
  box-shadow: 0 0 0 1px var(--nc-scene-ink);
}

.nc-scene-ref.is-back,
.nc-scene-ref.is-dim { opacity: 0.55; }

.nc-scene-ref.is-selected.is-back { opacity: 1; }

.nc-scene-legend-short {
  display: none;
  font-variant-numeric: tabular-nums;
  color: var(--nc-scene-muted);
}

/* Too narrow for one line: icons only (the text stays in the tooltip and for screen readers). */
.nc-scene-legend.is-compact .nc-scene-legend-items {
  gap: 0 6px;
}

.nc-scene-legend.is-compact .nc-scene-legend-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Tool names stay readable in the compact legend: they are the key to the 'auto' colours (M3-10). */
.nc-scene-legend.is-compact .nc-scene-legend-item.is-keep .nc-scene-legend-label {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
}

.nc-scene-legend.is-compact .nc-scene-legend-short {
  display: inline;
}

.nc-scene-legend.is-compact .nc-scene-legend-item {
  gap: 3px;
}

/* ------------------------------------------------------------------ hover tooltip */

.nc-scene-tooltip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: min(360px, calc(100% - 16px));
  padding: 6px 8px;
  box-sizing: border-box;
  border: 1px solid var(--nc-scene-chip-border);
  border-radius: 6px;
  background: var(--nc-panel, #ffffff);
  box-shadow: var(--nc-shadow, 0 10px 28px rgba(15, 23, 42, 0.14));
  color: var(--nc-scene-fg);
  font: var(--nc-fs-sm, 12px) / 1.35 var(--nc-scene-font);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.nc-scene-tooltip[hidden] { display: none; }

.nc-scene-tooltip-title {
  font-weight: 600;
}

.nc-scene-tooltip-row {
  color: var(--nc-scene-muted);
  font-family: var(--nc-mono, ui-monospace, monospace);
  font-size: var(--nc-fs-sm, 12px);
}

.nc-scene-tooltip-note {
  color: var(--nc-scene-muted);
  font-size: var(--nc-fs-sm, 12px);
}

/* ------------------------------------------------------------------ nothing to draw (D-23, W-14) */

.nc-scene-note {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: min(26em, calc(100% - 32px));
  padding: 12px 16px;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border: 1px solid var(--nc-scene-chip-border);
  border-radius: 8px;
  background: var(--nc-scene-chip-bg);
  box-shadow: var(--nc-scene-shadow);
  color: var(--nc-scene-muted);
  font: var(--nc-fs-md, 13px) / 1.5 var(--nc-scene-font);
  text-align: center;
  pointer-events: none;
}

.nc-scene-note[hidden] { display: none; }

.nc-scene-note strong {
  color: var(--nc-scene-fg);
  font-size: var(--nc-fs-lg, 14px);
  font-weight: var(--nc-fw-semibold, 600);
}

/* Only rapids, or a panel without ops: keep the note small and out of the way (the panel stays
   visible), below the shell's top-left status chips. */
.nc-scene[data-nomotion="partial"] .nc-scene-note,
.nc-scene[data-nomotion="panel"] .nc-scene-note {
  top: 48px;
  transform: translateX(-50%);
  padding: 6px 12px;
  font-size: 12px;
}

.nc-scene-unsupported {
  position: absolute;
  inset: 0;
  margin: auto;
  height: fit-content;
  max-width: 28em;
  padding: 16px;
  text-align: center;
  color: var(--nc-scene-muted);
  font: 14px/1.5 var(--nc-scene-font);
}

/* Narrow viewports: the legend may use the full width (the cube sits above it). */
@media (max-width: 899px) {
  .nc-scene-legend {
    max-width: calc(100% - 20px);
  }
}

/* ------------------------------------------------------------------ op numbers (F3, showOpNumbers) */

.nc-scene-opnums {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.nc-scene-opnums[hidden] { display: none; }

.nc-scene-opnum {
  position: absolute;
  left: 0;
  top: 0;
  padding: 1px 4px 1px 3px;
  border: 1px solid var(--nc-scene-chip-border);
  border-left: 3px solid var(--op, var(--nc-scene-fg));
  border-radius: 3px;
  background: var(--nc-scene-chip-bg);
  color: var(--nc-scene-fg);
  font: var(--nc-fw-semibold, 600) var(--nc-fs-micro, 11px) / 1.25 var(--nc-scene-font);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  will-change: transform;
}

.nc-scene-opnum[hidden] { display: none; }

/* An op on the far face: its number steps back like its path. */
.nc-scene-opnum.is-back {
  opacity: 0.55;
  border-style: dashed;
  border-left-style: solid;
}

/* ------------------------------------------------------------------ measure (F4) */

.nc-scene[data-measure="true"] .nc-scene-canvas {
  cursor: crosshair;
}

.nc-scene-measure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.nc-scene-measure .is-line-halo {
  stroke: var(--nc-scene-label-halo);
  stroke-width: 4;
  stroke-linecap: round;
}

.nc-scene-measure .is-line {
  stroke: var(--nc-scene-accent);
  stroke-width: 2;
  stroke-linecap: round;
}

.nc-scene-measure .is-point {
  fill: var(--nc-scene-accent);
  stroke: var(--nc-scene-label-halo);
  stroke-width: 2;
}

/* The snap target under the cursor (hole centre, panel corner). */
.nc-scene-measure .is-snap {
  fill: none;
  stroke: var(--nc-scene-accent);
  stroke-width: 2;
  stroke-dasharray: 3 2;
}

.nc-scene-measure-label {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  translate: -50% calc(-100% - 8px);
  padding: 3px 7px;
  border: 1px solid var(--nc-scene-accent);
  border-radius: 5px;
  background: var(--nc-panel, #ffffff);
  color: var(--nc-scene-fg);
  box-shadow: var(--nc-scene-shadow);
  font: var(--nc-fw-medium, 500) var(--nc-fs-sm, 12px) / 1.3 var(--nc-scene-font);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

.nc-scene-measure-label[hidden] { display: none; }

.nc-scene-measure-label strong {
  font-size: var(--nc-fs-md, 13px);
  font-weight: var(--nc-fw-bold, 700);
}

/* Inferred stock (F9): a faint dashed chip at its far top corner. */
.nc-scene-tag.is-inferred {
  translate: 6px calc(-100% - 4px);
  padding: 1px 5px;
  border: 1px dashed var(--nc-scene-chip-border);
  border-radius: 3px;
  background: var(--nc-scene-chip-bg);
  color: var(--nc-scene-muted);
  font-weight: var(--nc-fw-medium, 500);
  text-shadow: none;
}

/* F6: beside a tall part in a top/bottom view the legend stands as a column on the right, under the
   view cube (one strip for both), instead of a row under the part. */
.nc-scene-legend.is-column {
  left: auto;
  right: 10px;
  flex-direction: column;
  align-items: stretch;
  max-width: 180px;
  padding: 3px 8px 6px 3px;
}

.nc-scene-legend.is-column .nc-scene-legend-items {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0;
  padding-left: 5px;
}

.nc-scene-legend.is-column .nc-scene-legend-item {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}