/* Live strips (RotoSight "Live plant" and PiatIQ "Mould air temperature"): light panels, no dark box.
   Start once an ancestor is in view (.in). transform / opacity / stroke-dashoffset only. */
.lv { width: 100%; max-width: 540px; margin-top: 14px; padding: 18px 22px 16px; border-radius: 24px; background: linear-gradient(150deg, #fff7ec, #ffeedb); color: var(--ink); }
.lv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6a4a28; }
.lv-head span { display: inline-flex; align-items: center; gap: 9px; }
.lv-head i { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; }
.in .lv-head i { animation: lvlive 1.8s infinite; }
@keyframes lvlive { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.55); } 70%,100% { box-shadow: 0 0 0 9px rgba(22,163,74,0); } }
.lv-head small { font-size: 10px; letter-spacing: .1em; color: #a58b6c; }

/* arms */
.lv-rows { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.lv-rows li { display: grid; grid-template-columns: 44px 1fr 74px; align-items: center; gap: 14px; }
.lv-rows b { font-size: 13px; font-weight: 800; }
.lv-track { position: relative; display: flex; height: 12px; border-radius: 12px; container-type: inline-size; }
.lv-track span { flex: 1; }
.lv-track .s1 { background: #ffb45c; border-radius: 12px 0 0 12px; } .lv-track .s2 { background: #7fc0ff; } .lv-track .s3 { background: #6fdc9a; } .lv-track .s4 { background: #b7a2f7; border-radius: 0 12px 12px 0; }
.lv-pin { position: absolute; left: -8px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: #fff; border: 4px solid #0b2036; box-shadow: 0 6px 12px -4px rgba(11,32,54,.5); }
.lv-st { position: relative; height: 18px; font-size: 12.5px; font-weight: 800; }
.lv-st em { position: absolute; right: 0; top: 0; font-style: normal; opacity: 0; white-space: nowrap; }
.lv-st .a1 { color: #c25e00; } .lv-st .a2 { color: #1d6fd1; } .lv-st .a3 { color: #15803d; } .lv-st .a4 { color: #6d4fd3; }
.in .lv-pin { animation: lvpin 9s linear var(--d, 0s) infinite; }
.in .lv-st .a1 { animation: lva1 9s linear var(--d, 0s) infinite; } .in .lv-st .a2 { animation: lva2 9s linear var(--d, 0s) infinite; }
.in .lv-st .a3 { animation: lva3 9s linear var(--d, 0s) infinite; } .in .lv-st .a4 { animation: lva4 9s linear var(--d, 0s) infinite; }
@keyframes lvpin { from { transform: translateX(0); } to { transform: translateX(calc(100cqw - 6px)); } }
@keyframes lva1 { 0%,22% { opacity: 1; } 25%,100% { opacity: 0; } }
@keyframes lva2 { 0%,24% { opacity: 0; } 27%,47% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes lva3 { 0%,49% { opacity: 0; } 52%,72% { opacity: 1; } 75%,100% { opacity: 0; } }
@keyframes lva4 { 0%,74% { opacity: 0; } 77%,97% { opacity: 1; } 100% { opacity: 0; } }
.lv-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; }
.lv-note { font-size: 13px; line-height: 1.45; font-weight: 600; color: #6a4a28; }
.lv-key { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex: none; }
.lv-key li { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: #6a4a28; }
.lv-key li::before { content: ""; width: 9px; height: 9px; border-radius: 3px; }
.lv-key .k1::before { background: #ffb45c; } .lv-key .k2::before { background: #7fc0ff; } .lv-key .k3::before { background: #6fdc9a; } .lv-key .k4::before { background: #b7a2f7; }

/* curve */
.lv2 { padding-bottom: 14px; }
.lv-svg { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.lv-svg text { font-family: Inter, sans-serif; }
.lv-ax { font-size: 9.5px; font-weight: 700; fill: #a58b6c; }
.lv-grid { stroke: rgba(106,74,40,.14); stroke-width: 1; }
.lv-axis { stroke: rgba(106,74,40,.4); stroke-width: 2; stroke-linecap: round; }
.lv-saved { fill: rgba(34,197,94,.16); opacity: 0; transform-box: fill-box; transform-origin: left; }
.lv-fill { fill: url(#lvf); }
.lv-curve { fill: none; stroke: #f7861e; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.lv-stop { stroke: #15803d; stroke-width: 1.8; stroke-dasharray: 4 4; opacity: 0; }
.lv-peak { fill: none; stroke: #f7861e; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lv-dot { fill: #fff; stroke: #0b2036; stroke-width: 4; offset-path: path("M10 128 C60 126 120 60 200 30 C250 30 290 70 330 104 C360 126 400 130 430 130"); offset-distance: 0%; filter: drop-shadow(0 4px 6px rgba(11,32,54,.35)); }
.in .lv-curve { animation: lvcurve 9s linear infinite; }
.in .lv-fill { animation: lvfill 9s linear infinite; }
.in .lv-dot { animation: lvdot 9s linear infinite; }
.in .lv-peak { animation: lvpeak 9s cubic-bezier(.34,1.56,.64,1) infinite; }
.in .lv-stop { animation: lvstop 9s linear infinite; }
.in .lv-saved { animation: lvsaved 9s ease-out infinite; }
@keyframes lvcurve { 0% { stroke-dashoffset: 1; opacity: 1; } 78% { stroke-dashoffset: 0; } 96% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes lvfill { 0%,6% { opacity: 0; } 78%,96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lvdot { 0% { offset-distance: 0%; opacity: 1; } 78% { offset-distance: 100%; } 96% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes lvpeak { 0%,34% { opacity: 0; transform: scale(.3); } 40%,96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes lvstop { 0%,42% { opacity: 0; } 48%,96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lvsaved { 0%,46% { opacity: 0; transform: scaleX(0); } 62%,96% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }

.lv-tags { position: relative; display: block; width: 100%; height: 24px; }
.lv-tags em { position: absolute; left: 0; top: 0; padding: 4px 12px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 800; opacity: 0; white-space: nowrap; }
.lv-tags .g1 { background: #fff1dc; color: #c25e00; } .lv-tags .g2 { background: #0b2036; color: #fff; }
.lv-tags .g3 { background: #dcfce7; color: #15803d; } .lv-tags .g4 { background: #e0efff; color: #1d6fd1; } .lv-tags .g5 { background: #15803d; color: #fff; }
.in .lv-tags .g1 { animation: lvg1 9s linear infinite; } .in .lv-tags .g2 { animation: lvg2 9s linear infinite; } .in .lv-tags .g3 { animation: lvg3 9s linear infinite; }
.in .lv-tags .g4 { animation: lvg4 9s linear infinite; } .in .lv-tags .g5 { animation: lvg5 9s linear infinite; }
@keyframes lvg1 { 0%,2% { opacity: 0; } 5%,33% { opacity: 1; } 36%,100% { opacity: 0; } }
@keyframes lvg2 { 0%,35% { opacity: 0; } 38%,45% { opacity: 1; } 48%,100% { opacity: 0; } }
@keyframes lvg3 { 0%,47% { opacity: 0; } 50%,58% { opacity: 1; } 61%,100% { opacity: 0; } }
@keyframes lvg4 { 0%,60% { opacity: 0; } 63%,78% { opacity: 1; } 81%,100% { opacity: 0; } }
@keyframes lvg5 { 0%,79% { opacity: 0; } 83%,96% { opacity: 1; } 99%,100% { opacity: 0; } }

@media (max-width: 560px) {
  .lv { padding: 14px 14px 12px; border-radius: 20px; }
  .lv-rows li { grid-template-columns: 38px 1fr 64px; gap: 10px; }
  .lv-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .lv-ax { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lv *, .lv *::before { animation: none !important; }
  .lv-pin { transform: translateX(calc(50cqw)); } .lv-st .a1 { opacity: 1; } .lv-dot { offset-distance: 100%; }
  .lv-saved, .lv-stop, .lv-peak { opacity: 1; } .lv-tags .g5 { opacity: 1; }
}