/* Reuse the shared map shell + drawer panel/seg-control styling from map.css.
   Only the Liikenne-specific legend / popup / meta styles live below. */
@import url("map.css");

/* map.css scopes the full-bleed map container to .page-map; apply the same to
   this page so the Leaflet canvas fills the viewport here too. */
body.page-liikenne main.container { max-width: none; padding: 0; }

/* map.css only sizes #tilannehuone-map (map.php's container). This page's
   container is #liikenne-map, so it needs its own height or Leaflet renders
   into a 0px box → blank map. */
#liikenne-map { width: 100%; height: 100%; background: #0b1220; }

/* The view seg-control has four buttons — let them wrap in the narrow drawer. */
#liikenne-views { flex-wrap: wrap; }

/* ── Legend ─────────────────────────────────────────────────────────── */
.legend { display: flex; flex-direction: column; gap: 0.35rem; }
.legend-title {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}
.legend-item {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text);
}
.legend-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(15,23,42,0.6);
  flex: 0 0 auto;
}

.liikenne-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 0.25rem 0 0;
}

/* ── Station popup ──────────────────────────────────────────────────── */
.lk-popup h4 {
  margin: 0 0 0.4rem;
  font-size: 0.92rem;
}
.lk-row {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.82rem;
  padding: 0.1rem 0;
}
.lk-k { color: var(--text-muted); }
.lk-v { font-weight: 600; }
.lk-upd {
  margin-top: 0.4rem;
  font-size: 0.68rem;
  color: var(--text-muted);
}