:root {
  /* Default max-width. This is overridden by factory.js during initialization. */
  --svg-max-width: 500px;
  /* --svg-max-height: 900px; */
}

body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 10px;
  margin: 0px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
}

svg {
  width: 100%;
  max-width: var(--svg-max-width);
  /* max-height: var(--svg-max-height); */
  height: auto;
  /* keep aspect ratio */
  display: block;
  /* allows margin centering if needed */
  margin: 0 auto;
  /* extra centering (body already centers too) */
  border: 0px solid #ddd;
  cursor: default;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  margin: 4px 0;
  padding: 8px 12px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

svg * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
}

/* Hover effect for areas */
.area-hoverable { transition: filter 0.2s ease; } 
.area-hoverable:hover { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); } 
.area-dragging { cursor: grabbing !important; } 
.area-movable { cursor: grab; } 

html, body { height: 100%; }
body { overscroll-behavior: contain; } /* block bounce/back swipe handoffs */