/* ============================================================
   NEXORA · Robotic Lab / Physical component rendering
   ------------------------------------------------------------
   Visual-only finishing rules for the high-detail SVG hardware.
   Circuit layout and all other workspace chrome stay in
   robotic-lab.css.
   ============================================================ */

/* Crisp vector edges and legible technical labels at any zoom */
.rl-visual,
.rl-pins {
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

.rl-visual {
  pointer-events: none;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.16));
}

.rl-comp.selected .rl-visual {
  filter:
    drop-shadow(0 2px 1px rgba(0, 0, 0, 0.18))
    drop-shadow(0 0 7px rgba(47, 210, 242, 0.22));
}

/* Physical marks should not intercept the transparent hit target */
.pv-traces,
.pv-mounts,
.pv-fastener,
.pv-smd,
.pv-silkscreen,
.pv-header-socket,
.pv-bb-hole,
.pv-bb-rails,
.pv-bb-symbols,
.pv-bb-notch,
.pv-sonar {
  pointer-events: none;
}

/* Fine labels become especially crisp while zoomed in. */
.pv-pin-label,
.pv-bb-num,
.pcb-mini,
.pcb-chip,
.cmp-mini,
.cmp-val,
.cmp-lbl,
.bb-mini {
  paint-order: stroke fill;
  stroke: rgba(0, 0, 0, 0.12);
  stroke-width: 0.18px;
}

/* Preserve real material colors in light mode rather than tinting SVGs. */
[data-theme="light"] .rl-visual {
  filter: drop-shadow(0 2px 2px rgba(15, 23, 42, 0.14));
}

/* Pin rings are UI overlays; they remain visible over realistic hardware. */
.rl-pingroup .rl-pin-hit {
  transition: fill 0.14s ease;
}

.rl-pingroup:hover .rl-pin-hit {
  fill: rgba(47, 210, 242, 0.1);
}

.rl-pingroup:hover .rl-pin {
  filter: drop-shadow(0 0 4px rgba(47, 210, 242, 0.85));
}

.rl-pin.connected {
  filter: drop-shadow(0 0 3px rgba(61, 214, 140, 0.7));
}

/* Component name plates float below the physical package. */
.rl-comp-label {
  paint-order: stroke fill;
  stroke: var(--bg-page);
  stroke-width: 3px;
  stroke-linejoin: round;
  fill: var(--text-2);
}

/* Dense library thumbnails keep the silhouette readable. */
.rl-part-thumb {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.07), transparent 70%),
    rgba(255, 255, 255, 0.025);
}

.rl-part-thumb svg,
.rl-insp-thumb svg {
  overflow: visible;
  shape-rendering: geometricPrecision;
}

/* A selected component's educational detail card gets more room. */
.rl-insp-thumb {
  width: 66px;
  height: 52px;
  padding: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .pv-motor-shaft animateTransform {
    display: none;
  }
}