/* paths scene: no CSS transitions here, GSAP owns every animated property */
.sc-pa { position: absolute; inset: 0; }
.sc-pa-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.sc-pa-e { fill: none; stroke: var(--fg2); stroke-width: 2; opacity: .28; }
.sc-pa-e.dash { stroke-dasharray: 7 7; }
.sc-pa-live { fill: none; stroke: #f4f4f4; stroke-width: 2.5; }
.sc-pa-arrhead { fill: #f4f4f4; }
.sc-pa-dot { fill: #fff; }
.sc-pa-dot.pii { fill: var(--red); }
.sc-pa-gate { fill: #fff; }

.sc-pa-lane { position: absolute; left: 0; right: 0; display: flex; gap: 18px; align-items: baseline; }
.sc-pa-lane b { font-size: 19px; font-weight: 700; }
.sc-pa-lane > span { font-family: var(--mono); font-size: 17px; color: var(--mute); }
.sc-pa-lane .sc-pa-wt { margin-left: 22px; font-family: var(--mono); font-size: 17px; color: var(--mute); }
.sc-pa-wtime { font-style: normal; color: var(--fg); font-weight: 700; display: inline-block; min-width: 5ch; text-align: right; }

.sc-pa-box { position: absolute; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; will-change: opacity; }
.sc-pa-box .in { position: relative; display: flex; flex-direction: column; gap: 4px; }
.sc-pa-box b { font-size: 21px; line-height: 1.1; }
.sc-pa-box small { font-size: 17px; line-height: 1.2; color: var(--fg2); font-family: var(--mono); }
.sc-pa-box.m { background: linear-gradient(140deg, #3a8cf0, #17467f); color: #fff; }
.sc-pa-box.m small { color: #d6e6ff; font-family: var(--font); }
.sc-pa-box.c { border: 2px solid var(--fg2); background: #1e1e1e; }
.sc-pa-box.c b { font-family: var(--mono); font-size: 19px; }
.sc-pa-box.n { border: 1.5px dashed var(--line); }
.sc-pa-box.n b { font-weight: 400; }
.sc-pa-box .in.par { gap: 0; position: absolute; inset: 0; }
.sc-pa-box .in.par .half { flex: 1; padding: 0 14px; display: flex; align-items: center; }
.sc-pa-box .in.par .half + .half { border-top: 1.5px solid var(--line); }
.sc-pa-box .in.par b { font-size: 18px; }
.sc-pa-glow { position: absolute; inset: -2px; border-radius: 15px; pointer-events: none; }
.sc-pa-box.c .sc-pa-glow { box-shadow: 0 0 0 3px #fff; }
.sc-pa-box.n .sc-pa-glow { box-shadow: 0 0 0 2px var(--fg2); }
.sc-pa-box.m .sc-pa-glow { box-shadow: 0 0 0 3px rgba(156,200,255,.75), 0 0 36px 6px rgba(47,127,224,.75); }

.sc-pa-ms { position: absolute; font-family: var(--mono); font-size: 17px; color: var(--fg2); text-align: center; }
.sc-pa-ms.m { color: #9cc8ff; }

.sc-pa-budget { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 24px; }
.sc-pa-track { position: relative; height: 20px; border-radius: 10px; background: rgba(255,255,255,.07); }
.sc-pa-seg { position: absolute; top: 0; height: 100%; display: block; }
.sc-pa-seg.m { background: #2f7fe0; }
.sc-pa-seg.c { background: #fff; }
.sc-pa-limit { position: absolute; right: 0; top: 28px; font-family: var(--mono); font-size: 17px; color: var(--mute); }
.sc-pa-track::after { content: ""; position: absolute; right: 0; top: -6px; bottom: -6px; width: 2px; background: var(--mute); }
.sc-pa-total { font-family: var(--mono); font-size: 28px; color: var(--fg); min-width: 150px; text-align: right; font-variant-numeric: tabular-nums; }

.sc-pa-blocked { position: absolute; font-family: var(--mono); font-size: 17px; color: #ff8f86; white-space: nowrap; }
.sc-pa-blocked b { color: var(--red); margin-right: 6px; }
.sc-pa-note { position: absolute; left: 0; right: 0; font-size: 23px; color: var(--fg2); }
.sc-pa-legend { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 26px; align-items: center; font-size: 18px; color: var(--fg2); }
.sc-pa-legend .lg { display: inline-flex; gap: 10px; align-items: center; font-family: var(--mono); font-size: 17px; }
.sc-pa-legend .lg i { width: 22px; height: 22px; border-radius: 6px; display: block; }
.sc-pa-legend .lg.m i { background: #2f7fe0; }
.sc-pa-legend .lg.c i { border: 2px solid #fff; }
.sc-pa-legend .cnt { margin-left: auto; color: var(--mute); font-size: 17px; }
