/* ════════════════════════════════════════════════════════════════════════
   ZONE PLANNING MERGE — one compact Data-Input card (sibling-styled) with a
   segmented selector; all editing happens in a slide-in WINDOW (drawer).
   The two original cards live hidden in #planStash and are moved into a
   drawer only while being edited.
   ════════════════════════════════════════════════════════════════════════ */
.plan-card .dinput-card-num{display:inline-flex;align-items:center;justify-content:center}
.plan-card .dinput-card-num svg{width:18px;height:18px}
.plan-stash{display:none!important}

/* ── segmented selector ── */
.plan-seg{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px;
  padding:5px;border-radius:14px;background:var(--p2,#f2efe6);
  border:1px solid var(--st,#e4dfce);
}
.plan-seg-tab{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:11px 8px 10px;border:1px solid transparent;border-radius:10px;
  background:transparent;color:var(--tx,#5a5640);font:inherit;cursor:pointer;
  transition:background .18s,box-shadow .18s,border-color .18s,transform .12s;
}
.plan-seg-tab:hover{background:var(--p,#fff)}
.plan-seg-tab:active{transform:translateY(1px)}
.plan-seg-ic{width:22px;height:22px;color:var(--st-tx,#8a866f);transition:color .18s}
.plan-seg-ic svg{width:22px;height:22px}
.plan-seg-t{font-size:12.5px;font-weight:700;line-height:1}
.plan-seg-s{font-size:10px;font-weight:500;color:var(--st-tx,#8a866f);line-height:1.2;text-align:center}
.plan-seg-tab.is-active{background:var(--p,#fff);border-color:var(--bl,#5C6B3F);box-shadow:0 2px 8px rgba(92,107,63,.14)}
.plan-seg-tab.is-active .plan-seg-ic,.plan-seg-tab.is-active .plan-seg-t{color:var(--bl,#5C6B3F)}
.plan-seg-dot{
  position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;
  background:var(--am,#24B47E);box-shadow:0 0 0 3px rgba(36,180,126,.18);
  opacity:0;transform:scale(.4);transition:opacity .18s,transform .18s;
}
.plan-seg-tab.is-on .plan-seg-dot{opacity:1;transform:scale(1)}

/* ── live summary line ── */
.plan-summary{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px;min-height:0}
.plan-summary:empty{margin:0}
.plan-chip{font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--p2,#efeada);color:var(--tx,#4a4632);border:1px solid var(--st,#e2dccb)}
.plan-chip--on{background:var(--bl,#5C6B3F);color:#fff;border-color:var(--bl,#5C6B3F)}
.plan-chip--ai{background:var(--am,#24B47E);color:#0d3f2c;border-color:var(--am,#24B47E)}
.plan-chip--warn{background:#fef3c7;color:#92400e;border-color:#fcd34d}
.plan-chip--off,.plan-chip--idle{background:transparent;color:var(--st-tx,#8a866f)}

.plan-seg-tab{cursor:pointer}
.plan-seg-tab.is-active{outline:none}

/* ════════════════════════════════════════════════════════════════════════
   CENTERED PROFESSIONAL MODAL — overrides the side-drawer shell for BOTH the
   ZonePlan and ZoneSense windows (loaded after zones-layer.css so it wins).
   ════════════════════════════════════════════════════════════════════════ */
.zone-drawer-ov{
  justify-content:center;align-items:center;padding:28px;
  background:rgba(14,18,28,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.zone-drawer{
  height:auto;max-height:90vh;border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 120px rgba(0,0,0,.5),0 4px 14px rgba(0,0,0,.25);
  transform:scale(.94) translateY(8px);opacity:0;
  transition:transform .26s cubic-bezier(.22,.61,.36,1),opacity .2s ease;
}
.zone-drawer-ov.open .zone-drawer{transform:none;opacity:1}
.zone-drawer-hdr{align-items:center;gap:14px}
@media (prefers-reduced-motion: reduce){ .zone-drawer{transition:none} }

/* ════ ZoneSense window — same shell, single scrolling column, comfy width ════ */
.zs-drawer{width:min(720px,96vw)}
.zs-drawer-body{flex:1;min-height:0;display:block;overflow:auto;padding:24px 28px}

/* header badge (professional accent) */
.zs-drawer-badge{
  flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:inline-flex;
  align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,var(--bl,#5C6B3F),#7a8a55);
  box-shadow:0 4px 12px rgba(92,107,63,.3);
}
.zs-drawer-badge svg{width:22px;height:22px}

/* the moved ZoneSense card sheds its own card chrome + header inside the drawer */
.zs-drawer-body .dinput-card{border:0!important;background:none!important;box-shadow:none!important;padding:0!important;margin:0!important}
.zs-drawer-body #zsCard>.dinput-card-hdr,
.zs-drawer-body #zsCard>.dinput-card-desc{display:none!important}
.zs-drawer-body .zs-body{margin-top:4px}