/* viz/collision_dom.css — the momentum visualization for the IGCSE Momentum lesson
   (collision_dom, built by web/static/js/viz/collision_dom.js): DOM/CSS-rendered trolleys
   (gradient bodies, box-shadow, pseudo-element wheels) + CSS-triangle momentum arrows.
   Lazy-loaded only on lessons that use this type. `.cxd-*`/`.lx-cx-*` namespaces (self-
   contained); reuses the shared `.lx-viz-*` controls from 17-learn.css. (This module predates
   the `_shared.css` `.lv-*` chrome and keeps its own classes — relocated here verbatim.)
   The "total momentum" accent + the chrome bullets/glow use the same MUTED steel-blue as
   `_shared.css` (cart A = cyan, cart B = amber, total = steel-blue, result = green). */

.cxd { display: flex; flex-direction: column; gap: 0.95rem; }

/* short how-to bullets above the stage */
.cxd-howto { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
.cxd-howto li { position: relative; padding-left: 1.25rem; color: #cbd5e1; font-size: 0.95rem; line-height: 1.45; }
.cxd-howto li::before {
  content: ""; position: absolute; left: 0.25rem; top: 0.66em;
  width: 0.4rem; height: 0.4rem; border-radius: 999px; background: #8fa8cf; transform: translateY(-50%);
}
.cxd-howto b { color: #eef7ff; font-weight: 700; }

/* readable body text (the small uppercase labels stay small) */
.cxd .lx-viz-control-top { font-size: 0.92rem; }

/* ── stage + track ───────────────────────────────────────────────────────────────── */
.cxd-stage {
  border: 1px solid rgba(104, 130, 176, 0.16);
  border-radius: 0.8rem;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0.12)),
    radial-gradient(circle at 50% 16%, rgba(48, 78, 142, 0.14), transparent 46%);
  padding: 0.7rem 0.85rem 0.55rem;
}
.cxd-track {
  position: relative;
  height: 8.6rem;
  border-radius: 0.7rem;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 12.5% 100%,
    radial-gradient(circle at 50% 30%, rgba(103, 232, 249, 0.07), transparent 55%);
}
.cxd-rail {
  position: absolute; left: 4%; right: 4%; bottom: 2rem; height: 0.22rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03));
  box-shadow: 0 0 0.7rem rgba(34, 211, 238, 0.22);
}
.cxd-center {
  position: absolute; left: 50%; top: 1rem; bottom: 1.7rem; width: 1px;
  background: rgba(103, 232, 249, 0.4); transform: translateX(-50%);
}

/* ── trolleys (gradient body + box-shadow + pseudo-element wheels) ────────────────── */
.cxd-cart {
  position: absolute; bottom: 2rem; height: 3.4rem;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.6rem 0.6rem 0.42rem 0.42rem;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.1rem;
  color: #fff; font-weight: 800; font-size: 1.05rem; line-height: 1;
}
.cxd-kg {
  font-size: 0.64rem; font-weight: 600; line-height: 1;
  color: rgba(255, 255, 255, 0.78); font-variant-numeric: tabular-nums;
}
.cxd-cart::before, .cxd-cart::after {
  content: ""; position: absolute; bottom: -0.42rem;
  width: 0.72rem; height: 0.72rem; border-radius: 999px;
  background: #0b1220; border: 2px solid rgba(226, 232, 240, 0.6);
}
.cxd-cart::before { left: 0.55rem; }
.cxd-cart::after { right: 0.55rem; }
.cxd-cart-a { background: linear-gradient(160deg, rgba(34, 211, 238, 0.4), rgba(14, 165, 233, 0.16)); }
.cxd-cart-b { background: linear-gradient(160deg, rgba(251, 146, 60, 0.38), rgba(244, 63, 94, 0.16)); }
.cxd-cart.cxd-joined { border-color: rgba(52, 211, 153, 0.55); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 0 0.7rem rgba(52, 211, 153, 0.25); }

/* ── momentum arrows ──────────────────────────────────────────────────────────────
   Each arrow is ONE clipped shape (shaft flaring into a sharp head) drawn by ::before, so the
   point is genuinely pointy and its tip lands exactly at the element's end (= the target x /
   guide / tip-to-tail junction). The element itself isn't clipped, so the value-label child
   still shows. The head is 0.65rem, capped at 40% of the arrow so short arrows stay valid. */
