/* ACQ-VIZ-11d. Paths and the capture footprint beside a spring, well, or drain pick.
   Colours are theme tokens, so light and dark follow theme.css. */
.traceback {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--hx-border);
  border-radius: 8px;
  background: var(--hx-card, #fff);
  min-width: 0;
}
.traceback h3 { margin: 0 0 6px; font-size: 0.95rem; font-weight: 600; color: var(--hx-fg); }
.traceback p { margin: 4px 0; font-size: 13px; line-height: 1.45; }
.traceback-ask { font-size: 13px; }
.traceback-porosity { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }
.traceback-porosity input { width: 5.5rem; font: inherit; padding: 2px 6px; border: 1px solid var(--hx-border); border-radius: 6px; background: var(--hx-card, #fff); color: var(--hx-fg); }
.traceback-figure {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  margin-top: 8px;
  background: var(--hx-bg, #f4f7f8);
  border: 1px solid var(--hx-border-soft, var(--hx-border));
  border-radius: 6px;
}
.traceback-path { fill: none; stroke: var(--hx-accent, #176f86); stroke-width: 0.35; opacity: 0.85; }
.traceback-hull { fill: var(--hx-accent, #176f86); fill-opacity: 0.18; stroke: var(--hx-accent, #176f86); stroke-width: 0.4; }
.traceback-spring { fill: var(--hx-fail, #b33a3a); }
.traceback-progress { color: var(--hx-muted); }