Initial commit: MVP scaffolding for Line of Sight application

- React frontend with MapLibre integration
- Node.js Express backend with dummy API
- Docker containerization (PostgreSQL+PostGIS, backend, frontend)
- Interactive map with direction selector
- 20 mock conurbations data
- Full project structure ready for PR workflow

frontend/src/styles/App.css

@@ -0,0 +1,226 @@
+.app-container {
+  display: flex;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+.map-container {
+  flex: 1;
+  height: 100%;
+  position: relative;
+  z-index: 1;
+}
+
+.controls {
+  width: 350px;
+  background: white;
+  padding: 20px;
+  box-shadow: -2px 0 10px rgba(0,0,0,0.1);
+  overflow-y: auto;
+  z-index: 2;
+}
+
+.control-group {
+  background: #f8f9fa;
+  padding: 15px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.control-group h3 {
+  margin-top: 0;
+  color: #2c3e50;
+  font-size: 16px;
+  margin-bottom: 15px;
+}
+
+.setting-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+  gap: 10px;
+}
+
+.setting-row label {
+  flex: 1;
+  font-size: 14px;
+  color: #555;
+}
+
+.setting-row input[type="range"] {
+  flex: 2;
+}
+
+.setting-row input[type="number"] {
+  width: 80px;
+  padding: 5px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.setting-row span {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+.setting-row button {
+  padding: 6px 12px;
+  margin: 0 5px;
+  border: 1px solid #ddd;
+  background: white;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.setting-row button:hover {
+  background: #e9ecef;
+}
+
+.action-btn {
+  width: 100%;
+  padding: 12px;
+  background: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background 0.3s;
+  margin-top: 10px;
+}
+
+.action-btn:hover:not(:disabled) {
+  background: #45a049;
+}
+
+.action-btn:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+
+.results-panel {
+  background: #f8f9fa;
+  padding: 15px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.results-panel h3 {
+  margin-top: 0;
+  color: #2c3e50;
+  font-size: 16px;
+  margin-bottom: 15px;
+}
+
+.results-panel table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.results-panel th {
+  background: #34495e;
+  color: white;
+  padding: 10px;
+  text-align: left;
+}
+
+.results-panel td {
+  padding: 8px;
+  border-bottom: 1px solid #ddd;
+}
+
+.results-panel tr:nth-child(even) {
+  background: #f8f9fa;
+}
+
+.results-panel tr:hover {
+  background: #e9ecef;
+}
+
+.more-info {
+  color: #666;
+  font-size: 12px;
+  text-align: center;
+  margin-top: 10px;
+}
+
+.instructions {
+  background: #fff3cd;
+  padding: 15px;
+  border-radius: 8px;
+  border-left: 4px solid #ffc107;
+}
+
+.instructions h3 {
+  margin-top: 0;
+  color: #856404;
+  font-size: 16px;
+}
+
+.instructions ol {
+  margin: 0;
+  padding-left: 20px;
+  font-size: 13px;
+  color: #856404;
+}
+
+.instructions li {
+  margin-bottom: 8px;
+}
+
+.city-marker {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: sans-serif;
+}
+
+.marker-dot {
+  width: 12px;
+  height: 12px;
+  background: #e74c3c;
+  border: 2px solid white;
+  border-radius: 50%;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+}
+
+.marker-label {
+  background: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: bold;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  margin-top: 2px;
+  white-space: nowrap;
+}
+
+.marker-pop {
+  background: #34495e;
+  color: white;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 10px;
+  margin-top: 2px;
+  white-space: nowrap;
+}
+
+@media (max-width: 768px) {
+  .app-container {
+    flex-direction: column;
+  }
+  
+  .controls {
+    width: 100%;
+    max-height: 40vh;
+    order: -1;
+  }
+  
+  .map-container {
+    height: 60vh;
+  }
+}