/* Site plan step on the /build configurator (deploy/build-page/template.html).
   Leaflet map with Esri imagery, draggable units, camera view cones with aim /
   reach / width handles. State lives in window.VORP_SITE_PLAN (vorp-site-plan.js). */
.sp-search{display:flex;gap:8px;margin-bottom:10px;position:relative}
/* address suggestions, under the search row */
.sp-sugg{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;background:#fff;border:1.5px solid var(--line);
  border-radius:10px;box-shadow:0 14px 34px rgba(10,15,23,.16);overflow:hidden;display:none}
.sp-sugg.on{display:block}
.sp-sugg button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 14px;border:0;background:#fff;
  cursor:pointer;font:inherit;font-size:13.5px;color:var(--ink);border-top:1px solid var(--line)}
.sp-sugg button:first-child{border-top:0}
.sp-sugg button svg{width:14px;height:14px;flex:none;color:var(--muted)}
.sp-sugg button span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-sugg button:hover,.sp-sugg button.hi{background:hsl(195 100% 45% / .09)}
.sp-sugg .sp-suggfoot{padding:6px 14px;font-size:10.5px;color:var(--muted);border-top:1px solid var(--line);background:var(--surface)}
.sp-search label{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:0 13px;
  border:1.5px solid var(--line);border-radius:9px;background:#fff;transition:border-color .13s,box-shadow .13s}
.sp-search label:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px hsl(195 100% 45% / .13)}
.sp-search label svg{width:16px;height:16px;flex:none;color:var(--muted)}
.sp-search input{flex:1;min-width:0;border:0;outline:0;background:none;padding:12px 0;font:inherit;font-size:14px;color:var(--ink)}
.sp-search input::placeholder{color:var(--muted)}
.sp-loc{flex:none;display:inline-flex;align-items:center;gap:7px;padding:0 14px;border:1.5px solid var(--line);
  border-radius:9px;background:#fff;cursor:pointer;font:600 13.5px/1 Inter,system-ui,sans-serif;color:var(--ink);
  transition:border-color .13s}
