/* Shared venue diagram rendering — used by site-sops.html (editor, dispatch)
   and site-sops-view.html (read-only, staff). Keep both pages' output
   visually identical so what dispatch builds is what staff (and the PDF) see. */

.diagram-canvas{
  position:relative; width:100%; aspect-ratio:4/3;
  background:
    repeating-linear-gradient(0deg, #f5f7fb, #f5f7fb 24px, #eef1f7 24px, #eef1f7 25px),
    repeating-linear-gradient(90deg, #f5f7fb, #f5f7fb 24px, #eef1f7 24px, #eef1f7 25px);
  background-size:cover, cover;
  border:1.5px dashed #dde4ef; border-radius:12px; overflow:hidden; touch-action:none;
}
.diagram-canvas.has-bg{ background-image:var(--bg-img); background-size:cover; background-position:center; }
.diagram-canvas.static-canvas{ touch-action:auto; }

/* Rooms / corridors / walls */
.venue-shape{
  position:absolute; border-radius:4px; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:2px; box-sizing:border-box; touch-action:none; z-index:1;
}
.venue-shape.shape-room{ background:rgba(41,112,232,0.10); border:1.5px solid rgba(41,112,232,0.55); }
.venue-shape.shape-corridor{ background:rgba(201,122,18,0.14); border:1.5px dashed rgba(201,122,18,0.6); }
.venue-shape.shape-wall{ background:rgba(22,27,46,0.82); border:1px solid rgba(22,27,46,0.9); }
.venue-shape .shape-label{
  font-size:11px; font-weight:700; color:#2b3550; line-height:1.2; word-break:break-word;
  pointer-events:none; user-select:none;
}
.venue-shape.shape-wall .shape-label{ color:#fff; font-size:9.5px; }
.venue-shape .shape-resize-handle{
  position:absolute; right:-6px; bottom:-6px; width:14px; height:14px; border-radius:50%;
  background:#fff; border:2px solid var(--accent, #2970e8); cursor:nwse-resize; touch-action:none;
}
.venue-shape.selected{ outline:2.5px solid var(--accent, #2970e8); outline-offset:1px; }

/* Position/role markers */
.marker{
  position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column;
  align-items:center; cursor:grab; touch-action:none; user-select:none; z-index:2;
}
.marker:active{ cursor:grabbing; }
.marker .m-body{
  min-width:30px; height:30px; padding:0 6px; border-radius:50%; color:#fff; display:flex;
  align-items:center; justify-content:center; font-size:11px; font-weight:800;
  box-shadow:0 2px 6px rgba(8,15,28,0.35); border:2px solid #fff;
}
.marker.shape-pill .m-body{ border-radius:8px; }
.marker.shape-square .m-body{ border-radius:6px; }
.marker.shape-diamond .m-body{ border-radius:6px; transform:rotate(45deg); }
.marker.shape-diamond .m-body span{ display:inline-block; transform:rotate(-45deg); }
.marker.shape-note .m-body{
  border-radius:6px; min-width:70px; max-width:110px; height:auto; padding:5px 7px;
  font-size:10px; font-weight:600; white-space:normal; line-height:1.25; text-align:center;
}
.marker.selected .m-body{ outline:3px solid var(--accent, #2970e8); outline-offset:2px; }
.marker-label-tag{
  margin-top:3px; font-size:9.5px; font-weight:700; background:rgba(8,15,28,0.75); color:#fff;
  padding:1px 5px; border-radius:5px; max-width:90px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}