@media (max-width: 520px) {
  }

/* BMSDock v10 UI 1.4.2 — Top Controls transparency consistency */


/* Small controls on the map use one geometry. */
.side-tools,
.right-tools{
  gap:var(--top-control-gap) !important;
  align-items:center !important;
}







.small-ui-icon{
  width:var(--top-control-icon) !important;
  height:var(--top-control-icon) !important;
  display:block !important;
  margin:auto !important;
}
#rotateResetBtn .route-focus-icon{
  width:var(--top-control-icon) !important;
  height:var(--top-control-icon) !important;
}

/* Text-only mode control follows button typography. */
#colorModeBtn{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:700 !important;
}

/* Map popup menus use one component standard. */

.mode-menu.show,
.layer-menu.show{gap:4px !important;}


.mode-menu button:hover,
.layer-menu button:hover {
  background: var(--top-menu-item-bg-hover) !important;
  border-color: rgba(203, 213, 225, .92) !important;
  color: var(--top-menu-text) !important;
}
.mode-menu button:focus-visible,
.layer-menu button:focus-visible{
  outline:2px solid #fff !important;
  outline-offset:2px !important;
}

/* Primary playback controls form a second, larger hierarchy. */


.play:active,
.speed-btn:active{transform:scale(.97) !important;}
.play-state-icon{
  width:28px !important;
  height:28px !important;
}
.speed-btn{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
  font-size:20px !important;
  font-weight:700 !important;
  line-height:1 !important;
}


@media(max-width:520px){
  .side-tools,
  .right-tools{gap:9px !important;}
  

  /* Keep parking / speed typography identical to desktop on mobile. */
  .speed-btn,
  
}

/* UI 1.8.12 — mobile track-focus active state stays in approved glass system. */
@media (max-width: 768px) {
  

  
}

/* UI 1.8.12 — map control geometry only; visuals live in ui-controls.css */


.side-tools .round-tool svg,
.right-tools .round-tool svg,
#infoBtn svg,
#donateBtn svg,
#rotateResetBtn .route-focus-icon {
  width: var(--top-control-icon) !important;
  height: var(--top-control-icon) !important;
}

/* UI 1.8.12 — Map controls geometry and popup menus.
   Visual states live in ui-controls.css. */

.side-tools,
.right-tools {
  gap: var(--top-control-gap) !important;
}

.side-tools .round-tool,
.right-tools .round-tool,
#infoBtn,
#donateBtn {
  width: var(--top-control-size) !important;
  min-width: var(--top-control-size) !important;
  height: var(--top-control-size) !important;
  min-height: var(--top-control-size) !important;
  max-width: var(--top-control-size) !important;
  max-height: var(--top-control-size) !important;
  border-radius: var(--top-control-radius) !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  backdrop-filter: blur(6px) !important;
}

.side-tools .round-tool svg,
.right-tools .round-tool svg,
#infoBtn svg,
#donateBtn svg,
#rotateResetBtn .route-focus-icon {
  width: var(--top-control-icon) !important;
  height: var(--top-control-icon) !important;
}

.play,
.speed-btn {
  width: var(--playback-control-size) !important;
  min-width: var(--playback-control-size) !important;
  height: var(--playback-control-size) !important;
  min-height: var(--playback-control-size) !important;
  max-width: var(--playback-control-size) !important;
  max-height: var(--playback-control-size) !important;
  border-radius: var(--playback-control-radius) !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  backdrop-filter: blur(6px) !important;
}

/* Popup menus */
.mode-menu,
.layer-menu {
  background: var(--top-menu-bg) !important;
  border: 1px solid var(--top-menu-border) !important;
  box-shadow: var(--top-menu-shadow) !important;
  border-radius: var(--top-menu-radius) !important;
  padding: 6px !important;
  overflow: hidden !important;
  backdrop-filter: blur(10px) !important;
}

.mode-menu button,
.layer-menu button {
  width: 100% !important;
  min-height: var(--top-menu-item-h) !important;
  height: var(--top-menu-item-h) !important;
  padding: 0 12px !important;
  border: 1px solid var(--top-menu-item-border) !important;
  border-radius: var(--top-menu-item-radius) !important;
  background: var(--top-menu-item-bg) !important;
  color: var(--top-menu-text) !important;
  font-size: var(--top-menu-font) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.mode-menu button:hover,
.layer-menu button:hover {
  background: rgba(241,245,249,.96) !important;
  color: var(--top-menu-text) !important;
}

.mode-menu button.active,
.layer-menu button.active {
  background: var(--top-menu-active-bg) !important;
  border-color: var(--top-menu-active-bg) !important;
  color: var(--top-menu-active-text) !important;
}

/* Keep popup rows visually separated without hard dividers. */
.mode-menu button + button,
.layer-menu button + button {
  margin-top: 3px !important;
}

@media (max-width: 520px) {
  .side-tools,
  .right-tools {
    gap: 9px !important;
  }
}