/* Text on the left; the photo, water and control form one scene on the right. */
.sft-pwm.sft-pwm-interactive{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.35fr);gap:40px;align-items:center;width:100%;margin-inline:auto}
.sft-pwm-interactive figure.sft-pwm-live{width:100%;min-height:0;aspect-ratio:auto;margin:0;border:1px solid #355869;border-radius:18px;overflow:hidden;background:#051d30;align-self:center}
.sft-pwm-photo-stage{position:relative;aspect-ratio:1672/941;isolation:isolate;margin-bottom:44px}
.sft-pwm-photo-stage>img,.sft-pwm-photo-stage>canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.sft-pwm-photo-stage>canvas{pointer-events:none}
.sft-pwm-live #pwm-scene-caption,.sft-pwm-overlay #pwm-help{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sft-pwm-overlay{position:absolute;z-index:2;left:12px;right:12px;bottom:-36px;padding:7px 12px 5px;border:1px solid #91bfcc55;border-radius:10px;background:#041d2eeb;backdrop-filter:blur(12px);box-shadow:0 5px 18px #0003}
.sft-pwm-overlay label{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#f0f7fa;font-size:13px;font-weight:600;line-height:1.25}
.sft-pwm-overlay label small{font-weight:400;color:#b6d1dd;font-size:11px;margin-left:8px}
.sft-pwm-overlay output{color:#ffe000;font-size:22px;font-weight:800;line-height:1}
.sft-pwm-interactive #pwm-duty{display:block;width:100%;height:24px;touch-action:pan-y;margin:1px 0 0;background:transparent;accent-color:#ffe000;cursor:pointer}
.sft-pwm-interactive #pwm-duty:focus-visible{outline:2px solid #ffe000;outline-offset:0;border-radius:10px}
.sft-nozzle-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:3px 0 0}
.sft-nozzle-controls button{display:flex;justify-content:center;align-items:center;gap:6px;min-width:0;min-height:34px;padding:4px 6px;border:1px solid #81d9c075;border-radius:7px;background:#123b40;color:#e9fff9;font:inherit;cursor:pointer;transition:background .16s,border-color .16s}
.sft-nozzle-button-name{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;white-space:nowrap}
.sft-nozzle-button-name i{display:block;width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:#7ee4be;box-shadow:0 0 7px #7ee4be77}
.sft-nozzle-controls [data-nozzle-state]{font-size:10px;color:#aee2d4}
.sft-nozzle-controls button[aria-pressed=false]{background:#091a28;border-color:#6a8490;color:#c1ced5}
.sft-nozzle-controls button[aria-pressed=false] i{background:#637581;box-shadow:none}
.sft-nozzle-controls button[aria-pressed=false] [data-nozzle-state]{color:#a9b6bf}
.sft-nozzle-controls button:hover{border-color:#ffe000}
.sft-nozzle-controls button:focus-visible{outline:2px solid #ffe000;outline-offset:2px}
@media(pointer:coarse){.sft-nozzle-controls button{min-height:44px}}
.sft-pwm-interactive .sft-pwm-copy{display:block;min-width:0;margin:0;padding:0}
.sft-pwm-interactive .sft-pwm-copy>.sft-kicker{margin-bottom:16px}
.sft-pwm-interactive .sft-pwm-copy>h3{font-size:clamp(26px,2.65vw,38px);margin:0 0 18px}
.sft-pwm-interactive .sft-pwm-copy>p:not(.sft-kicker){margin:0;font-size:14px;line-height:1.7}
.sft-pwm-interactive .sft-specs{width:100%;margin-top:22px;padding-top:20px;gap:12px}
.sft-pwm-interactive .sft-specs dd{font-size:clamp(24px,2.6vw,35px)}
.sft-pwm-interactive .sft-specs dd span{font-size:15px}
.sft-pwm-interactive .sft-pulse-visual{margin-top:22px;padding-left:54px;max-width:430px}
.sft-pwm-interactive .sft-pulse-visual svg{max-height:58px}
.sft-pwm-interactive .sft-pulse-visual .sft-caption{margin-top:6px!important;font-size:9px!important}
@media(max-width:1050px){.sft-pwm.sft-pwm-interactive{grid-template-columns:1fr;gap:25px}.sft-pwm-interactive .sft-pulse-visual{display:none}.sft-pwm-interactive .sft-specs{max-width:500px}.sft-pwm-interactive .sft-pwm-copy>h3 br{display:none}}
@media(max-width:760px){
 .sft-pwm.sft-pwm-interactive{gap:20px}
 .sft-pwm-photo-stage{margin-bottom:113px}
 .sft-pwm-overlay{left:0;right:0;top:100%;bottom:auto;width:100%;height:113px;border:0;border-top:1px solid #355869;border-radius:0;padding:9px 10px 7px;box-sizing:border-box;background:#071f30;backdrop-filter:none}
 .sft-pwm-overlay label{font-size:10px}
 .sft-pwm-overlay label small{display:none}
 .sft-pwm-overlay output{font-size:20px}
 .sft-pwm-interactive #pwm-duty{height:25px;margin:0}
 .sft-pwm-interactive #pwm-duty:focus-visible{outline-offset:1px}
 .sft-nozzle-controls{gap:5px;margin-top:3px}
 .sft-nozzle-controls button{flex-direction:column;gap:3px;padding:5px 2px;min-height:44px}
 .sft-nozzle-button-name{font-size:11px;gap:5px}
 .sft-nozzle-controls [data-nozzle-state]{font-size:9px}
}
.sft-nozzle-controls button:disabled{cursor:not-allowed;background:#152735;border-color:#8296a066;color:#b9c5cb;opacity:1}
.sft-nozzle-controls button:disabled:hover{border-color:#8296a066}
.savefarm-page main .sft-pwm-auto-note{margin:0;padding:10px 14px 13px;border-top:1px solid #355869;color:#b6cdd7;font-size:11px;line-height:1.55}
.sft-pwm-auto-note strong{color:#e5f4f5}
.sft-pwm-auto-note span{display:block;margin-top:4px;color:#d7e7e9}
@media(max-width:760px){.savefarm-page main .sft-pwm-auto-note{font-size:10px;padding:10px 12px 12px}}

/* Separate moving ground, spray and interactive controls. */
.sft-pwm-photo-stage>img{z-index:0}
#pwm-field-canvas{z-index:1}
#pwm-spray-canvas{z-index:2}
.sft-pwm-overlay{z-index:3}
.sft-nozzle-controls button[data-state="Bloqueado"]{background:#332f21;border-color:#b89c4a;color:#f5e6ad}
.sft-nozzle-controls button[data-state="Bloqueado"] i{background:#e8c65c;box-shadow:0 0 7px #e8c65c44}
.sft-nozzle-controls button[data-state="Bloqueado"] [data-nozzle-state]{color:#e7ce85}

.sft-pwm-photo-stage>img,#pwm-field-canvas{transition:filter .45s ease}
.sft-pwm-live[data-night=true] .sft-pwm-photo-stage>img{filter:brightness(.28) saturate(.65)}
.sft-pwm-live[data-night=true] #pwm-field-canvas{filter:brightness(.42) saturate(.65)}
#pwm-night-light{z-index:2;mix-blend-mode:screen}
.sft-night-toggle{position:absolute;z-index:4;right:14px;top:12px;display:flex;align-items:center;gap:9px;min-height:40px;padding:9px 14px;border:1px solid #7ea1b5;border-radius:25px;background:#061e31e8;color:#eef8ff;font:600 12px/1.2 Lato,sans-serif;cursor:pointer;box-shadow:0 3px 12px #0004}
.sft-night-toggle::before{content:'';width:9px;height:9px;border-radius:50%;background:#8b9dac}
.sft-night-toggle[aria-pressed=true]{background:#102c64;border-color:#599eff;color:#d8edff}
.sft-night-toggle[aria-pressed=true]::before{background:#64b8ff;box-shadow:0 0 10px #268cff}
.sft-night-toggle:hover{border-color:#ffe000}.sft-night-toggle:focus-visible{outline:2px solid #ffe000;outline-offset:3px}
@media(max-width:760px){.sft-night-toggle{right:8px;top:6px;min-height:36px;padding:7px 10px;font-size:10px;gap:6px}}
@media(prefers-reduced-motion:reduce){.sft-pwm-photo-stage>img,#pwm-field-canvas{transition:none}}
