/* ==========================================================================
   VentPlus — Greenhouse device widget + CO₂-logic explainer
   Scoped entirely under .gw so nothing here can collide with the base site CSS.
   Colours/fonts inherit from style.css :root; a few local extras defined here.
   ========================================================================== */
.gw{
  --gw-navy:#173a7a; --gw-sky:#3f7f9d; --gw-amber:#c9852a; --gw-danger:#b8452f;
  --gw-leaf-deep:#2f6b45; --gw-card:#fffdf7; --gw-line:rgba(22,53,42,.14);
  color:var(--ink);
}

/* ---------------- device widget (hero) ---------------- */
.gw-hero{display:flex;flex-direction:column;gap:14px;align-items:center}
.gw .device{position:relative;width:340px;max-width:100%;
  background:linear-gradient(155deg,#fdfdfb,#eceae2);border-radius:22px;padding:18px 20px 22px;
  border:1px solid #d7d4c8;box-shadow:0 26px 54px rgba(22,53,42,.20),inset 0 1px 0 #fff}
.gw .screw{position:absolute;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#cfccc2,#8f8d84)}
.gw .screw.tl{top:9px;left:9px}.gw .screw.tr{top:9px;right:9px}
.gw .screw.bl{bottom:9px;left:9px}.gw .screw.br{bottom:9px;right:9px}
.gw .dlogo{text-align:center;margin:0 0 10px}
.gw .dlogo .brand{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);
  font-weight:600;font-size:1.35rem;color:var(--gw-navy)}
.gw .dlogo .waves{width:27px;height:18px;border-radius:3px;position:relative;
  background:repeating-linear-gradient(180deg,#2f7bd0 0 3px,#8fc0ee 3px 6px)}
.gw .dlogo .leaf{width:10px;height:10px;background:var(--leaf-bright);border-radius:0 100% 0 100%;
  position:absolute;top:-4px;right:-3px;transform:rotate(20deg)}
.gw .dlogo .tag{font-family:var(--font-body);font-size:.52rem;letter-spacing:1px;color:#5a6b8a;font-weight:600}

.gw .lcd-row{display:flex;gap:9px}
.gw .fanled{flex:0 0 36px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;font-family:var(--font-mono);font-size:.46rem;font-weight:700;color:#7b7b74;text-align:center}
.gw .fanled .bulb{width:14px;height:14px;border-radius:50%;background:#5a1f1a;transition:.3s}
.gw .fanled.on .bulb{background:#ff3b2f;box-shadow:0 0 9px 2px rgba(255,59,47,.8)}
.gw .lcd{flex:1;background:linear-gradient(160deg,#2f57a8,#24468c);border-radius:8px;border:3px solid #cfd3d8;
  padding:8px 10px;color:#d6e4ff;font-family:var(--font-mono);box-shadow:inset 0 2px 8px rgba(0,0,0,.35)}
.gw .lcd-top{display:flex;justify-content:space-between;font-size:.56rem;color:#b7ccf5}
.gw .lcd-mid{display:flex;gap:8px;align-items:flex-start}
.gw .lcd-big{font-size:2.3rem;font-weight:700;line-height:.95;color:#f2f7ff;
  font-variant-numeric:tabular-nums;min-width:4ch}
.gw .lcd-col{font-size:.58rem;line-height:1.5;color:#cfe0ff;padding-top:3px}
.gw .lcd-col b{color:#f2f7ff}
.gw .lcd-rows{font-size:.58rem;line-height:1.6;margin-top:3px}
.gw .lcd-rows .act{font-weight:700;color:#e9dca6}
.gw .lcd-rows .act.gen{color:#a9f0c4}
.gw .lcd-rows .act.vent{color:#a8dcff}
.gw .dev-title{text-align:center;font-family:var(--font-body);font-weight:700;letter-spacing:1.4px;
  font-size:.72rem;color:#3a3a37;margin:12px 0 9px}
.gw .keypad{display:flex;justify-content:center;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.gw .key{font-family:var(--font-body);font-weight:700;font-size:.54rem;color:#5a4300;
  background:linear-gradient(#ffd25e,#f2b73a);border:1px solid #d99f27;border-radius:7px;
  padding:5px 8px;box-shadow:0 2px 0 #d99f27}
.gw .power{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:7px;align-items:center}
/* 3-position ON / OFF / AUTO switch */
.gw .sw{width:46px;height:46px;position:relative;display:flex;align-items:center;justify-content:center}
.gw .sw .dial{width:40px;height:40px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 40% 35%,#3a3a3d,#111);box-shadow:0 3px 6px rgba(0,0,0,.4)}
.gw .sw .dial::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:12px;border-radius:3px;
  background:#e8352a;transform:translateX(-50%);transform-origin:50% 100%}
.gw .sw .tick{position:absolute;font-family:var(--font-mono);font-size:.42rem;font-weight:700;color:#6b6b64}
.gw .sw .t-auto{top:-3px;left:50%;transform:translateX(-50%)}
.gw .sw .t-off{bottom:2px;left:-6px}
.gw .sw .t-on{bottom:2px;right:-6px}
.gw .socket{background:#fbfbf9;border:1px solid #d7d4c8;border-radius:9px;padding:11px 6px 7px;
  text-align:center;position:relative;transition:.35s}
.gw .socket .holes{width:52px;height:52px;margin:0 auto;border-radius:50%;background:#f0efe9;
  border:1px solid #ddd;position:relative;box-shadow:inset 0 1px 3px rgba(0,0,0,.12)}
.gw .socket .holes i{position:absolute;background:#2b2b2b;border-radius:50%}
.gw .socket .holes i.top{width:5px;height:8px;top:8px;left:50%;transform:translateX(-50%)}
.gw .socket .holes i.l{width:5px;height:8px;bottom:11px;left:12px}
.gw .socket .holes i.r{width:5px;height:8px;bottom:11px;right:12px}
.gw .socket .slabel{font-family:var(--font-mono);font-size:.5rem;font-weight:700;color:#5a5a52;
  margin-top:7px;text-transform:uppercase;line-height:1.3}
.gw .socket .live{position:absolute;top:6px;right:6px;font-family:var(--font-mono);font-size:.46rem;
  font-weight:700;padding:2px 6px;border-radius:99px;background:#e6e4db;color:#8f8d84}
.gw .socket.gen.on{border-color:var(--leaf-bright);background:rgba(122,193,66,.12);
  box-shadow:0 0 0 2px rgba(122,193,66,.3)}
.gw .socket.gen.on .live{background:var(--leaf-bright);color:var(--ink)}
.gw .socket.vent.on{border-color:var(--gw-sky);background:rgba(63,127,157,.10);
  box-shadow:0 0 0 2px rgba(63,127,157,.25)}
.gw .socket.vent.on .live{background:var(--gw-sky);color:#fff}

/* range meter */
.gw .rangebar{width:340px;max-width:100%}
.gw .rangebar .lab{display:flex;justify-content:space-between;font-family:var(--font-mono);
  font-size:.56rem;color:var(--ink-soft);margin-bottom:3px}
.gw .rmeter{position:relative;height:16px;border-radius:8px;overflow:hidden;background:#e7e3d7;border:1px solid var(--gw-line)}
.gw .rmeter .band{position:absolute;top:0;bottom:0;background:rgba(122,193,66,.4);
  border-left:1px solid var(--leaf);border-right:1px solid var(--leaf)}
.gw .rmeter .dot{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--ink);
  border:2px solid #fff;transform:translate(-50%,-50%);transition:left .5s cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 3px rgba(0,0,0,.4)}
.gw .rangebar .cap{text-align:center;font-family:var(--font-mono);font-size:.54rem;
  color:var(--gw-leaf-deep);margin-top:3px;font-weight:700}

/* CC caption */
.gw .cc{width:340px;max-width:100%;background:#111;color:#fff;border-radius:8px;padding:9px 13px;
  min-height:44px;display:flex;align-items:center;gap:9px}
.gw .cc .cctag{font-family:var(--font-mono);font-size:.5rem;font-weight:700;background:#fff;color:#111;
  padding:1px 5px;border-radius:3px;flex:0 0 auto}
.gw .cc .cctxt{font-size:.82rem;line-height:1.35}

/* video progress */
.gw .prog{width:340px;max-width:100%}
.gw .prog .prow{display:flex;align-items:center;gap:9px}
.gw .prog .pp{font-size:.8rem;color:var(--ink-soft)}
.gw .track{position:relative;flex:1;height:6px;border-radius:99px;background:#dcd8cc}
.gw .track .fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--leaf-bright);width:0}
.gw .track .head{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:var(--ink);
  border:2px solid #fff;transform:translate(-50%,-50%);left:0;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.gw .track .end{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:#b3ad9c;transform:translate(-50%,-50%)}
.gw .track .end.s{left:0}.gw .track .end.e{left:100%}
.gw .prog .lg{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.54rem;
  color:var(--ink-soft);margin-top:5px}

/* ---------------- logic explainer sections ---------------- */
.gw-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1000px;margin:0 auto}
.gw .expl-card{background:var(--gw-card);border:1px solid var(--gw-line);border-radius:var(--radius);padding:24px 22px}
.gw .expl-card .k{font-family:var(--font-mono);font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;margin-bottom:9px}
.gw .expl-card.people .k{color:var(--gw-sky)}
.gw .expl-card.plants .k{color:var(--gw-leaf-deep)}
.gw .expl-card h3{font-family:var(--font-display);font-weight:500;font-size:1.28rem;margin-bottom:7px}
.gw .expl-card p{font-size:.95rem;color:var(--ink-soft)}
.gw .expl-card .arrowline{margin-top:12px;font-family:var(--font-mono);font-size:.82rem;font-weight:700}
.gw .expl-card.people .arrowline{color:var(--gw-sky)}
.gw .expl-card.plants .arrowline{color:var(--gw-leaf-deep)}

.gw-zgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1000px;margin:0 auto}
.gw .zcard{background:var(--gw-card);border:1px solid var(--gw-line);border-radius:var(--radius);
  padding:20px 18px;border-top:5px solid var(--gw-line)}
.gw .zcard.low{border-top-color:var(--gw-danger)}
.gw .zcard.ideal{border-top-color:var(--leaf-bright)}
.gw .zcard.high{border-top-color:var(--gw-amber)}
.gw .zcard .ppm{font-family:var(--font-mono);font-weight:700;font-size:1rem;margin-bottom:4px}
.gw .zcard.low .ppm{color:var(--gw-danger)}
.gw .zcard.ideal .ppm{color:var(--gw-leaf-deep)}
.gw .zcard.high .ppm{color:var(--gw-amber)}
.gw .zcard h4{font-family:var(--font-display);font-weight:500;font-size:1.1rem;margin:0 0 6px}
.gw .zcard p{font-size:.88rem;color:var(--ink-soft)}

.gw-dev2{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1000px;margin:0 auto}
.gw .d2{background:var(--gw-card);border:1px solid var(--gw-line);border-radius:var(--radius);padding:26px 24px}
.gw .d2 .badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.7rem;
  font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:7px 12px;border-radius:99px;margin-bottom:12px}
.gw .d2.gen .badge{background:rgba(122,193,66,.16);color:var(--gw-leaf-deep)}
.gw .d2.vent .badge{background:rgba(63,127,157,.16);color:var(--gw-sky)}
.gw .d2 h3{font-family:var(--font-display);font-weight:500;font-size:1.3rem;margin-bottom:9px}
.gw .d2 p{color:var(--ink-soft);font-size:.94rem;margin-bottom:11px}
.gw .d2 ul{margin:0;padding-left:18px;color:var(--ink-soft);font-size:.9rem}
.gw .d2 li{margin-bottom:5px}
.gw .d2 li b{color:var(--ink)}

.gw-steps{display:flex;flex-direction:column;gap:2px;max-width:720px;margin:0 auto}
.gw .step{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:15px 0;border-top:1px solid var(--gw-line)}
.gw .step:first-child{border-top:0}
.gw .step .t{font-family:var(--font-mono);font-size:.76rem;font-weight:700;color:var(--gw-leaf-deep);padding-top:2px}
.gw .step .b strong{display:block;font-family:var(--font-display);font-weight:500;font-size:1.04rem}
.gw .step .b span{font-size:.9rem;color:var(--ink-soft)}
.gw .step .b em{font-style:normal;font-family:var(--font-mono);font-size:.74rem;font-weight:700}
.gw .em-gen{color:var(--gw-leaf-deep)}
.gw .em-vent{color:var(--gw-sky)}
.gw .em-none{color:var(--ink-soft)}

@media (max-width:760px){
  .gw-grid2,.gw-zgrid,.gw-dev2{grid-template-columns:1fr}
  .gw .step{grid-template-columns:80px 1fr;gap:12px}
}

/* ---------------- live remote-monitoring dashboard ---------------- */
.gw-dash{background:var(--paper);padding:16px 16px 18px;font-family:var(--font-body);color:var(--ink)}
.gw-dash .ghd-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.gw-dash .ghd-brand{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:600;font-size:1.1rem;color:var(--gw-navy)}
.gw-dash .ghd-brand .w{width:22px;height:15px;border-radius:3px;position:relative;background:repeating-linear-gradient(180deg,#2f7bd0 0 3px,#8fc0ee 3px 6px)}
.gw-dash .ghd-brand .w::after{content:"";position:absolute;top:-4px;right:-3px;width:9px;height:9px;background:var(--leaf-bright);border-radius:0 100% 0 100%;transform:rotate(20deg)}
.gw-dash .ghd-zone{font-family:var(--font-mono);font-size:.68rem;font-weight:700;background:#eae6d8;color:var(--ink-soft);padding:4px 10px;border-radius:99px}
.gw-dash .ghd-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.66rem;font-weight:700;color:var(--gw-leaf-deep);margin-left:auto}
.gw-dash .ghd-live .d{width:8px;height:8px;border-radius:50%;background:var(--leaf-bright);box-shadow:0 0 0 3px rgba(122,193,66,.25)}
.gw-dash .ghd-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:14px}
.gw-dash .ghd-tile{background:#fff;border:1px solid var(--gw-line);border-radius:11px;padding:10px 11px}
.gw-dash .ghd-tile .k{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-bottom:5px}
.gw-dash .ghd-tile .v{font-family:var(--font-display);font-weight:500;font-size:1.35rem;line-height:1;font-variant-numeric:tabular-nums}
.gw-dash .ghd-tile .u{font-size:.66rem;color:var(--ink-soft);font-family:var(--font-mono)}
.gw-dash .ghd-tile .pill{display:inline-block;margin-top:5px;font-family:var(--font-mono);font-size:.54rem;font-weight:700;padding:2px 6px;border-radius:99px}
.gw-dash .pill.good{background:rgba(122,193,66,.16);color:var(--gw-leaf-deep)}
.gw-dash .pill.gen{background:rgba(79,157,105,.16);color:var(--gw-leaf-deep)}
.gw-dash .pill.vent{background:rgba(63,127,157,.16);color:var(--gw-sky)}
.gw-dash .ghd-card{background:#fff;border:1px solid var(--gw-line);border-radius:12px;padding:13px 15px 10px}
.gw-dash .ghd-chead{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px;margin-bottom:5px}
.gw-dash .ghd-chead h3{margin:0;font-family:var(--font-display);font-weight:500;font-size:1.02rem}
.gw-dash .ghd-legend{display:flex;gap:13px;flex-wrap:wrap;font-size:.68rem;color:var(--ink-soft);margin-bottom:4px}
.gw-dash .ghd-legend span{display:inline-flex;align-items:center;gap:5px}
.gw-dash .ghd-sw{display:inline-block;border-radius:2px}
.gw-dash .ghd-sw.line{width:14px;height:3px;background:var(--ink)}
.gw-dash .ghd-sw.band{width:14px;height:10px;background:rgba(122,193,66,.35);border:1px solid var(--leaf);border-radius:3px}
.gw-dash .ghd-sw.gen{width:14px;height:8px;background:var(--leaf);border-radius:3px}
.gw-dash .ghd-sw.vent{width:14px;height:8px;background:var(--gw-sky);border-radius:3px}
.gw-dash .ghd-plot{position:relative;overflow:hidden;border-radius:8px;cursor:zoom-in}
.gw-dash .ghd-plot svg{display:block;width:100%;height:auto;pointer-events:none}
.gw-dash .ghd-hint{font-family:var(--font-mono);font-size:.6rem;color:var(--ink-soft);margin-top:7px;text-align:center}
.gw-dash .ghd-zoombtns{display:flex;gap:5px}
.gw-dash .ghd-reset{font-family:var(--font-mono);font-size:.62rem;font-weight:700;color:var(--gw-leaf-deep);background:#fff;border:1px solid var(--gw-line);border-radius:8px;padding:4px 10px;cursor:pointer;line-height:1;min-width:26px}
.gw-dash .ghd-reset:hover{background:var(--paper-deep)}
.gw-dash .ghd-reset:active{transform:translateY(1px)}
@media (max-width:760px){
  .gw-dash .ghd-tiles{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:440px){
  .gw-dash .ghd-tiles{grid-template-columns:repeat(2,1fr)}
}

/* ---- fullscreen chart lightbox (mounted on <body>, so NOT scoped to .gw) ---- */
.ghd-lb{position:fixed;inset:0;z-index:9999;background:rgba(10,15,12,.86);
  display:flex;align-items:center;justify-content:center;padding:18px}
.ghd-lb[hidden]{display:none}
.ghd-lb-inner{background:#fff;border-radius:14px;width:min(1120px,96vw);height:92vh;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.ghd-lb-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid #e6e2d6;
  font-family:var(--font-mono);font-size:.78rem;color:#3d5a4d}
.ghd-lb-bar .ttl{font-weight:700}
.ghd-lb-btns{margin-left:auto;display:flex;gap:6px}
.ghd-btn{font-family:var(--font-mono);font-size:.66rem;font-weight:700;color:#2f6b45;background:#f6f3ea;
  border:1px solid #e6e2d6;border-radius:8px;padding:4px 10px;cursor:pointer;line-height:1;min-width:26px}
.ghd-btn:hover{background:#efeadb}
.ghd-btn:active{transform:translateY(1px)}
.ghd-lb-close{font-family:var(--font-mono);font-size:.9rem;color:#3d5a4d;background:none;border:none;
  cursor:pointer;padding:2px 6px;line-height:1}
.ghd-lb-stage{position:relative;flex:1;overflow:hidden;touch-action:none;cursor:grab;background:#e9e5d9}
.ghd-lb-stage.grabbing{cursor:grabbing}
.ghd-lb-stage .screenshot-browser{box-shadow:0 6px 20px rgba(0,0,0,.15)}
.ghd-lb-hint{padding:9px;text-align:center;font-family:var(--font-mono);font-size:.66rem;color:#6b8477;border-top:1px solid #e6e2d6}

/* play/pause toggle on the demo progress bar */
.gw .prog button.pp{background:none;border:0;padding:0 2px;cursor:pointer;line-height:1}
.gw .prog button.pp:hover{color:var(--ink)}