.metro-station {
  display: flex; align-items: center; gap: 5px; padding: 4px 5px 4px 0;
  border: 0; background: transparent; color: #153b85; font: 600 11px/1.3 Manrope, sans-serif;
  cursor: pointer; white-space: nowrap;
}
.metro-station__dot { width: 16px; height: 16px; flex: 0 0 16px; border: 4px solid #245dd8; border-radius: 50%; background: white; box-shadow: 0 0 0 2px white; box-sizing: border-box; }
.metro-station__name { padding: 4px 6px; background: white; box-shadow: 0 1px 6px #002b3c26; border-radius: 3px; }
.metro-station:focus-visible { outline: 2px solid #002b3c; outline-offset: 3px; }
.map-toolbar { position: absolute; top: 9px; left: 9px; display: flex; align-items: flex-start; gap: 10px; width: calc(100vw - var(--map-overlay-width) - 45px); max-width: calc(100vw - 64px); }
.map-toolbar .filters-toggle { position: static; flex: 0 1 auto; }
.metro-tools { position: relative; flex: 0 0 auto; color: #002b3c; }
.metro-tools[hidden], .metro-tools [hidden] { display: none; }
.metro-toggle { min-height: 44px; display: flex; gap: 10px; align-items: center; padding: 0 14px; border: 1px solid #d8e1e2; border-radius: 0; background: #fff; color: inherit; font: inherit; font-size: 12px; cursor: pointer; box-shadow: 0 6px 18px #002b3c1a; }
.metro-toggle > b { font-size: 15px; color: #245dd8; }
.metro-toggle__switch { width: 28px; height: 16px; padding: 2px; border-radius: 20px; background: #d7e0e3; transition: background .2s; box-sizing: border-box; }
.metro-toggle__switch::after { content: ''; display: block; width: 12px; height: 12px; border-radius: 50%; background: white; transition: transform .2s; }
.metro-toggle[aria-pressed='true'] { border-color: #245dd8; }
.metro-toggle[aria-pressed='true'] .metro-toggle__switch { background: #245dd8; }
.metro-toggle[aria-pressed='true'] .metro-toggle__switch::after { transform: translateX(12px); }
.metro-info { position: absolute; top: 100%; left: 0; width: max-content; display: grid; gap: 6px; max-width: 230px; margin-top: 7px; padding: 12px; background: #fff; border: 1px solid #d8e1e2; box-shadow: 0 6px 18px #002b3c1a; font-size: 11px; }
.metro-info button { border: 0; padding: 4px 0; color: #245dd8; background: transparent; font: inherit; text-align: left; cursor: pointer; }
body.filters-open .map-toolbar { visibility: hidden; pointer-events: none; }
@media(max-width: 820px) {
  .metro-station__name { position: absolute; top: 100%; left: 8px; transform: translateX(-50%); font-size: 10px; }
  .metro-station[data-label-side='top'] .metro-station__name { top: auto; bottom: 100%; }
  .map-toolbar { top: 10px; left: 10px; gap: 8px; width: calc(100vw - 20px); max-width: none; }
  .map-toolbar .filters-toggle { padding: 0 10px; height: 44px; }
  .metro-toggle { padding: 0 10px; gap: 7px; }
  .metro-info { font-size: 10px; }
}
@media(prefers-reduced-motion: reduce) {
  .metro-toggle__switch, .metro-toggle__switch::after { transition: none; }
}