.card{background:var(--card);border:1px solid var(--border);border-radius:0;
  box-shadow:var(--shadow);padding:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
#cmhost .cm-editor{min-height:440px}
.stage .preview{--reserve-ar: 936 / 845}   /* load-grace: default example's viewBox — see workspace.css */
.method{color:var(--muted);font-size:12.5px}
@media (max-width:900px){ #cmhost .cm-editor{min-height:280px} }

/* drag */
@media (pointer: fine){
  /* fine only: drag is a mouse affordance (see app.js finePointer gate).
     touch-action:none here would fight a phone's vertical swipe-to-scroll —
     on coarse pointers a card must stay a scroll surface, not a drag handle. */
  .preview svg g[data-line]{cursor:grab;touch-action:none}
}
/* Move… / Place on map…: the armed one-shot placement state (see app.js).
   Accent 12% tint + accent-ink label is the house pill pairing (duel, alarm). */
.placehint{
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  margin:0 0 10px;padding:6px 6px 6px 14px;border-radius:0;
  background:color-mix(in srgb,var(--accent) 12%,var(--card));
  border:1px solid var(--accent);color:var(--accent-ink);
  font-size:14px;font-weight:600;
}
.placehint span{min-width:0}   /* wrap long labels; the bar is transient */
.placehint .btn{min-height:44px;flex:none}
.preview.placing svg{cursor:crosshair}
.preview.placing rect[data-plane]{stroke:var(--accent);stroke-width:1.5}

.dragghost{
  position:fixed;z-index:50;pointer-events:none;max-width:240px;
  padding:8px 14px;border-radius:0;font-size:13px;font-weight:600;
  background:var(--card);color:var(--ink);border:1px solid var(--accent);
  box-shadow:0 6px 22px rgba(10,30,45,.22),0 2px 6px rgba(10,30,45,.14);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transform:rotate(1.5deg) scale(1.03);
}