* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #222;
}

#map {
  position: absolute;
  top: 0; left: 0; right: 320px; bottom: 0;
}

#sidebar {
  position: absolute;
  top: 0; right: 0; bottom: 0; width: 320px;
  background: white;
  border-left: 1px solid #ccc;
  padding: 16px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.5;
}

#sidebar h1 {
  font-size: 20px;
  margin-bottom: 6px;
}

.subtitle {
  color: #555;
  font-size: 12px;
  margin-bottom: 14px;
}

.field { margin-bottom: 12px; }

.field label {
  display: block;
  font-size: 12px;
  color: #555;
  margin-bottom: 4px;
}

.layer-toggles label.toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #222;
  margin-bottom: 2px;
}

.layer-toggles label.toggle input { margin: 0; }

.field select {
  width: 100%;
  padding: 6px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.hint {
  font-size: 11px;
  color: #888;
  margin-top: 4px;
}

.legend {
  font-size: 13px;
  line-height: 1.8;
}

.legend > div { display: flex; align-items: center; }

.sw {
  display: inline-block;
  margin-right: 8px;
  flex-shrink: 0;
}

.sw.line { width: 18px; height: 3px; }
.sw.dot { width: 10px; height: 10px; border-radius: 50%; }
.sw.dot.hollow { background: white !important; border: 1.5px solid; width: 9px; height: 9px; }
.sw.dash {
  width: 18px; height: 0;
  border-top: 2px dashed #8a5fbf;
}
.sw.chevron { width: 14px; text-align: center; font-size: 14px; }

.sw.bike { width: 20px; height: 0; border-top-color: #1a6faa; }
.sw.bike.protected { border-top-style: solid; border-top-width: 3px; }
.sw.bike.buffered { border-top-style: dashed; border-top-width: 4px; }
.sw.bike.lane { border-top-style: dashed; border-top-width: 2px; }
.sw.bike.shared { border-top-style: dotted; border-top-width: 3px; }
.sw.bike.greenway { border-top-style: double; border-top-width: 5px; }

hr { border: none; border-top: 1px solid #e5e3df; margin: 14px 0; }

#nav-counter {
  font-weight: 600;
  margin-bottom: 8px;
}

.nav-buttons {
  display: flex;
  gap: 8px;
}

.nav-buttons button {
  flex: 1;
  padding: 8px;
  background: #2f7a9e;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

.nav-buttons button:hover { background: #256485; }
.nav-buttons button:disabled { background: #ccc; cursor: default; }

.full-btn {
  display: block;
  width: 100%;
  padding: 8px;
  margin-top: 8px;
  background: #888;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

.full-btn:hover { background: #767676; }
.full-btn.active { background: #2f7a9e; }

#change-info { color: #333; }

#change-info .street {
  font-weight: 700;
  font-size: 14px;
  display: block;
  margin-bottom: 4px;
}

#change-info .action-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  color: white;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}

.action-badge.reversal { background: #111; }
.action-badge.contraflow { background: #2f8f6a; }

#change-info .blocks-note {
  display: block;
  font-size: 11px;
  color: #888;
  margin-bottom: 8px;
}

#change-info .detail-row {
  margin-top: 4px;
  color: #444;
}

#change-info .detail-row b { color: #222; }

#change-info .detail-row.debug {
  color: #999;
  font-size: 11px;
}

#loading {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #555;
  z-index: 2000;
}

.ward-label {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #8a5fbf;
  font-weight: 700;
  font-size: 12px;
  text-shadow: 0 0 3px white, 0 0 3px white, 0 0 3px white;
}

@media (max-width: 700px) {
  #map { right: 0; bottom: 45%; }
  #sidebar { top: 55%; left: 0; width: 100%; border-left: none; border-top: 1px solid #ccc; }
}