/* Editing and post production page: figure shapes, the three tools and phone tables */

/* ---------- figure shapes ---------- */
.motion-svg .pp-mono{font-family:var(--font-mono);font-size:13px;fill:var(--ink);text-anchor:start}
.motion-svg .pp-mono.o{fill:var(--orange-strong)}
.pp-win{fill:#F8FAFC;stroke:var(--line-strong);stroke-width:1.5}
.pp-scope{fill:#F8FAFC;stroke:var(--line-strong);stroke-width:1.5}
.pp-wave{fill:none;stroke:var(--teal-strong);stroke-width:3;stroke-linecap:round}
.pp-skin{fill:rgba(167,139,250,.25);stroke:#A78BFA;stroke-width:1.5}
.pp-speech{fill:rgba(6,182,212,.22);stroke:var(--cyan);stroke-width:1}
.pp-clipline{fill:none;stroke:#F43F5E;stroke-width:1.5;stroke-dasharray:6 5}
.pp-target{fill:none;stroke:var(--orange);stroke-width:2;stroke-dasharray:8 5}
.pp-mark{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-dasharray:5 4}
.pp-frame.pp-need rect{stroke-width:2.5}
.pp-clip{stroke-width:1.2}
.pp-clip.orange{fill:#FED7AA;stroke:var(--orange)}
.pp-clip.cyan{fill:#CFFAFE;stroke:var(--cyan)}
.pp-clip.purple{fill:#E9D5FF;stroke:var(--purple)}
.pp-clip.teal{fill:#CCFBF1;stroke:var(--teal)}
.pp-playhead{stroke:#E11D48;stroke-width:2.5}
.pp-pagebtn rect{fill:#fff;stroke:var(--line-strong)}
.motion-svg .pp-pagebtn .t{font-size:12.5px}
.pp-wheel{fill:#fff;stroke:var(--line-strong);stroke-width:1.5}
.pp-fader{fill:#E2E8F0;stroke:var(--line-strong);stroke-width:1}
.pp-cap{fill:var(--navy)}
.pp-frm rect{fill:#F1F5F9;stroke:var(--navy);stroke-width:2}
.pp-safe{fill:rgba(249,115,22,.25);stroke:var(--orange);stroke-width:1}

/* loudness meters: the bars move only while the figure runs, and never with reduced motion */
.pp-mbg{fill:#E2E8F0}
.pp-bar{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.55)}
.pp-bar.cyan{fill:var(--cyan)}
.pp-bar.purple{fill:var(--purple)}
.pp-bar.orange{fill:var(--orange)}
.pp-bar.red{fill:#F43F5E}
.pp-m1{transform:scaleY(.62)}.pp-m2{transform:scaleY(.6)}.pp-m3{transform:scaleY(.6)}.pp-m4{transform:scaleY(.82)}
.motion.is-running .pp-m1{animation:pp-mom 1.1s ease-in-out infinite alternate}
.motion.is-running .pp-m2{animation:pp-short 2.6s ease-in-out infinite alternate}
.motion.is-running .pp-m3{animation:pp-int 9s ease-out infinite}
.motion.is-running .pp-m4{animation:pp-tp 1.7s steps(6) infinite alternate}
@keyframes pp-mom{0%{transform:scaleY(.38)}35%{transform:scaleY(.78)}60%{transform:scaleY(.5)}100%{transform:scaleY(.72)}}
@keyframes pp-short{0%{transform:scaleY(.5)}100%{transform:scaleY(.66)}}
@keyframes pp-int{0%{transform:scaleY(.35)}60%{transform:scaleY(.6)}100%{transform:scaleY(.6)}}
@keyframes pp-tp{0%{transform:scaleY(.7)}100%{transform:scaleY(.88)}}
.legend-row i.lg-orange{background:var(--orange)}
.legend-row i.lg-teal{background:var(--teal)}
.legend-row i.lg-purple{background:var(--purple)}
.legend-row i.lg-cyan{background:var(--cyan)}
.legend-row i.lg-red{background:#F43F5E}

/* hero */
.hero-art .pph-win{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.22);stroke-width:1.5}
.pph-clip.o{fill:rgba(249,115,22,.55)}
.pph-clip.c{fill:rgba(6,182,212,.55)}
.pph-clip.t{fill:rgba(20,184,166,.55)}
.pph-clip.p{fill:rgba(139,92,246,.6)}
.pph-head{fill:#F43F5E}
.hero-art.is-running .pph-head{animation:pph-play 6s linear infinite}
@keyframes pph-play{0%{transform:translateX(0)}100%{transform:translateX(130px)}}

@media (prefers-reduced-motion:reduce){
  .motion .pp-bar,.hero-art .pph-head{animation:none!important}
}

/* ---------- layout helpers ---------- */
.pp-small{font-size:.9rem;color:var(--muted);margin:12px 0 0;max-width:80ch}
.key-points.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.pp-panel p{margin-top:0}
.pp-panel .table-wrap{margin-top:12px}

/* ---------- tools ---------- */
.pp-tool{margin-top:26px}
.pp-tool h3{font-size:var(--fs-h4);margin:0 0 8px}
.pp-tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;margin-top:14px;align-items:start}
.pp-tool-grid > *{min-width:0}
.pp-in{display:grid;gap:12px;align-content:start}
.pp-in .sim-row{grid-template-columns:150px 1fr 92px}
.pp-tool input[type=range]{width:100%;accent-color:var(--orange)}
.pp-field{display:grid;gap:6px;font-size:.88rem;font-weight:600;color:var(--ink)}
.pp-field select{font:inherit;font-weight:500;padding:9px 10px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#fff;color:var(--ink);max-width:100%}
.pp-field select:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.pp-dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;font-size:.92rem}
.pp-dl dt{color:var(--muted);font-weight:600}
.pp-dl dd{margin:0;color:var(--ink)}
.pp-verdict{margin:14px 0 0;padding:10px 12px;border-radius:10px;font-size:.92rem;border:1px solid var(--line)}
.pp-verdict.ok{background:#F0FDFA;border-color:#99F6E4}
.pp-verdict.warn{background:#FFFBEB;border-color:#FDE68A}
.pp-verdict.bad{background:#FFF1F2;border-color:#FECDD3}
.no-js .pp-js{display:none}
.no-js .pp-tool-grid{grid-template-columns:minmax(0,1fr)}

@media (max-width:1000px){
  .key-points.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .pp-tool-grid{grid-template-columns:minmax(0,1fr)}
}

/* tables stack into labelled rows on phones instead of scrolling */
.table-wrap .pp-st{min-width:0}
@media (max-width:700px){
  .key-points.four{grid-template-columns:1fr}
  .pp-in .sim-row{grid-template-columns:110px 1fr 76px}
  .pp-dl{grid-template-columns:1fr;gap:2px}
  .pp-dl dd{margin-bottom:8px}
  .pp-st,.pp-st tbody,.pp-st tr,.pp-st td{display:block;width:100%}
  .pp-st thead{display:none}
  .pp-st tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .pp-st td{border:0;padding:2px 0}
  .pp-st td:first-child{font-weight:600;color:var(--ink)}
  .pp-st td + td::before{content:attr(data-l);display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle);margin-top:4px}
}

/* code and folder blocks scroll inside themselves, never the page */
.cfg{margin:12px 0 0;padding:16px 18px;background:var(--navy);color:#E2E8F0;border-radius:var(--radius);overflow:auto;max-width:100%;font-size:.82rem;line-height:1.65}
.cfg code{font-size:inherit;background:none;color:inherit;padding:0}