.route-section {
  width: 100%;
  padding: 48px 24px 48px;
}
#map-wrap {
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
}
#map-svg {
  width: 100%;
  height: auto;
  display: block;
  cursor: grab;
}
#map-svg:active { cursor: grabbing; }

/* non-scaling strokes: width stays constant during zoom */
#map-svg path, #map-svg circle, #map-svg line {
  vector-effect: non-scaling-stroke;
}

/* oblast fills */
.ob { stroke-linecap: round; stroke-linejoin: round; }

/* oblast names */
.ob-label {
  font-family: Lora, Georgia, serif;
  font-style: italic;
  fill: #AA797F;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

/* route */
.route-line {
  fill: none;
  stroke: #1a1a1a;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* station dots */
.dot-c { cursor: pointer; }
.dot-t { cursor: pointer; }

/* labels — white halo for readability over map */
.lbl       { font-family: Lora, Georgia, serif; pointer-events: none; text-anchor: middle; dominant-baseline: middle; }
.lbl-major { font-size: 12px; font-weight: bold; fill: #1a1a1a; }
.lbl-timed { font-size: 9px;  fill: #333; }
.lbl-minor { font-size: 8px;  fill: #555; }
.lbl-tiny  { font-size: 6.5px; fill: #777; }

/* tooltip */
#tt {
  position: fixed; background: #fff;
  border: 1px solid #f0d8dc; border-radius: 10px;
  padding: 11px 15px; font-family: Lora, Georgia, serif; font-size: 13px; color: #333;
  box-shadow: 0 6px 24px rgba(180,60,80,.12);
  pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 9999;
  min-width: 190px; text-align: left;
}
#tt.show { opacity: 1; }
.tt-name { font-size: 14px; font-weight: bold; color: #c0212b; margin-bottom: 6px; }
.tt-row  { display: flex; justify-content: space-between; gap: 12px; margin-top: 3px; font-size: 12px; }
.tt-lbl  { color: #aaa; }
.tt-val  { font-weight: 600; color: #222; }
.tt-tech { font-size: 12px; color: #bbb; font-style: italic; margin-top: 3px; }
.tt-hr   { height: 1px; background: #f8dde2; margin: 6px 0; }

.zoom-hint {
  font-size: 11px; color: #ccc;
  margin-top: 6px;
  font-family: Lora, Georgia, serif;
}

/* touch-action: none lets D3 zoom intercept pinch/pan instead of the browser */
#map-svg { touch-action: none; }

@media(max-width:640px){
  .route-section { padding: 0; }
  .lbl-major   { font-size: 13px; }
  .lbl-timed   { font-size: 11px; }
  .lbl-minor   { font-size:  9px; }
  .lbl-tiny    { font-size:  7px; }
}