/* Live streaming and video page: figure shapes and text, the two tools */

/* ---------- figure shapes ---------- */
.motion-svg .lv-bar.o{fill:var(--orange)}
.motion-svg .lv-bar.p{fill:var(--purple)}
.motion-svg .lv-tile{fill:#E2E8F0;stroke:#94A3B8;stroke-width:1}
.motion-svg .lv-tile.pvw{fill:#ECFDF5;stroke:#10B981;stroke-width:2}
.motion-svg .lv-tile.pgm{fill:#FEF2F2;stroke:#EF4444;stroke-width:2}
.motion-svg .lv-screen{fill:#0F172A;stroke:#334155;stroke-width:2}
.motion-svg .lv-person{fill:#64748B}
.motion-svg .lv-pip{fill:#1E293B;stroke:var(--cyan);stroke-width:2}
.motion-svg .lv-slide{fill:#F8FAFC;stroke:#CBD5E1;stroke-width:1}
.motion-svg .lv-bug{fill:var(--orange)}
.motion-svg .lv-lt{fill:rgba(139,92,246,.92)}
.motion-svg .lv-ltt{font-size:13px;font-weight:600;fill:#fff;text-anchor:start}
.motion-svg .lv-ftb{fill:#000;opacity:.88}
.motion-svg .s.lv-od{fill:#CBD5E1}
.motion-svg .s.lv-ow{fill:#fff;font-weight:600}
.motion-svg .lv-range{stroke-width:0}
.motion-svg .lv-range.hdmi{fill:var(--pink)}
.motion-svg .lv-range.sdi{fill:var(--orange)}
.motion-svg .lv-range.fibre{fill:var(--purple)}
.motion-svg .lv-range.ip{fill:var(--teal)}
.motion-svg .lv-rowl{font-size:13px;font-weight:600;fill:var(--ink)}
.motion-svg .lv-rown{font-family:var(--font-mono);font-size:12px;fill:var(--muted)}
.motion-svg .lv-rown.w{fill:#fff}
.motion-svg .lv-window{fill:rgba(20,184,166,.12);stroke:var(--teal);stroke-width:1.5;stroke-dasharray:6 4}
.motion-svg .lv-mark{stroke:#fff;stroke-width:3}
.motion-svg .lv-mark.o{fill:var(--orange)}
.motion-svg .lv-mark.t{fill:var(--teal)}
.motion-svg .lv-cloud{fill:#F1F5F9;stroke:#94A3B8;stroke-width:1.5}
.motion-svg .lv-buf{fill:#E2E8F0}
.motion-svg .lv-buf-in{fill:var(--purple)}
.motion-svg .lv-buf-in.bad{fill:var(--red,#EF4444)}
.motion-svg .lv-load{fill:var(--teal)}
.motion-svg .lv-load.bad{fill:#EF4444}
.motion-svg .lv-mono{font-family:var(--font-mono);font-size:13px;fill:var(--ink);text-anchor:start}
.motion-svg .lv-mono.o{fill:var(--orange-strong)}

/* ---------- tools ---------- */
.lv-tool{margin-top:26px}
.lv-tool h3{font-size:var(--fs-h4);margin:0 0 8px}
.lv-small{font-size:.9rem;color:var(--muted);margin:10px 0 0;max-width:80ch}
.lv-tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;margin-top:14px;align-items:start}
.lv-tool-grid > *{min-width:0}
.lv-in{display:grid;gap:12px;align-content:start}
.lv-field{display:grid;gap:6px;font-size:.88rem;font-weight:600;color:var(--ink)}
.lv-field select,.lv-field input{font:inherit;font-weight:500;font-size:.92rem;padding:8px 10px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);max-width:100%}
.lv-in .sim-row{grid-template-columns:110px 1fr 78px}
.lv-tool input[type=range]{width:100%;accent-color:var(--orange)}
.lv-dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0;font-size:.92rem}
.lv-dl dt{color:var(--muted)}
.lv-dl dd{margin:0;font-weight:600;color:var(--ink);font-family:var(--font-mono);font-size:.86rem;overflow-wrap:anywhere}
.lv-verdict{margin:12px 0 0;padding:10px 12px;border-radius:10px;font-size:.92rem;border:1px solid var(--line)}
.lv-verdict.ok{background:#F0FDFA;border-color:#99F6E4}
.lv-verdict.warn{background:#FFFBEB;border-color:#FDE68A}
.lv-verdict.bad{background:#FFF1F2;border-color:#FECDD3}
.no-js .lv-js{display:none}

/* ---------- tables ---------- */
.table-wrap .lv-narrow{min-width:0}

@media (max-width:760px){
  .lv-tool-grid{grid-template-columns:1fr}
  .lv-in .sim-row{grid-template-columns:90px 1fr 64px}
}
@media (max-width:600px){
  .lv-narrow thead{display:none}
  .lv-narrow,.lv-narrow tbody,.lv-narrow tr,.lv-narrow td{display:block;width:100%}
  .lv-narrow tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .lv-narrow td{border:0;padding:3px 0}
  .lv-narrow td:first-child{font-weight:600;color:var(--ink)}
}