/* Lamport's logical clocks. Two processes, no shared wall clock. Each local event
   bumps a counter; each message carries its timestamp so the receiver jumps to one
   past the larger of the two. The result is a consistent "happened-before" order —
   and the punchline: two events with the SAME clock value can still be concurrent,
   because the clock only orders things causality has actually connected.
   Vanilla JS, no deps, no build. Dark theme. Palette shared with siblings:
   cyan = a message/causal link, green = the causal answer, amber-free, NO red. */

#lamport-clocks {
  --lc-msg: #5ac8fa;                 /* message / causal edge */
  --lc-conc: #b488ff;               /* concurrent (no causal order) — violet, not red */
  --lc-proc: rgba(255,255,255,0.5);
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  background: var(--color-bg-elevated, #111111);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  padding: clamp(16px, 3vw, 26px);
  margin: 2.5rem 0;
  color: var(--color-text-primary, #ffffff);
}

.lc-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.lc-explain {
  font-size: 0.9rem; line-height: 1.55; margin: 8px 0 18px;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
}

.lc-stage { width: 100%; height: auto; display: block; }

/* SVG element styles, toggled by class */
.lc-lane { stroke: rgba(255,255,255,0.18); stroke-width: 2; }
.lc-lanelabel { fill: var(--color-text-secondary, rgba(255,255,255,0.6)); font-family: var(--font-mono, monospace); font-size: 13px; }
.lc-evt { fill: var(--color-bg-elevated, #111); stroke: var(--lc-proc); stroke-width: 2; opacity: 0; transition: opacity 0.3s, stroke 0.3s; }
.lc-evt.show { opacity: 1; }
.lc-evt.concurrent { stroke: var(--lc-conc); }
.lc-evtlabel { fill: rgba(255,255,255,0.55); font-family: var(--font-mono, monospace); font-size: 12px; opacity: 0; transition: opacity 0.3s; }
.lc-evtlabel.show { opacity: 1; }
.lc-ts { fill: #fff; font-family: var(--font-mono, monospace); font-size: 14px; font-weight: 700; opacity: 0; transition: opacity 0.3s; text-anchor: middle; }
.lc-ts.show { opacity: 1; }
.lc-ts.concurrent { fill: var(--lc-conc); }
.lc-arrow { stroke: var(--lc-msg); stroke-width: 2; opacity: 0; transition: opacity 0.4s; }
.lc-arrow.show { opacity: 1; }
.lc-arrowhead { fill: var(--lc-msg); opacity: 0; transition: opacity 0.4s; }
.lc-arrowhead.show { opacity: 1; }

.lc-readout {
  margin-top: 16px; font-size: 0.9rem; line-height: 1.55; min-height: 2.6em;
  color: var(--color-text-secondary, rgba(255,255,255,0.78));
}
.lc-readout b { color: #fff; }
.lc-readout .lc-hl-msg { color: var(--lc-msg); font-weight: 650; }
.lc-readout .lc-hl-conc { color: var(--lc-conc); font-weight: 650; }

.lc-controls { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.lc-btn {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.88rem;
  border: 1px solid var(--color-border, rgba(255,255,255,0.15)); background: transparent;
  color: var(--color-text-primary, #fff); border-radius: 9px; padding: 9px 16px;
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}
.lc-btn:hover:not(:disabled) { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); }
.lc-btn:disabled { opacity: 0.45; cursor: default; }
.lc-btn--primary { background: var(--color-accent, #fff); border-color: var(--color-accent, #fff); color: #0b0b0b; font-weight: 650; }
.lc-btn--primary:hover:not(:disabled) { opacity: 0.9; background: var(--color-accent, #fff); }

.lc-noscript { font-size: 0.9rem; color: var(--color-text-secondary, rgba(255,255,255,0.65)); line-height: 1.6; }