/* SURFACE: shared — the CARGO JOURNEY renderer's STYLE half.
 *
 * Extracted 2026-07-29 alongside cargo-journey.js, because sharing the code without the CSS is
 * not sharing the renderer. On the orange surface the JS ran perfectly and produced FIVE
 * overlapping labels: without `.evt-label{font-size:9px}` the labels rendered at the browser
 * default, so every width the packer measured was wrong and its collision test — which is
 * correct — was answering a question about a different page.
 *
 * A measure-and-place layout is only as honest as the metrics it measures. The CSS IS part of
 * the algorithm here, not decoration.
 */
:root { --leaderc: #8d8271; }
@media (prefers-color-scheme: dark) { :root { --leaderc: #9c907c; } }

.evt-label { font-size: 9px; fill: var(--dim); text-anchor: middle; }
.evt-label.done { fill: var(--ink); font-weight: 600; }
text.probe { visibility: hidden; }
svg { display: block; }

@keyframes cfpulse { 0% { r: 8; opacity: .55 } 70% { r: 15; opacity: 0 } 100% { r: 15; opacity: 0 } }
.pulse { animation: cfpulse 1.6s ease-out infinite; }
.pulse.attn { stroke: #D9A441 !important; }

/* OVERRUN — the delay reads as a LENGTH, not a footnote (Jeff 2026-07-27: "it is a strong
   reminder visually for the delay … rather than hiding in the blu text - small"). */
.ovr { animation: ovrpulse 1.9s ease-in-out infinite; }
@keyframes ovrpulse { 0%, 100% { opacity: .42 } 50% { opacity: .85 } }
@media (prefers-reduced-motion: reduce) { .ovr { animation: none; opacity: .6 } .pulse { animation: none; opacity: .35 } }