/* site-map.css - "Live site map" (sitemap/site-map.js). Port of the workplace console's .planmap
   (ui-v3.css) into retail --vx-* tokens. Every class is prefixed sm- : the console already owns
   .zn, .legend, .chip, .plan. Night theme = :root[data-theme="night"]. */

.sm-root{
  /* scene faces: top lit, east mid, south dark - the extrusion only reads if the three stay apart */
  --sm-slab:#E7ECEC; --sm-w-t:#FFFFFF; --sm-w-e:#D5DCDC; --sm-w-s:#AEB9B8;
  --sm-fu-t:#F3F6F6; --sm-fu-e:#CDD5D4; --sm-fu-s:#A4B0AF; --sm-shadow:rgba(16,32,30,.13);
  --sm-cust:var(--vx-info); --sm-staff:var(--vx-accent); --sm-other:var(--vx-ink-3);
  --sm-tint:var(--vx-info);
  container-type:inline-size; container-name:sitemap;
  display:flex; flex-direction:column; gap:10px; min-width:0;
}
:root[data-theme="night"] .sm-root{
  --sm-slab:#1B2625; --sm-w-t:#A7B4B2; --sm-w-e:#74817F; --sm-w-s:#4B5756;
  --sm-fu-t:#B6C2C0; --sm-fu-e:#808D8B; --sm-fu-s:#56625F; --sm-shadow:rgba(0,0,0,.45);
}

/* header */
.sm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sm-hd{min-width:0}
.sm-title{margin:0;font-size:14.5px;font-weight:600;color:var(--vx-ink)}
.sm-subtitle{font-size:12px;color:var(--vx-ink-3);margin-top:2px}
.sm-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;padding:3px 9px;border-radius:20px;
  white-space:nowrap;border:1px solid var(--vx-line);background:var(--vx-surface-2);color:var(--vx-ink-2)}
.sm-pill i{width:7px;height:7px;border-radius:50%;background:var(--vx-ok)}
.sm-pill.ok{color:var(--vx-ok);background:var(--vx-ok-soft);border-color:transparent}
.sm-pill.warn{color:var(--vx-high);background:var(--vx-high-soft);border-color:transparent}
.sm-pill.warn i{background:var(--vx-high)}

/* floor + view chips */
.sm-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.sm-chips{display:flex;flex-wrap:wrap;gap:5px}
.sm-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 10px;border-radius:20px;
  border:1px solid var(--vx-line);background:var(--vx-surface);color:var(--vx-ink-2);font:inherit;font-size:12px;
  cursor:pointer;white-space:nowrap;transition:border-color .12s,background .12s,color .12s}
.sm-chip:hover{border-color:var(--vx-line-strong);color:var(--vx-ink)}
.sm-chip.on{background:var(--vx-accent-soft);border-color:var(--vx-accent);color:var(--vx-accent);font-weight:600}
.sm-chip b{font-family:var(--vx-mono);font-weight:500;font-size:11.5px;color:var(--vx-ink)}
.sm-chip.on b{color:inherit}
.sm-chip:focus-visible{outline:2px solid var(--vx-accent);outline-offset:1px}

/* body: plan + side column (side column moves beside the plan when the card is wide) */
.sm-body{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@container sitemap (min-width:640px){
  .sm-body{grid-template-columns:minmax(0,1fr) minmax(190px,240px);align-items:start}
}
.sm-stagewrap{background:var(--vx-surface-2);border:1px solid var(--vx-line);border-radius:var(--vx-r-lg);padding:8px;min-width:0}
.sm-stage{position:relative;margin:0 auto;max-width:100%}
.sm-stage svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}

/* scene */
.sm-shadow{fill:var(--sm-shadow)}
.sm-slab{fill:var(--sm-slab);stroke:var(--vx-line-strong);stroke-width:1.2}
.sm-wall{stroke:var(--vx-line-strong);stroke-width:.5;stroke-linejoin:round;pointer-events:none}
.sm-wall.f-t{fill:var(--sm-w-t)} .sm-wall.f-e{fill:var(--sm-w-e)} .sm-wall.f-s{fill:var(--sm-w-s)}
.sm-furn{stroke:var(--vx-line);stroke-width:.4;stroke-linejoin:round;pointer-events:none}
.sm-furn.f-t{fill:var(--sm-fu-t)} .sm-furn.f-e{fill:var(--sm-fu-e)} .sm-furn.f-s{fill:var(--sm-fu-s)}

/* rooms: tint strength = --t (0..1) set per room; hue per view */
.sm-zn{fill:color-mix(in srgb,var(--vx-ink) 4%,var(--sm-slab));stroke:var(--vx-line-strong);stroke-width:1;cursor:pointer;
  transition:fill .15s var(--vx-ease,ease),stroke .15s}