.cxd-arrow {
  position: absolute;
  height: 0.78rem;
  transition: opacity 0.15s ease;
}
.cxd-arrow::before {                       /* points RIGHT; tip at 100% (the element's end) */
  content: ""; position: absolute; inset: 0; background: var(--c);
  clip-path: polygon(0 33%, max(60%, calc(100% - 0.65rem)) 33%, max(60%, calc(100% - 0.65rem)) 0,
                     100% 50%, max(60%, calc(100% - 0.65rem)) 100%, max(60%, calc(100% - 0.65rem)) 67%, 0 67%);
}
.cxd-arrow.cxd-left::before {              /* points LEFT; tip at 0% */
  clip-path: polygon(100% 33%, min(40%, 0.65rem) 33%, min(40%, 0.65rem) 0,
                     0 50%, min(40%, 0.65rem) 100%, min(40%, 0.65rem) 67%, 100% 67%);
}
.cxd-arrow-a { --c: #22d3ee; }
.cxd-arrow-b { --c: #fb923c; }
.cxd-arrow-t { --c: #8fa8cf; }
.cxd-track .cxd-arrow { top: 1.15rem; }            /* scene arrows float above the carts */
.cxd-aval {
  position: absolute; left: 50%; bottom: 0.95rem; transform: translateX(-50%);
  font-size: 0.74rem; font-weight: 700; color: #e8eef6;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

.cxd-flash {
  position: absolute; top: 52%; left: 50%; width: 3rem; height: 3rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 224, 71, 0.85), transparent 68%);
  transform: translate(-50%, -50%) scale(0); pointer-events: none;
}
.cxd-phase {
  margin-top: 0.4rem; color: #8aa0b6; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}

/* Layout classes the DOM markup reuses, kept here so this stylesheet is self-contained.
   (`.lx-viz-*` controls/buttons + `.lx-readout-*` cards still come from 17-learn.css.) */
.lx-cx-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* ── controls grouped by trolley (so it's clear which sliders pair up) ────────────── */
.cxd-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.cxd-cgroup {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 0.65rem 0.8rem 0.75rem; border-radius: 0.65rem; border: 1px solid;
}
.cxd-cgroup-a { border-color: rgba(34, 211, 238, 0.38); background: rgba(34, 211, 238, 0.06); }
.cxd-cgroup-b { border-color: rgba(251, 146, 60, 0.34); background: rgba(251, 146, 60, 0.06); }
.cxd-cghead { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 0.92rem; color: #e8eef6; }
.cxd-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.3rem; height: 1.3rem; border-radius: 999px;
  font-weight: 800; font-size: 0.78rem; color: #07121d;
}
.cxd-cgroup-a .cxd-chip { background: #22d3ee; }
.cxd-cgroup-b .cxd-chip { background: #fb923c; }
.lx-cx-bartitle { color: #dbe4ef; font-size: 0.95rem; font-weight: 650; }
.lx-cx-bartitle span { color: #8aa0b6; font-weight: 500; }
.lx-cx-readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.lx-cx-eq { margin: 0; color: #aebdce; font-size: 0.95rem; line-height: 1.55; font-variant-numeric: tabular-nums; }
.lx-cx-eq b { color: #eef7ff; font-weight: 700; }
.lx-cx-note {
  margin: 0; padding: 0.5rem 0.7rem;
  border: 1px solid rgba(251, 191, 36, 0.32); border-radius: 0.55rem;
  background: rgba(251, 191, 36, 0.08); color: #fcd34d; font-size: 0.82rem;
}
@media (max-width: 600px) { .cxd-controls { grid-template-columns: 1fr; } }
@media (max-width: 440px) { .lx-cx-readout { grid-template-columns: 1fr; } }

/* ── arrow-addition strip: before (A+B tip-to-tail) / after (the single total arrow) ──
   One continuous zero line + one dashed guide span BOTH lanes, so "before and after end on
   the same line" is one exact line, not per-row approximations. */
.cxd-strip { display: flex; flex-direction: column; gap: 0.45rem; }
.cxd-ta { color: #67e8f9; font-weight: 700; }
.cxd-tb { color: #fdba74; font-weight: 700; }
.cxd-diagram { display: flex; gap: 0.55rem; }
.cxd-dlabels { display: flex; flex-direction: column; gap: 0.35rem; }
.cxd-dlabels .cxd-rowlab {
  display: flex; align-items: center; justify-content: flex-end;
  height: 2.6rem;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: #91a2b6;
}
.cxd-dlabels .cxd-rowlab-after { height: 1.4rem; color: #a9c0e2; }
.cxd-lanes { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.cxd-lane { position: relative; border-radius: 0.4rem; background: rgba(255, 255, 255, 0.04); }
.cxd-lane-two { height: 2.6rem; }
.cxd-lane-one { height: 1.4rem; }
.cxd-lane.cxd-dim { opacity: 0.45; }
.cxd-lane .cxd-arrow { top: 50%; transform: translateY(-50%); }
.cxd-lane-two .cxd-sa-a { top: 30%; }
.cxd-lane-two .cxd-sa-b { top: 70%; }
.cxd-zero {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; z-index: 1;
  background: rgba(255, 255, 255, 0.28); transform: translateX(-0.5px);
}
.cxd-guide {
  position: absolute; top: -0.25rem; bottom: -0.25rem; width: 0; z-index: 1;
  border-left: 1px dashed rgba(143, 168, 207, 0.75);
}
.cxd-link {
  position: absolute; top: 0.18rem; bottom: 0.18rem; width: 0;
  border-left: 1px dotted rgba(255, 255, 255, 0.45); transition: opacity 0.15s ease;
}
.cxd-dgtot { align-self: center; color: #a9c0e2; font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }

/* readout cards — colour-coded to the trolleys / total / result; value-first for scanning,
   with the same accent glow as the shared `.lv-rcard`. */
.cxd-rcard {
  position: relative; overflow: hidden;
  min-height: 4rem;
  padding: 0.6rem 0.8rem 0.65rem 1rem;
  border-radius: 0.7rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 22px var(--rc-glow, rgba(40, 72, 140, 0.18)), 0 3px 7px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.cxd-rcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0.28rem; background: var(--rc); box-shadow: 0 0 12px var(--rc); }
.cxd-rc-a { --rc: #22d3ee; --rc-glow: rgba(34, 211, 238, 0.2); }
.cxd-rc-b { --rc: #fb923c; --rc-glow: rgba(251, 146, 60, 0.22); }
.cxd-rc-t { --rc: #8fa8cf; --rc-glow: rgba(40, 72, 140, 0.28); background: linear-gradient(180deg, rgba(104, 130, 176, 0.18), rgba(104, 130, 176, 0.05)); border-color: rgba(104, 130, 176, 0.34); }
.cxd-rc-after { --rc: #34d399; --rc-glow: rgba(52, 211, 153, 0.2); }
.cxd-rlabel { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #93a3b8; }
.cxd-rval { display: block; margin-top: 0.16rem; font-weight: 750; font-size: 1.08rem; line-height: 1.15; color: #eef7ff; font-variant-numeric: tabular-nums; }
.cxd-rc-a .cxd-rval { color: #a5f3fc; }
.cxd-rc-b .cxd-rval { color: #fed7aa; }
.cxd-rc-t .cxd-rval { color: #cdd9f0; }
.cxd-rc-after .cxd-rval { color: #a7f3d0; }
.cxd-rsub { display: block; margin-top: 0.12rem; font-size: 0.74rem; color: #8a9bb0; font-variant-numeric: tabular-nums; }

/* equation terms colour-matched to the carts / arrows / slider boxes */
.cxd-eq-a { color: #67e8f9; }
.cxd-eq-b { color: #fdba74; }
.cxd-eq-t { color: #a9c0e2; }
.cxd-eq-ok { color: #6ee7b7; font-weight: 650; }

/* impact pulse — the "still equal!" moment (no animation under reduced motion) */
.cxd-hit .cxd-guide { animation: cxd-guide-flash 0.8s ease; }
.cxd-hit .cxd-dgtot,
.cxd-hit .cxd-rc-t { animation: cxd-pop 0.8s ease; }
@keyframes cxd-guide-flash {
  0%, 55% { border-color: rgb(199, 211, 234); box-shadow: 0 0 8px rgba(143, 168, 207, 0.85); }
}
@keyframes cxd-pop { 30% { transform: scale(1.05); } }

@media (prefers-reduced-motion: reduce) {
  .cxd-arrow, .cxd-link { transition: none; }
  .cxd-hit .cxd-guide, .cxd-hit .cxd-dgtot, .cxd-hit .cxd-rc-t { animation: none; }
}