.sp-loc:hover{border-color:#b9c2cb}
.sp-loc svg{width:15px;height:15px}
.sp-loc:disabled{opacity:.5;cursor:wait}
.sp-msg{font-size:12.5px;color:var(--muted);min-height:16px;margin:-4px 0 8px}
.sp-msg.bad{color:#D3382E}
.sp-mapwrap{position:relative;border-radius:11px;overflow:hidden;border:1px solid var(--line);background:#dfe5ea;
  height:380px;isolation:isolate}
/* Full screen (Andre, 2026-11-01): the whole planner, map left and the search + cards column right */
.sp-root.full{position:fixed;inset:0;z-index:95;background:#fff;display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:auto auto auto minmax(0,1fr) auto}
.sp-root.full .sp-mapwrap{grid-area:1/1/6/2;position:relative;height:auto;border:0;border-radius:0}
.sp-root.full .sp-search{grid-area:1/2;margin:14px 16px 8px}
.sp-root.full .sp-msg{grid-area:2/2;margin:0 16px 6px}
.sp-root.full .sp-head{grid-area:3/2;margin:0 16px}
.sp-root.full #spList{grid-area:4/2;overflow:auto;min-height:0;padding:0 16px 8px}
.sp-root.full .sp-note{grid-area:5/2;margin:8px 16px 14px}
.sp-root.full .sp-head{flex-wrap:wrap;row-gap:8px}
.sp-root.full .sp-head b{white-space:nowrap}
body.sp-fullscreen .vfb-btn{display:none!important}   /* staging Feedback button would sit on the Add button */
@media(max-width:760px){
  .sp-root.full{grid-template-columns:1fr;grid-template-rows:52vh auto auto auto minmax(0,1fr) auto}
  .sp-root.full .sp-mapwrap{grid-area:1/1/2/2}.sp-root.full .sp-search{grid-area:2/1}.sp-root.full .sp-msg{grid-area:3/1}
  .sp-root.full .sp-head{grid-area:4/1}.sp-root.full #spList{grid-area:5/1}.sp-root.full .sp-note{grid-area:6/1}
}
.sp-map{position:absolute;inset:0;z-index:0}
.sp-map .leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.78)}
.sp-tools{position:absolute;top:12px;right:12px;z-index:5;display:flex;gap:8px}
.sp-tool{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border:0;border-radius:999px;
  background:rgba(255,255,255,.95);box-shadow:0 2px 10px rgba(10,15,23,.18);cursor:pointer;
  font:600 13px/1 Inter,system-ui,sans-serif;color:var(--ink)}
.sp-tool.icon{width:38px;padding:0;justify-content:center}
.sp-tool svg{width:16px;height:16px}
.sp-tool:hover{background:#fff}
.sp-empty{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:5;white-space:nowrap;
  padding:8px 14px;border-radius:999px;background:rgba(10,15,23,.78);color:#fff;font-size:12.5px;pointer-events:none}
.sp-mapwrap.full .sp-empty{bottom:28px}
.sp-loading{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:13px;background:#e8edf1}
/* unit marker: circle with the product cut-out */
.sp-unit{width:40px;height:40px;border-radius:50%;background:#fff;border:2.5px solid var(--primary);
  box-shadow:0 4px 14px rgba(10,15,23,.3);display:flex;align-items:center;justify-content:center;cursor:grab;
  transition:border-color .13s}
.sp-unit img{width:30px;height:30px;object-fit:contain;pointer-events:none}
.sp-unit.editing{border-color:#F26B21;box-shadow:0 0 0 4px rgba(242,107,33,.28),0 4px 14px rgba(10,15,23,.3)}
.sp-unitlab{position:absolute;left:50%;top:44px;transform:translateX(-50%);padding:3px 8px;border-radius:999px;
  background:#1b2027;color:#fff;font:700 10.5px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;white-space:nowrap;
  pointer-events:none}
.sp-unitwrap{position:relative;width:40px;height:40px}
/* cone handles */
.sp-h{box-sizing:border-box;background:#fff;border:3px solid #2f7fe6;box-shadow:0 2px 6px rgba(10,15,23,.35);cursor:grab}
.sp-h.aim{width:22px;height:22px;border-radius:50%}
.sp-h.edge{width:18px;height:18px;border-radius:4px;background:#2f7fe6;border-color:#fff}
.sp-h.aim.sel{border-color:#F26B21}
.leaflet-marker-draggable.sp-drag,.sp-h:active,.sp-unit:active{cursor:grabbing}
/* unit list */
.sp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 10px}
.sp-head b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.sp-head .sp-acts{display:flex;align-items:center;gap:14px}
.sp-clear{background:none;border:0;padding:0;cursor:pointer;font:500 13px Inter,system-ui,sans-serif;color:var(--muted)}
.sp-clear:hover{color:var(--ink)}
.sp-add{display:inline-flex;align-items:center;gap:6px;padding:11px 18px;border:0;border-radius:999px;
  background:var(--primary);color:#fff;cursor:pointer;font:600 14px/1 Inter,system-ui,sans-serif}
.sp-add:hover{background:var(--primary-dark)}
.sp-add:disabled{opacity:.5;cursor:not-allowed}
.sp-card{border:1.5px solid var(--line);border-radius:11px;background:#fff;margin-bottom:9px;overflow:hidden}
.sp-card.editing{border-color:var(--primary);box-shadow:0 0 0 3px hsl(195 100% 45% / .13)}
.sp-crow{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer}
.sp-card.editing .sp-crow{background:hsl(195 100% 45% / .08)}
.sp-cimg{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:#fff;flex:none;
  display:flex;align-items:center;justify-content:center}
.sp-cimg img{width:32px;height:32px;object-fit:contain}
.sp-cname{flex:1;min-width:0}
.sp-cname b{display:block;font-size:14.5px;color:var(--ink)}
.sp-cname span{font-size:12.5px;color:var(--muted)}
.sp-cstate{font-size:13px;color:var(--muted);white-space:nowrap}
.sp-card.editing .sp-cstate{color:var(--primary-dark);font-weight:600}
.sp-cbody{padding:0 14px 13px;border-top:1px solid var(--line)}
.sp-cbody .sp-tip{font-size:12.5px;color:var(--muted);margin:11px 0 10px;line-height:1.5}
.sp-views{display:flex;flex-direction:column;gap:6px}
.sp-view{display:flex;align-items:center;gap:10px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;font-size:12.5px}
.sp-view.sel{border-color:#F26B21;background:rgba(242,107,33,.06)}
.sp-view .sw{width:10px;height:10px;border-radius:50%;background:#2f7fe6;flex:none}
.sp-view b{color:var(--ink);font-weight:600}
.sp-view select.sp-model{font:600 12.5px Inter,system-ui,sans-serif;color:var(--ink);border:1px solid var(--line);border-radius:6px;background:#fff;padding:3px 6px;max-width:46%;cursor:pointer}
.sp-view select.sp-model:focus{outline:none;border-color:var(--primary)}
.sp-view span{color:var(--muted);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-view button{background:none;border:0;padding:2px 4px;cursor:pointer;font-size:16px;line-height:1;color:var(--muted)}
.sp-view button:hover{color:#D3382E}
.sp-cfoot{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.sp-mini{padding:8px 12px;border:1.5px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;
  font:600 12.5px/1 Inter,system-ui,sans-serif;color:var(--ink)}
.sp-mini:hover{border-color:#b9c2cb}
.sp-mini.danger{color:#D3382E}
.sp-mini:disabled{opacity:.4;cursor:not-allowed}
.sp-note{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5}
@media(max-width:1000px){.sp-mapwrap{height:320px}}

/* Zoom to unit: the map frame flashes so the change is noticed (vorp-site-plan.js revealMap) */
.sp-mapwrap{transition:box-shadow .35s}
.sp-mapwrap.sp-flash{box-shadow:0 0 0 4px #0089E0}