/* trace-mark — see trace-mark.js for the markup contract. */
.k-trace {
  --k-trace-line: var(--k-ink);
  --k-trace-guide: color-mix(in srgb, var(--k-ink) 22%, transparent);
  --k-trace-handle: color-mix(in srgb, var(--k-ink) 55%, transparent);
  --k-trace-point: var(--k-paper);
  --k-trace-accent: var(--k-accent);
  position: relative;
  color: var(--k-ink);
}
.k-trace__svg { display: block; width: 100%; height: auto; overflow: visible; }
.k-trace__shape { fill: var(--fill, currentColor); }
.k-trace[data-finish="neon"] .k-trace__shape {
  fill: none;
  stroke: var(--tube, currentColor);
  stroke-width: var(--k-trace-tube, 3.4);
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px var(--tube)) drop-shadow(0 0 14px color-mix(in srgb, var(--tube) 55%, transparent));
}

/* Construction layers (created by the script). --u is one CSS pixel in viewBox units. */
.k-trace__guides path, .k-trace__guides [data-guide], .k-trace__guides .k-trace__box {
  fill: none;
  stroke: var(--k-trace-guide);
  stroke-width: calc(var(--u, 1) * 1px);
}
.k-trace__guides .k-trace__box { stroke-dasharray: calc(var(--u, 1) * 4px) calc(var(--u, 1) * 4px); }
.k-trace__wire path {
  fill: none;
  stroke: var(--k-trace-line);
  stroke-width: calc(var(--u, 1) * var(--k-trace-hair, 1.4) * 1px);
  stroke-linejoin: round;
}
.k-trace__wire .is-accent {
  stroke: color-mix(in srgb, var(--k-trace-accent) calc(var(--k-trace-on, 0) * 100%), var(--k-trace-line));
  stroke-width: calc(var(--u, 1) * var(--k-trace-hair, 1.4) * (1 + var(--k-trace-on, 0)) * 1px);
}
.k-trace__points rect {
  fill: var(--k-trace-point);
  stroke: var(--k-trace-line);
  stroke-width: calc(var(--u, 1) * var(--k-trace-k, 1) * 1.2px);
}
.k-trace__handle line { stroke: var(--k-trace-handle); stroke-width: calc(var(--u, 1) * max(.6, var(--k-trace-k, 1)) * 1px); }
.k-trace__handle circle { fill: var(--k-trace-handle); }

/* Steps: the caption as progress bar. */
.k-trace__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.k-trace:not(.is-live) .k-trace__steps { display: none; }
/* Inactive steps are a muted colour, never faded with opacity: every state must stay readable (QA-L1). */
.k-trace__steps li { color: var(--k-trace-step, color-mix(in srgb, var(--k-ink) 62%, var(--k-paper))); transition: color .35s, background-color .35s, border-color .35s; }
.k-trace__steps li.is-on, .k-trace__steps li.is-done { color: var(--k-ink); }

/* Scrub mode: a tall element with a sticky stage. */
.k-trace[data-mode="scrub"].is-live, .k-trace:not([data-mode]).is-live { height: var(--k-trace-length, 320svh); }
.k-trace[data-mode="scrub"].is-live .k-trace__stage, .k-trace:not([data-mode]).is-live .k-trace__stage {
  position: sticky; top: var(--k-trace-top, 0); height: calc(100svh - var(--k-trace-top, 0px));
}