/* ============================================================
   PepRecon — shared syringe draw guide styles
   Depends on shared.css theme tokens. Keep byte-identical across
   every tool that includes the syringe component.
   ============================================================ */

.syg { margin-top: 4px; }

.syg__cap {
  margin: 12px 0 3px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.syg__cap:first-child { margin-top: 0; }

.syg-svg {
  display: block;
  width: 100%;
  height: auto;
}

.syg-barrel {
  fill: var(--bg-subtle);
  stroke: var(--border-strong);
  stroke-width: 1;
}

/* Drawn solution: clearly visible in both themes (ticks sit above the barrel). */
.syg-fill { fill: var(--accent); fill-opacity: 0.42; }
.syg-fill--over { fill: var(--danger); fill-opacity: 0.42; }

.syg-tick { stroke: var(--border-strong); stroke-width: 1; }
.syg-tick--major { stroke: var(--text-muted); stroke-width: 1.4; }

/* Needle (left, 0 end) + plunger (right). */
.syg-needle { stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; }
.syg-part { fill: var(--text-muted); }
.syg-part-line { stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; }

.syg-lbl {
  fill: var(--text-muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  text-anchor: middle;
}

.syg-target { stroke: var(--accent); stroke-width: 1.5; }
.syg-target--bold { stroke-width: 2.5; }
.syg-target--over { stroke: var(--danger); }

.syg-cap {
  fill: var(--text-muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  text-anchor: end;
}
.syg-cap--left { text-anchor: start; }

.syg-callout { fill: var(--accent); }
.syg-callout--over { fill: var(--danger); }

.syg-callout-text {
  fill: var(--accent-text);
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-anchor: middle;
}