/* moments.css — the balance beam for viz/moments.js (pure DOM). Weights are children of the beam,
   so they ride it as it tilts. */

.mo { display: flex; flex-direction: column; gap: 0.85rem; }
.mo-stage { position: relative; width: 100%; aspect-ratio: 16 / 8; min-height: 200px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.8rem; background: linear-gradient(180deg, #0c1220, #07090f); }

.mo-beam { position: absolute; left: 50%; top: 48%; width: 78%; height: 9px; transform: translate(-50%, -50%);
  transform-origin: 50% 50%; border-radius: 5px; background: linear-gradient(180deg, #cbd5e1, #64748b); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); transition: transform 0.25s cubic-bezier(.34,1.2,.64,1); }
.mo-beam::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; transform: translate(-50%, -50%); }
.mo-pivot { position: absolute; left: 50%; top: 48%; width: 0; height: 0; transform: translate(-50%, 3px);
  border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 30px solid #475569; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }

.mo-weight { position: absolute; top: 100%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.mo-wbox { width: calc(18px + var(--s, 1) * 14px); height: calc(18px + var(--s, 1) * 14px); border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45); }
.mo-w-l .mo-wbox { background: linear-gradient(180deg, #fb7185, #e11d48); }
.mo-w-r .mo-wbox { background: linear-gradient(180deg, #38bdf8, #0284c7); }
.mo-wlab { margin-top: 2px; font-size: 0.72rem; font-weight: 700; color: #cbd5e1; }

.mo-status { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); font-size: 0.82rem; font-weight: 600; color: #aebdce;
  background: rgba(6, 10, 18, 0.6); padding: 2px 9px; border-radius: 5px; }
.mo-status.mo-bal { color: #07121d; background: #34d399; }