/* Demo: clock-anatomy. Tokens only; layout primitives (.stepline, .callout,
   .demo-controls) come from ws.css. */

.clock-anatomy {
  display: flex;
  flex-direction: column;
  gap: var(--s5, 1.5rem);
}

.clock-anatomy__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.clock-anatomy__steps .stepline__step {
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.clock-anatomy__steps .stepline__step.is-here {
  opacity: 1;
}

.clock-anatomy__steps .stepline__step.is-here .stepline__marker {
  /* ws.css hardcodes the money line's ring colour here; use this page's own line. */
  box-shadow: 0 0 0 4px var(--line), 0 0 0 6px var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .clock-anatomy__steps .stepline__step {
    transition: none;
  }
}

.clock-anatomy__detail {
  margin: 0;
}