#map {
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* ── RESULTS PANEL ─────────────────────────────────────── */
.results-panel {
  position: absolute;
  bottom: 0; right: 0;
  width: 380px;
  max-height: 55vh;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: 16px 0 0 0;
  overflow-y: auto;
  padding: 20px;
  z-index: 500;
  display: none;
}
.results-panel::-webkit-scrollbar { width: 4px; }
.results-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.results-panel.visible { display: block; }

.results-title {
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 10px;
  padding-right: 140px;
}
.results-title .small {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
.results-mode {
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  margin-bottom: 12px;
}
.results-meeting {
  font-size: 12px;
  font-family: 'DM Mono', monospace;
  color: var(--accent3);
  margin-bottom: 14px;
  padding: 8px 12px;
  background: rgba(255,209,102,.08);
  border-radius: 8px;
  border: 1px solid rgba(255,209,102,.2);
}
.results-warning {
  color: var(--accent2);
  font-size: 12px;
  padding: 10px 12px;
  background: rgba(255,107,107,.08);
  border: 1px solid rgba(255,107,107,.2);
  border-radius: 8px;
}

.route-card {
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 12px;
}
.route-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 14px;
}
.route-header .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.route-header .meta {
  margin-left: auto;
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  color: var(--muted);
}
.route-stop {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.route-stop.is-meeting { background: rgba(255,255,255,.03); }
.stop-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.stop-info { flex: 1; }
.stop-name { font-weight: 600; }
.stop-name .driver-label { font-size: 10px; color: var(--muted); }
.stop-time { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--accent3); margin-top: 2px; }
.stop-time.arrival { color: var(--accent); }
.stop-addr { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); margin-top: 2px; }

.results-toolbar {
  position: absolute;
  top: 12px; right: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
  z-index: 2;
}

.close-results {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  width: 26px; height: 26px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-export-img {
  background: var(--surface2);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .2s;
}
.btn-export-img:hover { background: var(--accent); color: #0d0f14; }
.btn-export-img:disabled { opacity: .6; cursor: progress; }

/* Leaflet overrides */
.leaflet-popup-content-wrapper {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
}
.leaflet-popup-tip { background: var(--surface2) !important; }
.leaflet-popup-content { font-family: 'Syne', sans-serif; font-size: 13px; }

/* ── MOBILE RESULTS PANEL ──────────────────────────────── */
@media (max-width: 860px) {
  .results-panel {
    width: 100%;
    max-height: 70vh;
    max-height: 70dvh;
    border-radius: 16px 16px 0 0;
    border-left: none;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .close-results { width: 32px; height: 32px; font-size: 16px; }
  .btn-export-img {
    font-size: 13px;
    padding: 6px 10px;
    min-height: 32px;
  }
  .btn-export-img span { display: none; }
  .results-title { font-size: 15px; padding-right: 90px; }
  .route-header { padding: 12px; font-size: 13px; }
  .route-stop { padding: 12px; font-size: 13px; }
  /* Bigger tap targets for leaflet controls */
  .leaflet-touch .leaflet-bar a { width: 34px; height: 34px; line-height: 32px; }
}