/* "The arc" — chaos → order → judgment → dispatch.
 * A faithful vanilla port of the Spor "Chaos to Order" timeline animation
 * (originally a React/JSX design). Built on the Spor tokens: OKLCH only,
 * one glacial-teal voice, mono for figures, status as bound triples.
 * The scene is drawn entirely by chaos.js into .spx-board; this file is the
 * frame, the playback chrome, and the no-JS fallback. */

.spx-figure { display: flex; flex-direction: column; gap: 14px; margin: 0; }

/* fixed 16:9 artboard, scaled to fit the column by chaos.js */
.spx-frame {
  position: relative; width: 100%; aspect-ratio: 1920 / 1080;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-3); overflow: hidden;
}
.spx-board { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; transform-origin: top left; }

/* no-JS / pre-init fallback — the arc as static text, on tokens.
 * chaos.js hides this the moment it mounts the scene. */
.spx-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 5% 7%; background: var(--bg);
}
.spx-stages {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.spx-stages li {
  display: flex; flex-direction: column; gap: 5px; min-width: 9em;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 12px 14px;
}
.spx-stages li + li { position: relative; }
.spx-stages li + li::before {
  content: "\2192"; position: absolute; left: -11px; top: 50%; transform: translate(-50%, -50%);
  color: var(--mut); font-family: var(--mono);
}
.spx-stage-k {
  font-family: var(--mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
}
.spx-stage-v { font-size: var(--text-sm); color: var(--fg); }

/* playback chrome — restart · play/pause · scrubber · time */
.spx-controls { display: flex; align-items: center; gap: 12px; }
.spx-cbtn {
  width: 30px; height: 30px; flex: 0 0 auto; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-2);
  color: var(--fg); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.spx-cbtn:hover { border-color: var(--accent); color: var(--accent); }
.spx-time { font-family: var(--mono); font-size: var(--text-xs); color: var(--mut); font-variant-numeric: tabular-nums; }
.spx-time.is-cur { color: var(--fg); min-width: 58px; text-align: right; }
.spx-track { flex: 1; height: 22px; position: relative; cursor: pointer; display: flex; align-items: center; touch-action: none; }
.spx-track-rail { position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--line); }
.spx-track-fill { position: absolute; left: 0; width: 0; height: 4px; border-radius: 2px; background: var(--accent); }
.spx-track-handle { position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-left: -6px; margin-top: -6px; border-radius: 50%; background: var(--fg); }
.spx-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-1); }

.spx-caption { font-family: var(--mono); font-size: var(--text-xs); color: var(--mut); line-height: 1.5; max-width: 60em; }

@media (max-width: 680px) {
  .spx-time:not(.is-cur) { display: none; }
}