/* GrowBox.pro — "grow visual" device panel component.
 * Scoped under .gpanel so it never collides with existing panel/admin styles.
 * Tokens (--paper/--sage/--terra…) come from style.css :root. */

.gpanel .backlink{display:inline-flex;align-items:center;gap:.4em;font-size:.85rem;font-weight:600;color:var(--sage-d);margin-bottom:.7rem}
.gpanel .backlink:hover{color:var(--terra-d)}
.gpanel .backlink svg{width:15px;height:15px}
.gpanel .eyebrow{font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--terra-d);display:inline-flex;align-items:center;gap:.55em}
.gpanel .eyebrow::before{content:"";width:18px;height:1.5px;background:var(--terra);border-radius:2px}

/* ── hero ─────────────────────────────────────────── */
.gpanel .gv{position:relative;background:radial-gradient(760px 440px at 50% 0,rgba(125,160,100,.12),transparent 62%),linear-gradient(180deg,#fff,var(--paper));
  border:1px solid var(--rule);border-radius:26px;padding:clamp(1.1rem,2.6vw,1.7rem) clamp(1.1rem,2.6vw,1.7rem) clamp(1.2rem,3vw,2rem);
  box-shadow:0 36px 70px -42px rgba(28,36,24,.5),0 10px 24px -16px rgba(28,36,24,.28);overflow:hidden;margin-bottom:22px}
.gpanel .gv__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:.4rem}
.gpanel .picker{display:flex;gap:.45rem;align-items:center}
.gpanel .picker .lbl{font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-right:.1rem}
.gpanel .swatch{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--rule);background:var(--cream);cursor:pointer;display:grid;place-items:center;padding:5px;transition:.2s}
.gpanel .swatch:hover{border-color:var(--leaf);transform:translateY(-2px)}
.gpanel .swatch.is-on{border-color:var(--sage);box-shadow:0 0 0 3px rgba(74,106,74,.16);background:var(--paper)}
.gpanel .swatch svg{width:100%;height:100%}

.gpanel .stage{position:relative;min-height:clamp(440px,52vw,560px)}
.gpanel.hero-plant{position:relative}
.gpanel.hero-plant .stage{min-height:clamp(360px,40vw,500px)}
.gpanel .scene{position:absolute;inset:0;width:100%;height:100%}
.gpanel .scene svg{width:100%;height:100%;overflow:visible}
.gpanel .ring-rot{transform-box:fill-box;transform-origin:center;animation:gv-rot 80s linear infinite}
.gpanel .ring-rot.r2{animation-duration:110s;animation-direction:reverse}
@keyframes gv-rot{to{transform:rotate(360deg)}}
.gpanel .leaf-sway{transform-origin:200px 250px;animation:gv-sway 7s ease-in-out infinite}
.gpanel .leaf-sway.alt{animation-duration:8.5s;animation-delay:-2s}
@keyframes gv-sway{0%,100%{transform:rotate(-1.8deg)}50%{transform:rotate(2.2deg)}}

.gpanel .tag{position:absolute;display:flex;align-items:center;gap:.6rem;width:max-content;max-width:none;background:rgba(251,249,240,.94);backdrop-filter:blur(6px);border:1px solid var(--rule);border-radius:14px;padding:.5rem .8rem;
  box-shadow:0 18px 40px -28px rgba(28,36,24,.45),0 4px 14px -10px rgba(28,36,24,.25);font-feature-settings:"tnum" 1;animation:gv-bob 6s ease-in-out infinite;z-index:2;overflow:visible}
