@font-face{font-family:NonnChakra;src:url(../../fonts/ecotracer/chakra-petch-500-v19-1.woff) format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:NonnOrbitron;src:url(../../fonts/ecotracer/orbitron-v19-1.woff) format('woff');font-weight:400 900;font-style:normal;font-display:swap}
#nonn-process-loop{width:100%;margin:20px 0;--npl-bg:#031722;--npl-cyan:#84e5fc;--npl-copy:#b7d0dc;font-family:NonnChakra,sans-serif;color:#ecfaff;container:process-flow / inline-size}
#nonn-process-loop *{box-sizing:border-box}#nonn-process-loop .npl-window{width:100%;overflow:hidden;background:var(--npl-bg);border:1px solid #376a80;position:relative}
#nonn-process-loop .npl-header{padding:12px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 20px;background:linear-gradient(100deg,#123549,#071f2c);border-bottom:1px solid #295569}
#nonn-process-loop .npl-kicker{font-size:10px;letter-spacing:.1em;color:#86dff7;margin:0 0 4px;font-weight:500}#nonn-process-loop .npl-kicker span{color:#4d788c;margin:0 7px}#nonn-process-loop h2{font:500 21px/1.2 NonnChakra,sans-serif;letter-spacing:.01em;color:#eefbff;margin:0}
#nonn-process-loop .npl-controls{display:flex;gap:8px;flex-wrap:wrap}#nonn-process-loop button{font:500 12px NonnChakra,sans-serif;display:flex;align-items:center;gap:12px;min-height:38px;padding:8px 12px;border:1px solid #468da4;background:linear-gradient(100deg,#10394e,#082633);color:#c4f4ff;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);cursor:pointer}#nonn-process-loop button:hover{background:#174961}#nonn-process-loop button span{color:#70dffb;font-size:15px}#nonn-process-loop button:disabled{opacity:.5;cursor:default}
#nonn-process-loop .npl-stage{position:relative;background:#031722}#nonn-process-loop canvas{width:100%;display:block;aspect-ratio:1600/390}#nonn-process-loop[data-scene=event] canvas{aspect-ratio:1600/360}
#nonn-process-loop .npl-loading{position:absolute;inset:0;display:grid;place-items:center;background:#031722;color:#90cfe4;font-size:14px}#nonn-process-loop .npl-loading[hidden]{display:none}
#nonn-process-loop .npl-equipment-links{position:absolute;inset:0;pointer-events:none}#nonn-process-loop .npl-equipment-links a{position:absolute;pointer-events:auto;border:1px solid transparent;border-radius:8px;text-decoration:none;color:#cbf3ff;outline-offset:-2px}#nonn-process-loop .npl-equipment-links a:hover,#nonn-process-loop .npl-equipment-links a:focus-visible{border-color:#88e3f7;background:#89e4fa0a;outline:1px solid #84e5fc}#nonn-process-loop .npl-equipment-links a>span{position:absolute;bottom:3px;left:4px;right:4px;background:#041d2bed;border:1px solid #4b899b;padding:6px 9px;font-size:11px;line-height:1.3;opacity:0;overflow-wrap:anywhere}#nonn-process-loop .npl-equipment-links a:hover>span,#nonn-process-loop .npl-equipment-links a:focus-visible>span{opacity:1}
#nonn-process-loop .npl-footer{border-top:1px solid #285268;padding:10px 20px;background:linear-gradient(100deg,#09283a,#061e2b)}#nonn-process-loop .npl-time-row{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#a9c9d9;font-size:11px;line-height:1.4}#nonn-process-loop .npl-state{color:#9eeafb;font-size:13px}#nonn-process-loop .npl-time-row label{white-space:nowrap;font-variant-numeric:tabular-nums}#nonn-process-loop input[type=range]{display:block;width:100%;height:16px;margin:5px 0;accent-color:#8de5f8;background:transparent}
#nonn-process-loop .npl-footer-meta{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 20px}#nonn-process-loop .npl-footer-meta p,#nonn-process-loop .npl-footer-meta>span{font-size:11px;line-height:1.4;color:#8bacbd;margin:0}#nonn-process-loop .npl-footer-meta>span{color:#9eeaff}#nonn-process-loop .npl-replay-reason{margin:8px 0 0;color:#d9c393;font-size:12px;line-height:1.5}
#nonn-process-loop .npl-readings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#082333;border-top:1px solid #285268}#nonn-process-loop .npl-readings>div{padding:10px 18px;min-width:0}#nonn-process-loop .npl-readings>div+div{border-left:1px solid #285268}#nonn-process-loop .npl-readings span{display:block;font-size:11px;color:#abcbd9;margin-bottom:3px}#nonn-process-loop .npl-readings strong{font:500 20px NonnOrbitron,sans-serif;color:#e9fbff}#nonn-process-loop .npl-readings small{font:500 11px NonnChakra,sans-serif;color:#acc9d6}#nonn-process-loop .npl-readings span small{margin-left:5px;color:#d7c592}#nonn-process-loop .npl-readings .npl-unrecorded{font:500 16px NonnChakra,sans-serif}
.processing-receipt-page .pd-receipt[data-flow-scene=water] #nonn-process-loop{margin:0}.processing-receipt-page .pd-receipt[data-flow-scene=water] .npl-window{border:0}
@container process-flow (max-width:600px){#nonn-process-loop .npl-header,#nonn-process-loop .npl-footer{padding:12px 14px}#nonn-process-loop button{min-height:44px}#nonn-process-loop .npl-readings{grid-template-columns:repeat(2,minmax(0,1fr))}#nonn-process-loop .npl-readings>div:last-child{grid-column:1/-1;border-left:0;border-top:1px solid #285268;display:flex;align-items:center;justify-content:space-between;gap:10px}#nonn-process-loop .npl-readings>div:last-child span{margin:0}}

@container process-flow (max-width:600px){#nonn-process-loop .npl-controls:has([data-end]){display:grid;grid-template-columns:1fr 1fr 1.5fr;width:100%;gap:6px}#nonn-process-loop .npl-controls:has([data-end]) button{min-width:0;padding-inline:8px;justify-content:center;gap:6px;font-size:11px}}
/* FO18: compact estimate explanation, without changing the approved scene. */
#nonn-process-loop .npl-water-assumptions{margin-top:7px;font-size:11px;line-height:1.5;color:#abcbd9}#nonn-process-loop .npl-water-assumptions summary{width:fit-content;color:#9eeaff;cursor:pointer}#nonn-process-loop .npl-water-assumptions p{max-width:95ch;margin:8px 0}#nonn-process-loop .npl-water-assumptions summary:focus-visible{outline:2px solid #84e5fc;outline-offset:3px}
@container process-flow (max-width:600px){#nonn-process-loop .npl-readings>div:last-child{display:block}#nonn-process-loop .npl-readings>div:last-child span{margin-bottom:3px}}