.sm-zn.on{fill:color-mix(in srgb,var(--sm-tint) calc(12% + var(--t) * 34%),var(--sm-slab))}
.v-dwell .sm-zn.on{--sm-tint:var(--vx-med)}
.v-heatmap .sm-zn.on{--sm-tint:var(--vx-high);fill:color-mix(in srgb,var(--sm-tint) calc(10% + var(--t) * 48%),var(--sm-slab))}
.v-transitions .sm-zn{fill:var(--sm-slab)}
.sm-zn.unbound{fill:none;stroke-dasharray:7 6;cursor:default;opacity:.7}
:root[data-theme="night"] .sm-zn.unbound{fill:#26302F;stroke:#4E5C5B;opacity:1}
.sm-zn.stair{cursor:pointer}
.sm-zn.stale{stroke-dasharray:3 4}
.sm-zn:hover,.sm-zn:focus-visible{stroke:var(--vx-accent);stroke-width:2.5;outline:none}
.sm-zn:not(.unbound):hover,.sm-zn:not(.unbound):focus-visible{fill:color-mix(in srgb,var(--vx-accent) 18%,var(--sm-slab))}
.sm-zn.sel{stroke:var(--vx-accent);stroke-width:3}

/* occupancy wash drawn over the counters (a counter top covers most of its room, which hid the tint) */
.sm-wash{fill:var(--sm-tint);fill-opacity:calc(.04 + var(--t) * .16);pointer-events:none}
.v-dwell .sm-wash{fill:var(--vx-med)} .v-heatmap .sm-wash{fill:var(--vx-high)}

/* transitions */
.sm-flow{fill:none;stroke-width:var(--w);stroke-linecap:round;opacity:.8;cursor:help}
.sm-flow.cu{stroke:var(--sm-cust)} .sm-flow.st{stroke:var(--sm-staff)}
.sm-arrow.cu path{fill:var(--sm-cust)} .sm-arrow.st path{fill:var(--sm-staff)}

/* HTML overlay: labels stay at CSS size at any plan scale */
.sm-ov{position:absolute;inset:0;pointer-events:none}
.sm-lbl{position:absolute;transform:translate(-50%,-50%);width:max-content;max-width:calc(var(--lw) + 10px);min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;line-height:1.15}
.sm-nm{font-size:12.5px;font-weight:600;color:var(--vx-ink);overflow-wrap:normal;word-break:normal;text-wrap:balance;
  text-shadow:0 0 3px var(--sm-slab),0 0 3px var(--sm-slab),0 0 2px var(--sm-slab)}
.sm-nm-s{display:none}
.sm-lbl.dim{opacity:.6}
.sm-lbl.dim .sm-nm{font-weight:500;color:var(--vx-ink-2)}
.sm-sub2{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 2px;font-size:11.5px;color:var(--vx-ink-2);
  text-shadow:0 0 3px var(--sm-slab),0 0 3px var(--sm-slab)}
.sm-sub2 em{font-style:normal}
.sm-num{font-family:var(--vx-mono);font-weight:500;color:var(--vx-ink)}
.sm-empty{color:var(--vx-ink-3)}
.sm-dot{color:var(--vx-ink-3)}
.sm-n{display:inline-flex;align-items:center;gap:3px;font-family:var(--vx-mono);font-weight:500;color:var(--vx-ink);white-space:nowrap}
.sm-n em{font-family:var(--vx-font);font-weight:400;color:var(--vx-ink-2)}
.sm-n i{width:7px;height:7px;border-radius:50%;flex:none}
.sm-n.cu i{background:var(--sm-cust)} .sm-n.st i{background:var(--sm-staff)} .sm-n.ot i{background:var(--sm-other)}
.sm-lbl.narrow .sm-n em,.sm-lbl.narrow .sm-sub2 em{display:none}
.sm-lbl.flat{flex-direction:row;gap:6px;max-width:none;white-space:nowrap}
.sm-lbl.flat>*{flex:none}
.sm-lbl.stale .sm-sub2{opacity:.55}
.sm-flown{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:help;min-width:20px;height:20px;padding:0 5px;
  border-radius:10px;display:grid;place-items:center;font:600 11.5px/1 var(--vx-mono);color:#fff;background:var(--sm-cust);
  box-shadow:0 0 0 2px var(--sm-slab)}
.sm-flown.st{background:var(--sm-staff)}
:root[data-theme="night"] .sm-flown{color:#0B1413}
.sm-staffmark{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:2px;height:17px;min-width:17px;
  padding:0 4px;justify-content:center;border-radius:9px;background:var(--sm-staff);color:var(--vx-accent-ink);
  box-shadow:0 0 0 2px var(--sm-slab);font:600 10.5px/1 var(--vx-mono)}
.sm-staffmark svg{fill:currentColor;flex:none}

/* tooltip */
.sm-tip{position:absolute;z-index:5;max-width:240px;padding:8px 10px;border-radius:var(--vx-r);background:var(--vx-surface);
  border:1px solid var(--vx-line-strong);box-shadow:var(--vx-shadow-h,0 6px 22px rgba(0,0,0,.15));font-size:12px;color:var(--vx-ink);pointer-events:none}
.sm-tip[hidden]{display:none}
.sm-tip b{font-weight:600}
.sm-tip-sub{color:var(--vx-ink-2);margin-top:2px}
.sm-tip-sub .warn{color:var(--vx-high)}
.sm-tip-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}
.sm-tip-list li{display:flex;align-items:center;gap:6px;color:var(--vx-ink-2)}
.sm-tip-list li b{color:var(--vx-ink)}
.sm-tip-list li small{font-size:10.5px;color:var(--vx-accent);font-weight:600}
.sm-tip-list li i{width:7px;height:7px;border-radius:50%;flex:none}
.sm-tip-list li.st i{background:var(--sm-staff)} .sm-tip-list li.cu i{background:var(--sm-cust)} .sm-tip-list li.ot i{background:var(--sm-other)}
.sm-tip-list li.more{color:var(--vx-ink-3)}
.sm-tip-hint{margin-top:6px;font-size:11px;color:var(--vx-ink-3)}

/* side column */
.sm-side{display:flex;flex-direction:column;gap:10px;min-width:0;font-size:12px;color:var(--vx-ink-2)}
.sm-totals{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.sm-totals .sm-n{font-family:var(--vx-font);font-weight:400;color:var(--vx-ink-2);gap:5px}
.sm-totals .sm-n b{font-family:var(--vx-mono);font-weight:600;font-size:15px;color:var(--vx-ink)}
.sm-tot-lab{color:var(--vx-ink-3)}
.sm-legend{display:flex;align-items:center;gap:8px;color:var(--vx-ink-3);font-size:11.5px;line-height:1.35}
.sm-scale{flex:none;width:44px;height:9px;border-radius:5px;border:1px solid var(--vx-line)}
.sm-scale.occupancy{background:linear-gradient(90deg,color-mix(in srgb,var(--vx-info) 14%,var(--sm-slab)),color-mix(in srgb,var(--vx-info) 60%,var(--sm-slab)))}
.sm-scale.dwell{background:linear-gradient(90deg,color-mix(in srgb,var(--vx-med) 14%,var(--sm-slab)),color-mix(in srgb,var(--vx-med) 60%,var(--sm-slab)))}
.sm-scale.heatmap{background:linear-gradient(90deg,color-mix(in srgb,var(--vx-high) 10%,var(--sm-slab)),color-mix(in srgb,var(--vx-high) 72%,var(--sm-slab)))}
.sm-scale.transitions{border:0;height:4px;background:linear-gradient(90deg,var(--sm-cust) 50%,var(--sm-staff) 50%)}
.sm-note{font-size:11.5px;color:var(--vx-ink-3);background:var(--vx-surface-2);border:1px solid var(--vx-line);border-radius:var(--vx-r);padding:6px 9px}
.sm-lab{font-size:11px;color:var(--vx-ink-3);letter-spacing:.04em;text-transform:uppercase;margin-bottom:5px}
.sm-offchips,.sm-unk-names{display:flex;flex-wrap:wrap;gap:5px}
.sm-chip.off{border-radius:8px;min-height:26px;padding:2px 9px;background:var(--vx-surface-2)}
.sm-chip.off b{margin-left:2px}
.sm-chip.off small{font-size:11px;color:var(--vx-ink-3)}
.sm-chip.off:not(.busy){opacity:.72}
.sm-name{border:1px solid var(--vx-line);background:var(--vx-accent-soft);color:var(--vx-accent);border-radius:14px;padding:2px 9px;
  font:inherit;font-size:12px;cursor:pointer}
.sm-name:focus-visible{outline:2px solid var(--vx-accent);outline-offset:1px}
.sm-none{padding:18px;text-align:center;color:var(--vx-ink-3);font-size:12.5px}

/* phone (card under ~520px): workplace phone rules - drop wordy sub-labels, keep every number */
@container sitemap (max-width:520px){
  .sm-nm{font-size:11px}
  .sm-nm-f{display:none}
  .sm-nm-s{display:inline}
  .sm-sub2{font-size:11px}
  .sm-n em,.sm-sub2 em,.sm-wordy{display:none}
  .sm-chip{font-size:11.5px;padding:3px 9px}
  .sm-stagewrap{padding:4px}
}
@supports not (container-type:inline-size){
  @media (max-width:600px){
    .sm-nm{font-size:11px} .sm-nm-f{display:none} .sm-nm-s{display:inline}
    .sm-n em,.sm-sub2 em,.sm-wordy{display:none}
  }
}
@media (prefers-reduced-motion:reduce){.sm-zn,.sm-chip{transition:none}}

/* camera connected but no picture: warn tone, never read as an empty room */
.sm-novideo{color:var(--vx-high,#c2621c);font-weight:600}

/* Floor / Group chosen: areas outside it fade (display only) */
.sm-zn.grp-off{opacity:.28}
.sm-grp{margin:6px 0 0}.sm-grp .floorbar{margin:0}