.gpanel .tag .dot{position:static;top:auto;right:auto;box-shadow:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 30px;color:#fff}
.gpanel .tag .dot svg{width:16px;height:16px}
.gpanel .tag .v{font-family:'Fraunces',serif;font-weight:600;font-size:1.06rem;line-height:1;color:var(--ink);white-space:nowrap;min-width:2.6em;display:inline-block}
.gpanel .tag .v small{font-family:'Inter',sans-serif;font-size:.6rem;font-weight:600;color:var(--mute);margin-left:2px;white-space:nowrap}
.gpanel .tag .l{font-size:.57rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:.16rem;white-space:nowrap}
.gpanel .tag .tx{display:flex;flex-direction:column;line-height:1.14;flex:0 0 auto;min-width:max-content}
@keyframes gv-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.gpanel .tag.live-pulse .v{animation:gv-vp .5s ease-out}@keyframes gv-vp{0%{color:var(--sage-d)}100%{}}
.gpanel .tag .dot.terra{background:var(--terra)}.gpanel .tag .dot.sky{background:var(--sky)}.gpanel .tag .dot.amber{background:var(--amber)}
.gpanel .tag .dot.sage{background:var(--sage)}.gpanel .tag .dot.moss{background:var(--moss)}.gpanel .tag .dot.plum{background:var(--plum)}
.gpanel .f1{top:6%;left:3%;animation-delay:-.5s}   .gpanel .f2{top:4%;right:4%;animation-delay:-2.4s}
.gpanel .f3{top:28%;left:0;animation-delay:-1.4s}  .gpanel .f4{top:26%;right:0;animation-delay:-3.1s}
.gpanel .f5{top:50%;left:2%;animation-delay:-2.8s} .gpanel .f6{top:48%;right:1%;animation-delay:-1.1s}
.gpanel .f7{top:71%;left:7%;animation-delay:-3.6s} .gpanel .f8{top:69%;right:8%;animation-delay:-.8s}

/* actuator status strip */
.gpanel .acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin-top:1rem}
.gpanel .act{display:flex;align-items:center;gap:.7rem;background:var(--cream);border:1px solid var(--rule);border-radius:13px;padding:.65rem .8rem;transition:.25s}
.gpanel .act .ai{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--rule);color:var(--mute);flex:none}
.gpanel .act .ai svg{width:18px;height:18px}
.gpanel .act .an{font-size:.82rem;font-weight:600;color:var(--ink-2)}
.gpanel .act .as{font-size:.64rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-top:.1rem}
.gpanel .act.on{background:rgba(125,160,100,.14);border-color:rgba(125,160,100,.4)}
.gpanel .act.on .ai{background:var(--sage);border-color:var(--sage);color:#fff}
.gpanel .act.on .as{color:var(--sage-d)}
.gpanel .act.warm.on{background:rgba(180,99,45,.12);border-color:rgba(180,99,45,.36)}
.gpanel .act.warm.on .ai{background:var(--terra);border-color:var(--terra)}
.gpanel .act.warm.on .as{color:var(--terra-d)}

/* ── sensor tiles (click = toggle series on chart) ── */
.gpanel .g-section-lbl{margin:0 0 .8rem}
.gpanel .sensors{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:.9rem;margin-bottom:22px}
.gpanel .sensor{background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:1.05rem 1.15rem;box-shadow:0 2px 8px -4px rgba(28,36,24,.16);position:relative;overflow:hidden;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s,opacity .2s}
.gpanel .sensor:hover{transform:translateY(-2px)}
.gpanel .sensor.on{border-color:var(--c);box-shadow:0 0 0 1.5px var(--c),0 2px 8px -4px rgba(28,36,24,.16)}
.gpanel .sensor:not(.on){opacity:.78}
.gpanel .sensor::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c,var(--sage))}
.gpanel .sensor__top{display:flex;align-items:center;justify-content:space-between;color:var(--mute)}
.gpanel .sensor__top .name{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.gpanel .sensor__top svg{width:18px;height:18px;color:var(--c,var(--sage))}
.gpanel .sensor__val{font-family:'Fraunces',serif;font-weight:600;font-size:1.85rem;line-height:1;margin-top:.5rem;color:var(--ink);font-feature-settings:"tnum" 1}
.gpanel .sensor__val small{font-family:'Inter',sans-serif;font-size:.85rem;font-weight:600;color:var(--mute)}
.gpanel .sensor__bar{height:5px;border-radius:999px;background:var(--sand);margin-top:.65rem;overflow:hidden}
.gpanel .sensor__bar i{display:block;height:100%;border-radius:999px;background:var(--c,var(--sage));width:var(--w,60%);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.gpanel .sensor .pick{display:none;align-items:center;gap:.35em;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c);margin-top:.5rem}
.gpanel .sensor .pick::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.gpanel .sensor.on .pick{display:inline-flex}

/* chart card */
.gpanel .chartcard{margin-bottom:22px}
.gpanel .chartcard .card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:1rem}
.gpanel .minidonut{cursor:help;line-height:0}
.gpanel .chart-host{width:100%}

/* controller info */
.gpanel .info-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 2.2rem}
@media(max-width:680px){.gpanel .info-grid{grid-template-columns:1fr}}
.gpanel .dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1rem;margin:0}
.gpanel .dl dt{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);font-weight:600;align-self:center}
.gpanel .dl dd{margin:0;font-size:.92rem;color:var(--ink-2)}
.gpanel .dl dd code{font-family:ui-monospace,monospace;font-size:.85em;background:var(--cream-2);padding:1px 6px;border-radius:5px}
.gpanel .info-foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--rule)}

@media(max-width:600px){.gpanel .tag{transform:scale(.86)}.gpanel .tag .l{display:none}.gpanel .f7{top:74%}.gpanel .f8{top:72%}}